数据处理之数组方法

最近对数组的处理比较多，就记录下使用的数组方法

目录

一：常见的增删改

1、arr.push() -- 改变原数组

2、arr.pop() -- 改变原数组

3、arr.shift() -- 改变原数组

4、arr.unshift() -- 改变原数组

5、 arr.splice(i,n)  -- 改变原数组

6、arr.concat() -- 改变原数组

7、str.split()

8、arr.sort() -- 改变原数组

9、arr.reverse() -- 改变原数组

10、arr.slice(start,end) -- 不改变原数组

 二、遍历

1、arr.forEach(callback)

2、arr.map(callback)

3、arr.filter(callback)

4、arr.every(callback)

5、arr.some()

6、arr.reduce(callback, initialValue)

7、arr.indexOf()

8、arr.lastIndexOf() 

9、arr.includes()

---

一：常见的增删改

1、arr.push() -- 改变原数组

从后面添加元素，返回值为添加完后的数组的长度

const arr =[1,2,3]
console.log(arr.push(4))   // 4  -- 返回的数组长度
console.log(arr) // [1,2,3,4]

2、arr.pop() -- 改变原数组

 从后面删除元素，只能是一个，返回值是删除的元素

const arr = [1,2,3]
console.log(arr.pop())     // 3 -- 返回删除的元素
console.log(arr)  //[1,2]

3、arr.shift() -- 改变原数组

 从前面删除元素，只能是一个，返回值是删除的元素

const arr = [1,2,3]
console.log(arr.shift())  // 1 -- 返回删除的元素
console.log(arr)   // [2,3]

4、arr.unshift() -- 改变原数组

 从前面添加元素, 返回值是添加完后的数组的长度

const arr = [1,2,3]
console.log(arr.unshift(4))    // 4 -- 返回长度
console.log(arr)  //[4,1,2,3]

5、 arr.splice(i,n)  -- 改变原数组

删除从i(索引值)开始之后的那个元素。返回值是删除的元素

const arr = [1,2,3,4,5]
console.log(arr.splice(2,1))     //[3] --- 返回删除的元素 2是元素的索引，1是删除元素的位数
console.log(arr)    // [1,2,5]

6、arr.concat() -- 改变原数组

连接两个数组 返回值为连接后的新数组

const arr = [1,2,3]
console.log(arr.concat([4,5]))  // [1,2,3,4,5]
console.log(arr)   // [1,2,3,4,5]

7、str.split()

将字符串转换成数组

const str = '123'
console.log(str.split('')) // ["1", "2", "3"]

8、arr.sort() -- 改变原数组

将数组进行排序,返回值是排好的数组 

9、arr.reverse() -- 改变原数组

将数组反转,返回值是反转后的数组

10、arr.slice(start,end) -- 不改变原数组

切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来的数组

const arr = [1,2,3,4,5]

const arr2 = arr.slice(1,3) // 不包含end索引的值
console.log(arr2 )   // [2,3] -- 返回一个新的数组
console.log(arr)    //  [1,2,3,4,5] -- 不改变原有数组

 二、遍历

1、arr.forEach(callback)

遍历数组,无return 即使有return，也不会返回任何值，并且会影响原来的数组

2、arr.map(callback)

映射数组(遍历数组),有return 返回一个新数组 。

3、arr.filter(callback)

过滤数组，返回一个满足要求的数组

4、arr.every(callback)

依据判断条件，数组的元素是否全满足，若满足则返回ture

5、arr.some()

依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture

6、arr.reduce(callback, initialValue)

 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

用的较少；但是有些用法可以记录下

（1）计算数组中每个元素出现的次数

const names = ['peter', 'tom', 'mary', 'bob', 'tom','peter'];

const nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1
  }
  return pre
},{})

console.log(nameNum); //{ peter: 2, tom: 2, mary: 1, bob: 1 }

（2）数组去重 

const arr = [1,2,3,4,4,1]

const newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])

console.log(newArr);// [1, 2, 3, 4]

（3）将多维数组转化为一维 

const arr = [[0, 1], [2, 3], [4,[5,6,7]]]

const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}

console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

7、arr.indexOf()

返回某个指定的字符串值在字符串中首次出现的位置 ，若没有侧返回-1

const arr = [1,2,3,2]

const arr1 = arr.indexOf(2)
console.log(arr1)  // 1  -- 返回索引值


const arr2 = arr.indexOf(3)
console.log(arr2)  // 2 -- 返回索引值

const arr2 = arr.indexOf(9)
console.log(arr2)  // -1

8、arr.lastIndexOf() 

和arr.indexOf()的功能一样，不同的是从后往前查找

const arr = [1,2,3,4,5,2]

const arr1 = arr.lastIndexOf(2)
console.log(arr1)  // 5

const arr2 = arr.lastIndexOf(9)
console.log(arr2)  // -1

9、arr.includes()

判断数中是否包含给定的值  返回布尔值

const arr = [1,2,3,4,5]

const arr1 = arr.includes(2)  
console.log(arr1)   // ture

const arr2 = arr.includes(9) 
console.log(arr2)    // false

const  arr3 = [1,2,3,NaN].includes(NaN)
console.log(arr3)  // true

 

indexOf 和includes的区别

1、indexOf -- 返回索引值；includes -- 返回布尔值

2、indexOf -- 不能对NaN进行判断；includes -- 可以判断NaN