前端数据处理常用方法

一、处理对象

Object.keys()

Object.values()

for ( let i in Obj){

console.log(i)

console.log(obj[i])
} 

二、处理数组

1、不会改变数组

find  是返回数组中符合条件的第一个元素,否则返回 undefined

适用场景：一个由多个对象组成的数组，你明确知道对象中的属性有且仅有一个是你需要的，你就可以通过此方法返回这个对象

// 从该数组中找到符合该条件的第一个值

const c = [2, 4, 6, 8, 10]

const ck = c.find(item => {

return item > 8

})

console.log('ck', ck) // 10

 

2.findIndex() 返回数组中符合条件的第一个元素的索引，否则返回-1.不会改变原数组

// 从该数组中找到符合条件的第一个元素的索引

const d = [5, 10, 15, 20, 25]

const dk = d.findIndex(item => {

return item > 20

})

console.log('dk', dk) // 4

 

3. filter() 从该数组中过滤出符合条件的所有元素，否则返回[ ] ,不会改变原数组

// 从该数组中过滤出来符合条件的数组

const e = [1, 3, 5, 7, 9]

const ek = e.filter(item => {

return item > 5

})

console.log('ek', ek) // [7,9]

 

map（）默认会有返回值，一般返回一个数组。这里要强调一下，函数默认没有返回值。如果函数内部没有明确使用return语句返回一个值，那么该函数执行完毕后会自动返回undefined。所以这个也是map（）的一个特色

可以方便地对数组中的每个元素进行操作，并生成一个新的数组；
不会改变原始数组。

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(function(num) {
    return num * 2;
});
console.log(doubled); // 输出 [2, 4, 6, 8]

 

4.indexOf() 从该数组中查询出符合条件的返回索引,不符合的返回-1

const f = ['张', '三', '李', '四']

// const fk = f.indexOf('三') // 1

const fk = f.indexOf('王') // -1

console.log('fk', fk)

 

5.some() 从该数组中查询出符合条件的返回布尔值,有一个符合条件的就返回true，都不符合条件的返回false,不会改变原数组

const g = [10,20,50,60,70,80]

const gk = g.some(item => item == 20)

console.log('gk',gk) // true

 

6.join() 将数组转换为字符串（默认以逗号为分隔符），不会改变原数组

const l = [2,4,6,8,10]

const lk = l.join()

console.log('lk',lk); // 2,4,6,8,10

 

7.concat() （连接两个或多个数组）,返回拼接后的数组，不会改变原数组

const r = [1,10,5,8,3]

const r1 = [2,4,6]

const r2 = [2,0,6]

console.log(r.concat(r1,r2)); // [1, 10, 5, 8, 3, 2, 4, 6, 2, 0, 6]

console.log('r',r); //[1,10,5,8,3]

 

8.slice(参数1 , 参数2)（数组截取） 不会改变原数组

//参数1：开始下标,可选。规定从何处开始选取。如果是负数，从数组尾部开始算起的位置(即-1 指最后一个元素，-2 指倒数第二个元素，以此类推)
//参数2：结束下标,可选。规定从何处结束选取。
//注意：1.包含开始位置但是不包含结束位置；
//2.只告诉开始位置 会从开始裁剪到字符串结束
//3.裁剪方向始终是从左往右；
//4.参数可以是一个负数，slice(-start)
const s = [1,10,5,8,3]

const sk = s.slice(1,2)

console.log('sk',sk); // 10

console.log('s',s); // [1, 10, 5, 8, 3]

 

2、会改变数组

9.splice() （数组更新）
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目,会改变原数组

arr.splice(index , howmany , item1,.....,itemX)
index：必需，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX：可选。向数组添加的新项目。
返回值：含有被删除的元素的数组，若没有删除元素则返回一个空数组。
const arr = ["张三","李四","王五","小明","小红"];

// 1.删除1个

const arr1 = arr.splice(2,1);

console.log('arr1',arr1); // ["王五"]

console.log(arr); // ["张三", "李四", "小明", "小红"]

//2.删除多个

var arr2 = arr.splice(1,2);

console.log('arr2',arr2); // ["李四", "小明"]

console.log(arr); // ["张三", "小红"]

// 3.添加1个

var arr3 = arr.splice(1,0,"小刚");

console.log('arr3',arr3); // [] (没有删除元素，所以返回的是空数组)

console.log(arr); // ["张三", "小刚", "小红"]

// 4.添加多个

var arr4 = arr.splice(3,0,"刘一","陈二","赵六");

console.log('arr4',arr4); // []

console.log(arr); // ["张三", "小刚", "小红", "刘一", "陈二", "赵六"]

// 5.王五"替换"小刚

var arr5 = arr.splice(1,1,"王五");

console.log('arr5',arr5); // ["小刚"]

console.log(arr); // ["张三", "王五", "小红", "刘一", "陈二", "赵六"]

// 6.替换多个

var arr6 = arr.splice(1,4,"李四");

console.log('arr6',arr6); // ["王五", "小红", "刘一", "陈二"]

console.log(arr); // ["张三", "李四", "赵六"]

 

10.push()和pop()（数组尾操作）

//push()：向数组的末尾添加一个或多个元素，并返回新的长度，会改变原数组
//pop()：用于删除并返回数组的最后一个元素，会改变原数组
const m = [2,4,6,8,10]

const mk = m.push(12,14)

console.log('mk',mk); // 7

console.log('m',m); // [2, 4, 6, 8, 10, 12, 14]

const k = [2,4,6,8,10]

const kk = k.pop()

console.log('kk',kk); // 10

console.log('k',k); // [2, 4, 6, 8]

 

11. unshift()和shift() （数组首操作）

//unshift()：向数组的开头添加一个或更多元素，并返回新的长度，会改变原数组
//shift()：把数组的第一个元素从其中删除，并返回第一个元素的值，会改变原数组
const o = [2,4,6,8,10]

const ok = o.unshift(12,14)

console.log('ok',ok); // 7

console.log('o',o); // [12, 14, 2, 4, 6, 8, 10]

const n = [2,4,6,8,10]

const nk = n.shift()

console.log('nk',nk); // 2

console.log('n',n); // [4, 6, 8, 10]

 

12.sort()（排序）对数组的元素进行排序,会改变原数组（按照字符编码的顺序进行排序，使用排序函数进行排序）

const p = [1,10,5,8,3]

function sortNumber(a,b){return a - b}; // 升序

console.log(p.sort(sortNumber)); // [1, 3, 5, 8, 10]

console.log('p',p); // [1, 3, 5, 8, 10]

const p1 = [1,10,5,8,3]

function sortNumber1(a,b){return b - a}; // 降序

console.log(p1.sort(sortNumber1)); // [10, 8, 5, 3, 1]

console.log('p1',p1); // [10, 8, 5, 3, 1]

 

13.reverse() （反转数组）用于颠倒数组中元素的顺序,会改变原数组

const q = [1,10,5,8,3]

console.log(q.reverse()); // [3, 8, 5, 10, 1]

console.log('q',q); //[3, 8, 5, 10, 1]