js中处理数组常用方法一文搞定

总结一下js中操作数组的一些方法

复习巩固一下数组的一些方法。

---

1. push

• 用户向数组中添加一个或多个元素
• 改变原数组长度
• 返回改变后数组长度
• 代码示例

    const arr = [1,2]
    const length1 = arr.push(2);
    console.log(arr);//[1,2,2]
    console.log(length1);//3
    const length2 = arr.push(5,6,7);
    console.log(arr);//[1,2,2,5,6,7]
    console.log(length2);//6

2. pop

• 删除数组的最后一个元素
• 改变原数组长度
• 返回删除的元素，如果数组长度为空则返回undefined
• 代码示例

    const arr = [1,2,3];
    const deleteValue = arr.pop();
    console.log(deleteValue); //3
    console.log(arr); //[1,2]
    const arr2 = [];
    const deleteValue2 = arr2.pop();
    console.log(deleteValue2); //undefinded
    console.log(arr2); //[]

3. shift

• 删除数组的第一个元素
• 改变原数组长度
• 返回删除后的元素，如果数组为空则返回undefined
• 代码示例

    const arr = [1,2,3];
    const deleteValue = arr.shift();
    console.log(deleteValue); //1
    console.log(arr); //[2,3]
    const arr2 = [];
    const deleteValue2 = arr2.shift();
    console.log(deleteValue2); //undefinded
    console.log(arr2); //[]

4. unshift

• 向数组头部添加一个或者多个元素
• 改变原数组长度
• 返回添加后数组的长度
• 代码示例

    const arr = [1,2]
    const length1 = arr.unshift(2);
    console.log(arr);//[2,1,2]
    console.log(length1);//3
    const length2 = arr.unshift(5,6,7);
    console.log(arr);//[5,6,7,2,1,2]
    console.log(length2);//6

5. sort

• 用于为数组元素排序，按照 Unicode 编码的顺序进行排序，
• 在原数组上进行排序，改变原数组
• 返回值是排序后的数组，但是没有创建新数组
• 一个参数（可选）可选参数，用于指定排序规则的比较函数。如果省略该参数，则按照 Unicode 编码的顺序进行排序。参数是个比较函数
• 代码示例

   const arr = [2,2,1,2,3,4,5,6];
    //  arr.sort();
    //  console.log(arr);//[1, 2, 2, 2, 3, 4, 5, 6] 默认unicode顺序
    // arr.sort((a,b)=>a-b);
    // console.log(arr);//[1, 2, 2, 2, 3, 4, 5, 6] 自定义升序
    arr.sort((a,b)=>b-a);
    console.log(arr); //[6, 5, 4, 3, 2, 2, 2, 1] 自定义降序

6. splice

• 操纵数组的删除，新增元素
• 改变原数组
• 返回删除的元素；
• 3个参数
  • 第一个参数表示开始执行操作的起始索引
  • 第二个参数（可选）表示要删除的元素数，如果省略则表示从开始执行操作的位置删除到最后面
  • 第三个参数（可选）表示要要往数组中添加的元素，可以为多个
• 代码示例

   const arr = [1,2,3,4,5,6];
    const deleteArr = arr.splice(1);
    console.log(deleteArr); //[2,3,4,5,6]
    console.log(arr);//[1]
    const deleteArr2 = arr.splice(1,1,10,20);
    console.log(deleteArr2); //[]
    console.log(arr);//[1,10,20]

7. reverse

• 反转数组
• 改变原数组
• 没有返回值，（undefined）
• 代码示例

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

8. slice

• 切割数组获取开始索引到结束索引的元素数组（不包括结束）
• 不改变原数组
• 返回切割的数组
• 参数可以为负数
• 代码示例

   const arr = [1,2,3,4,5,6];
    const newArr = arr.slice(0,1);
    const newArr2 = arr.slice(0,-1);
    const newArr3 = arr.slice(-2,-1);
    console.log(arr);//[1,2,3,4,5,6]
    console.log(newArr);//[1]
    console.log(newArr2);//[1,2,3,4,5]
    console.log(newArr3);//[5]

9. at

• 获取当前索引位置的值，索引可以为负数，从后面数
• 不改变数组
• 返回索引位置的值，如果获取超出索引位置的值，则返回undefined
• 代码示例

     const arr = [1,2,3,4,5,6];
     console.log(arr.at(0)); //1
     console.log(arr.at(-1));//6
     console.log(arr.at(6));//undefined

10. length

• 设置数组长度和获取数组的长度
• 可以改变数组长度
• 获取时数组的长度，如果为空数组返回0，设置时，如果设置值小于数组原来长度则删除多余的元素，如果设置值大于数组原长度，则给该数组添加空值，获取该空值返回undefined
• 代码示例

    const arr = [1,2]
    console.log(arr.length); //2
    const arr2 = []
    console.log(arr2.length); //0
    
     // 设置数组长度
    const arr3 = [1,1];
    arr3.length =5;
    console.log(arr3); //[1, 1, 空属性 × 3]
    const arr4 = [1,2,3,4];
    arr4.length = 2;
    console.log(arr4); // [1,2]

11. isArray

• 判断传入参数是否为数组，通过Array对象调用
• 返回Boolean值，如果为数组则返回true，反之返回false
• 代码示例

    const arr = [];
    console.log(Array.isArray(arr));//true
    const obj = {a:1};
    console.log(Array.isArray(obj));//false
    const str = 'abc';
    console.log(Array.isArray(str));//false

12. concat

• 合并两个或多个数组
• 不改变原数组
• 返回一个新的合并后的数组
• 如果合并的为非数组对象则把这个非数组对象作为一个元素合并到新的数组中
• 代码示例

    const arr = [1,2];
    const arr2 = [3];
    const arr3 = {'a':4};
    const arrResult = arr.concat(arr,arr2,arr3);
    console.log(arrResult);// [1, 2, 1, 2, 3, {'a':4}]

13. includes

• 可以用来判断数组是否包含某个元素
• 不改变原数组
• 返回Boolean值
• 有两个参数
  • 第一个参数为要查找的元素
  • 第二个参数（可选）表示开始查找索引
• 代码示例

    const arr = [1,2,{'a':4}];
    const flag1 = arr.includes(1);
    const flag2 = arr.includes(1,1);
    const flag3 = arr.includes('1');
    const flag4 = arr.includes({'a':4});
    console.log(flag1); //true
    console.log(flag2); //false 传入了开始查询的索引
    console.log(flag3); //false 精准匹配
    console.log(flag4); //false 对象指向的是堆中开辟的一个引用地址,所以这里不相等
    console.log(arr); //[1,2,{'a':4}]

14. indexof

• 判断传入参数的是否在数组中，检测数组中是否含有某个元素，如果有返回该元素在数组的第一个位置的索引，如果没有则返回-1
• 不改变原数组
• 返回索引值，没有则返回-1
• • 有两个参数
    • 第一个参数为要查找的元素
    • 第二个参数（可选）表示开始查找索引
• 代码示例

    const arr = [1,2,{'a':4}];
    const flag1 = arr.indexOf(1);
    const flag2 = arr.indexOf(1,1);
    const flag3 = arr.indexOf('1');
    const flag4 = arr.indexOf({'a':4});
    console.log(flag1); //0
    console.log(flag2); //-1 传入了开始查询的索引
    console.log(flag3); //-1 精准匹配
    console.log(flag4); //-1 对象指向的是堆中开辟的一个引用地址,所以这里不相等
    console.log(arr); //[1,2,{'a':4}]

15. lastindexof

• 判断传入参数的是否在数组中，检测数组中是否含有某个元素，如果有返回该元素在数组的最后位置的索引，如果没有则返回-1
• 不改变原数组
• 返回索引值，没有则返回-1
• • 有两个参数
    • 第一个参数为要查找的元素
    • 第二个参数（可选）表示从哪个索引开始向前搜索，默认值为数组的长度减一。
• 代码示例

    const arr = [1,2,1,{'a':4}];
    const flag1 = arr.lastIndexOf(1);
    const flag2 = arr.lastIndexOf(1,1);
    const flag3 = arr.lastIndexOf('1');
    const flag4 = arr.lastIndexOf({'a':4});
    console.log(flag1); //2
    console.log(flag2); //0 传入了开始查询的索引从后往前
    console.log(flag3); //-1 精准匹配
    console.log(flag4); //-1 对象指向的是堆中开辟的一个引用地址,所以这里不相等
    console.log(arr); //[1,2,{'a':4}]

16. join

• 用于数组转字符串
• 不改变原数组
• 返回一个字符串
• 一个参数
  • 第一个参数（可选），指定用于分隔数组元素的字符串，默认值为逗号（,）。
• 代码示例

  const arr = [1,2,3,4];
    const arrStr1 = arr.join();
    const arrStr2 = arr.join('');
    const arrStr3 = arr.join(' ');
    const arrStr4 = arr.join(',');
    console.log(arr); //[1,2,3]
    console.log(arrStr1); //'1,2,3,4'
    console.log(arrStr2);//'1234'
    console.log(arrStr3);//'1 2 3 4' 
    console.log(arrStr4);//'1,2,3,4'
    
     // 特殊
    const arr = [];
    console.log(arr.join());//''
    const arr1 = [1,2]
    console.log(arr1.join(undefined)); //'1,2'
    console.log(arr1.join(null)); //'1,null,2'
    const arr2 = [1,null,undefined,2] //'1,,,2'
    console.log(arr2.join());

17. forEach

• 遍历数组中每个元素，并对每个元素执行指定操作。
• 执行指定操作后改变数组内容
• 没有返回值，返回undefined
• 两个参数，第一个参数回调函数，第二个参数执行函数的时候this的值
  • 第一个参数callback有3个参数
  • currentValue：当前正在执行的数组值
  • index：当前正在执行的数组索引
  • 调用forEach的这个数组
• 代码示例

     const arr = [1,2]; 
     const result = arr.forEach(function(cur,index,arr){
      arr[index] = cur*2
      console.log(cur);//1,2
      console.log(index);//0 1
      console.log(arr);//[2,2] [2,4]
      console.log(this); //[3,4] [3,4]
     },[3,4])
     console.log(result);//undefined
     console.log(arr);//[2,4]

18. map

• 创建一个新的数组，新的数组是原数组执行指定操作后的值
• 不会修改原数组，返回新数组
• 两个参数，第一个参数回调函数，第二个参数执行函数的时候this的值
  • 第一个参数callback有3个参数
  • currentValue：当前正在执行的数组值
  • index：当前正在执行的数组索引
  • 调用map的这个数组
• 在es6可以使用简写，不用写return
• 代码示例

     const arr = [1,2,3,4,5,6];
     const arr2 =arr.map(cur => cur*2)
     console.log(arr2);
     const objArr = [{name:"david",age:18},{name:"frank",age:20}];
     const objArr2 = objArr.map(item=>item.name)
     console.log(objArr2);

19. find

• 用于查找数组中满足指定条件的第一个元素，并返回该元素。如果找到了符合条件的元素，则 find() 方法会立即停止搜索，返回第一个满足条件的元素。如果数组中没有满足条件的元素，则返回 undefined。
• 不改变原数组
• 返回一个查找的元素
• 两个参数，第一个参数回调函数，第二个参数执行函数的时候this的值
  • 第一个参数callback有3个参数
  • currentValue：当前正在执行的数组值
  • index：当前正在执行的数组索引
  • 调用find的这个数组
• 代码示例

    const arr = [1,2,3,4,5,6];
    const value = arr.find(item=>item>1);
    console.log(arr);// [1,2,3,4,5,6]
    console.log(value);//2

20. findIndex

• 用于查找数组中满足指定条件的第一个元素，并返回该元素的索引值。如果找到了符合条件的元素，则 findIndex() 方法会立即停止搜索，返回第一个满足条件的元素的索引值。如果数组中没有满足条件的元素，则返回 -1。
• 不改变原数组
• 返回一个查找的元素的索引值
• 两个参数，第一个参数回调函数，第二个参数执行函数的时候this的值
  • 第一个参数callback有3个参数
  • currentValue：当前正在执行的数组值
  • index：当前正在执行的数组索引
  • 调用findIndex的这个数组
• 代码示例

    const arr = [1,2,3,4,5,6];
    const value = arr.findIndex(item=>item>7);
    console.log(arr);// [1,2,3,4,5,6]
    console.log(value);//-1

21. filter

• 过滤出数组中符合条件的元素组成一个新数组
• 不改变原数组
• 返回一个新的数组
• 两个参数，第一个参数回调函数，第二个参数执行函数的时候this的值
  • 第一个参数callback有3个参数
  • currentValue：当前正在执行的数组值
  • index：当前正在执行的数组索引
  • 调用filter的这个数组
• 代码示例

    const arr = [1,2,3,4,5,6];
    const newArr = arr.filter(item=>item>1);
    console.log(arr);// [1,2,3,4,5,6]
    console.log(newArr);//[2,3,4,5,6]

22. some

• 用于检测数组中是否至少有一个元素满足指定条件。它会对数组中的每个元素调用一个提供的回调函数，直到找到一个回调函数返回值为 true 的元素，然后立即停止遍历，并返回 true。如果没有找到任何满足条件的元素，则返回 false。
• 不改变原数组
• 返回Boolean值
• 两个参数，第一个参数回调函数，第二个参数执行函数的时候this的值
  • 第一个参数callback有3个参数
  • currentValue：当前正在执行的数组值
  • index：当前正在执行的数组索引
  • 调用some的这个数组
• 代码示例

    const arr = [1,2,3,4,5,6];
    const newArr = arr.some(item=>item>1);
    const newArr2 = arr.some(item=>item>7);
    console.log(arr);// [1,2,3,4,5,6]
    console.log(newArr);//true
    console.log(newArr2);//false

23. every

• 用于检测数组中是否所有元素满足指定条件。它会对数组中的每个元素调用一个提供的回调函数，依次查找，如果有不满足的则返回false并停止遍历，如果都满足指定条件，才返回 true。
• 不改变原数组
• 返回Boolean值
• 两个参数，第一个参数回调函数，第二个参数执行函数的时候this的值
  • 第一个参数callback有3个参数
  • currentValue：当前正在执行的数组值
  • index：当前正在执行的数组索引
  • 调用every的这个数组
• 代码示例

    const arr = [1,2,3,4,5,6];
    const newArr = arr.every(item=>item>1);
    const newArr2 = arr.every(item=>item>0);
    console.log(arr);// [1,2,3,4,5,6]
    console.log(newArr);//false
    console.log(newArr2);//true

24. reduce

• 见文章juejin.cn/post/728306…

25. flat

• 用于将嵌套的多维数组扁平化处理为一维数组；
• 不改变原数组
• 返回一个新数组
• 可以传一个Infinity值，可以实现深度扁平化，不传默认为1；可以为1，2，3.....
• 代码示例

    const arr = [[1,2],[2,1],[3,4]]
    const arr2 = [[1,2],[1,[4,3,6],9],[8]]
    const newArr = arr.flat();
    const newArr2 = arr2.flat(Infinity);
    console.log(arr);//[[1,2],[2,1],[3,4]]
    console.log(newArr);//[1, 2, 2, 1, 3, 4]
    console.log(newArr2);//[1, 2, 1, 4, 3, 6, 9, 8]

26. for...of...

• 对于数组来说，可以遍历得到每个元素的值
• 代码示例

    const arr = [1,2,3,4,5,6];
    for(let i of arr){
      console.log(i); //1 2 3 4 5 6
    } 

27. for...in...

• 对于数组来说，可以遍历得到每个元素的索引值
• 代码示例

  const arr = [1,2,3,4,5,6];
    for(let i in arr){
      console.log(i); //0 1 2 3 4 5 
      console.log(arr[i]);//1 2 3 4 5 6
    } 

---

只想到了这么多，还有哪些比较常用的，欢迎补充！