devbox
一键难忘520
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JS：33种原生JS数组方法（8种改变原数组方法，25种不涉及数组改变的方法）_js数组方法改变原数组

作者：一键难忘520 | 2024-08-01 17:29:19

赞

踩

js数组方法改变原数组

一、改变原数组方法

1.push()

作用：向数组的末尾添加一个或多个元素

返回：添加后数组的长度。

  1.     <script>
  2.       let arr = [1, 2, 3];
  3.       console.log(arr.push(4)); //4
  4.       console.log(arr); //[1, 2, 3, 4]
  5.       console.log(arr.push(2, 4)); //6
  6.       console.log(arr); //[1, 2, 3, 4, 2, 4]
  7.     </script>

2.pop()

作用：删除数组的最后一个元素。

返回：最后一个元素

  1.     <script>
  2.       let arr = [1, 2, 3];
  3.       console.log(arr.pop()); //3
  4.       console.log(arr); //[1, 2]
  5.     </script>

3.unshift()

作用：向数组的开头添加一个或多个元素。

返回：添加后数组的长度。

  1.     <script>
  2.       let arr = [1, 2, 3];
  3.       console.log(arr.unshift(4)); //4
  4.       console.log(arr); //[4, 1, 2, 3]
  5.       console.log(arr.unshift(5, 6)); //6
  6.       console.log(arr); //[5, 6, 4, 1, 2, 3]
  7.     </script>

4.shift()

作用：删除数组的第一个元素。

返回：删除的元素。

  1.     <script>
  2.       let arr = [1, 2, 3];
  3.       console.log(arr.shift()); //1
  4.       console.log(arr); //[2, 3]
  5.     </script>

5.splice()

作用：替换原数组中的元素

返回：被替换掉的元素

  1.     <script>
  2.       let arr = [1, 2, 3, 4, 5];
  3. //splice(1, 2, "a", "b")中的1，2代表元素组要替换的元素的下标，"a"，"b"代表用于替换的元素
  4.       console.log(arr.splice(1, 2, "a", "b"));//[2, 3]
  5.       console.log(arr);//[1, "a", "b", 4, 5]
  6.     </script>

6.reverse()

作用：颠倒数组中元素的顺序。

返回：颠倒后的数组。

  1.     <script>
  2.       let arr = [1, 2, 3];
  3.       console.log(arr.reverse());//[3, 2, 1]
  4.       console.log(arr);//[3, 2, 1]
  5.     </script>

7.sort()

作用：对数组的元素进行排序，默认排序顺序是根据字符串Unicode码点。

返回：排序好的数组

  1.     <script>
  2.       let arr = [6, 1, 4, 1, 2, 9];
  3.       // 正序排序
  4.       console.log(arr.sort()); //[1, 1, 2, 4, 6, 9]
  5.       console.log(arr); //[1, 1, 2, 4, 6, 9]
  6.       // 逆序排序
  7.       console.log(arr.sort((a, b) => b - a)); // 输出：[9, 6, 4, 2, 1, 1]
  8.       console.log(arr); // 输出：[9, 6, 4, 2, 1, 1]
  9.     </script>t>

8.copyWithin()

作用：浅复制数组的一部分到同一数组中的另一个位置。

返回：修改后的数组引用

  1. <script>
  2.       let array1 = [1, 2, 3, 4, 5];
  3.  
  4.       // 将位置 3 到 4 的元素复制到位置 0
  5.       console.log(array1.copyWithin(0, 3, 4));
  6.       // 输出: [4, 2, 3, 4, 5]
  7.  
  8.       // 负数索引表示从数组末尾开始计算
  9.       let array2 = [1, 2, 3, 4, 5];
  10.  
  11.       // 将位置 -2 到 -1 的元素复制到位置 0
  12.       console.log(array2.copyWithin(0, -2, -1));
  13.       // 输出: [4, 2, 3, 4, 5]
  14.  
  15.       // 如果 start 大于 end，则不复制任何元素
  16.       let array3 = [1, 2, 3, 4, 5];
  17.  
  18.       // 尝试将位置 3 到 2 的元素复制到位置 0（不会复制任何元素）
  19.       console.log(array3.copyWithin(0, 3, 2));
  20.       // 输出: [1, 2, 3, 4, 5]
  21.       // 如果 target 在 start 和 end 之间，则复制的结果会覆盖 target 位置的元素
  22.       let array4 = [1, 2, 3, 4, 5];
  23.  
  24.       // 将位置 1 到 4 的元素复制到位置 1
  25.       console.log(array4.copyWithin(1, 1, 4));
  26.       // 输出: [1, 2, 3, 4, 4]
  27.     </script>

休息一下吧

二、不改变原数组方法

1.concat()

作用：合并两个或多个数组

返回：合并后的新数组

  1.     <script>
  2.       let arr1 = [1, 2, 3];
  3.       let arr2 = [4, 5, 6];
  4.       console.log(arr1.concat(arr2)); //[1, 2, 3, 4, 5, 6]
  5.       console.log(arr1); //[1, 2, 3]
  6.       console.log(arr2); //[4, 5, 6]
  7.     </script>

2.slice()

作用：提取某个范围内的数组元素

返回：一个包含提取的元素的新数组

  1.     <script>
  2.       let arr = [1, 2, 3, 4, 5];
  3. //arr.slice(1, 4)提取的元素从下标1开始，包含下标1。从下标4结束，不包含下标4
  4.       console.log(arr.slice(1, 4)); //[2, 3, 4]
  5.       console.log(arr); //[1, 2, 3, 4, 5]
  6.     </script>

3.map()

作用：对数组每个元素分别调用

返回：一个调用完成后的新数组

  1.     <script>
  2.       let arr = [1, 2, 3];
  3.       console.log(arr.map((x) => x * 2)); //[2, 4, 6]
  4.       console.log(arr); // [1, 2, 3]
  5.     </script>

4.fillter()

作用：筛选出符合条件的元素

返回：包含所有符合条件的元素的新数组

  1.     <script>
  2.       let arr = [1, 2, 3, 4, 5];
  3.       console.log(arr.filter((x) => x > 3));//[4, 5]
  4.       console.log(arr);//[1, 2, 3, 4, 5]
  5.     </script>

5.forEach()

作用：遍历数组中每个元素并执行一次提供的操作

返回：无反回值

  1.     <script>
  2.       let arr = [1, 2, 3, 4, 5];
  3.       arr.forEach(
  4.         (item) => console.log(item + 2) // 3 4 5 6 7
  5.       );
  6.       console.log(arr); // [1, 2, 3, 4, 5]
  7.     </script>

6.some()

作用：检查数组中是否有至少一个元素满足提供的条件

返回：true或false

  1.     <script>
  2.       let arr = [1, 2, 3];
  3.       console.log(arr.some((x) => x > 2)); // true
  4.       console.log(arr.some((x) => x > 3)); // false
  5.       console.log(arr); // [1, 2, 3]
  6.     </script>

7.every()

作用：检查数组中是否所有元素都满足提供的条件

返回：true或false

  1.     <script>
  2.       let arr = [1, 2, 3];
  3.       console.log(arr.every((x) => x > 0)); // true
  4.       console.log(arr.every((x) => x > 2)); // false
  5.       console.log(arr); // [1, 2, 3]
  6.     </script>

8.find()，findLast()

find

作用：找到数组中第一个满足提供的条件的元素

返回：找到的满足条件的第一个元素的值或undefined

  1.     <script>
  2.       let arr = [1, 2, 3];
  3.       console.log(arr.find((x) => x > 0)); // 1
  4.       console.log(arr.find((x) => x > 3)); // undefined
  5.       console.log(arr); // [1, 2, 3]
  6.     </script>

findLast

作用：找到数组中最后一个满足提供的条件的元素

返回：找到的满足条件的最后一个元素的值或undefined

  1.     <script>
  2.       let arr = [1, 2, 3];
  3.       console.log(arr.findLast((x) => x > 0)); // 3
  4.       console.log(arr.findLast((x) => x > 3)); // undefined
  5.       console.log(arr); // [1, 2, 3]
  6.     </script>

9.includes()

作用：用来判断一个数组是否包含一个指定的值

返回：true或false

  1.     <script>
  2.       let arr = [1, 2, 3, NaN];
  3.       console.log(arr.includes(1)); // true
  4.       console.log(arr.includes(4)); // false
  5.       console.log(arr.includes(NaN)); // true
  6.       console.log(arr); // [1, 2, 3,NaN]
  7.     </script>

10.join()

作用：数组转字符串

返回：字符串

  1.     <script>
  2.       let arr = [1, 2, 3];
  3.       console.log(arr.join(",")); //1,2,3
  4.       console.log(arr);//[1, 2, 3]
  5.     </script>

11.toString()，toLocaleString()

作用：数组转字符串

返回：字符串

  1.     <script>
  2.       let arr = new Date();
  3.       console.log(arr.toLocaleString()); // 输出："2024/3/13 15:36:59"
  4.       console.log(arr.toString()); // 输出："Wed Mar 13 2024 15:36:59 GMT+0800 (中国标准时间)"
  5.       let arr2 = [1, 2, 3];
  6.       console.log(arr2.toString()); // 输出："1,2,3"
  7.       console.log(arr2.toLocaleString()); // 输出："1,2,3"
  8.     </script>

不同点：toLocaleString()会根据运行代码的环境的本地特定规则来格式化数组元素

12.flat()

作用：指定深度遍历数组

返回：遍历后的新数组

  1.     <script>
  2.       let arr = [1, [2, 3], [4, [5, 6]]];
  3.       console.log(arr.flat(0)); // [1, [2, 3], [4, [5, 6]]]
  4.       console.log(arr.flat()); // [1, 2, 3, 4, [5, 6]]
  5.       console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6]
  6.       console.log(arr); // [1, [2, 3], [4, [5, 6]]]
  7.     </script>

13.flatMap()

作用：映射每个元素，然后将结果压平成一个新数组

返回：按照条件生成的新数组

  1.     <script>
  2.       const arr = [1, 2, 3];
  3.       //将arr进行映射，每个元素映射为一个数组，然后将这些数组展开
  4.       console.log(arr.flatMap((x) => [x, x * 2])); // 输出 [1, 2, 2, 4, 3, 6]
  5.       console.log(arr); // 输出 [1, 2, 3]
  6.     </script>

14.entries(), keys(), values()

作用：遍历数组

返回：一个迭代器，包含该数组的键、值或键值对。

entries()：同时获取键和值

keys()：只获取键

values()：只获取值

  1.     <script>
  2.       const arr = ["a", "b", "c"];
  3.       for (const [index, value] of arr.entries()) {
  4.         console.log(index, value); // 输出：0 'a'，1 'b'，2 'c'
  5.       }
  6.       for (const index of arr.keys()) {
  7.         console.log(index); // 输出：0，1，2
  8.       }
  9.       for (const value of arr.values()) {
  10.         console.log(value); // 输出：'a'，'b'，'c'
  11.       }
  12.       console.log(arr);// 输出：['a', 'b', 'c']
  13.     </script>

15.reduce()，reduceRight()

reduce

作用：对数组中的每个元素执行一个函数（升序执行），将其结果汇总为单个返回值。

返回：累计处理的结果。

  1.     <script>
  2.       let arr = [1, 2, 3, 4];
  3.       console.log(
  4.         arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
  5.       ); // 输出：10
  6.       console.log(arr);// 输出：[1, 2, 3, 4]
  7.     </script>

reduceRight

作用：对数组中的每个元素执行一个函数（降序执行），将其结果汇总为单个返回值。

返回：累计处理的结果

  1.     <script>
  2.       let arr = [1, 2, 3, 4];
  3.  
  4.       console.log(
  5.         arr.reduceRight(
  6.           (accumulator, currentValue) => accumulator + currentValue,
  7.           0
  8.         )
  9.       ); // 输出：10
  10.  
  11.       console.log(arr); // 输出：[1, 2, 3, 4]
  12.     </script>

16.indexOf() ，lastIndexOf()

作用：查找数组中指定元素的第一个（或最后一个）出现的索引位置。

返回：找到的元素索引，如果没有找到则返回-1。

  1.     <script>
  2.       let arr = [1, 2, 3, 2];
  3.       console.log(arr.indexOf(2)); // 输出：1
  4.       console.log(arr.lastIndexOf(2)); // 输出：3
  5.       console.log(arr); // 输出：[1, 2, 3, 2]
  6.     </script>

17.findIndex()

作用：查找数组中第一个满足提供的测试函数条件的元素的索引。

返回：找到元素的索引，否则返回-1。

  1.     <script>
  2.       let arr = [1, 2, 3];
  3.       console.log(arr.findIndex((x) => x === 2)); // 输出：1
  4.       console.log(arr); // 输出：[1, 2, 3]
  5.     </script>

18.isArray()

作用：检测是否为数组。

返回：true或false。

  1.     <script>
  2.       const arr = [1, 2, 3];
  3.       console.log(Array.isArray(arr)); // 输出：true
  4.       const arr2 = { arr: arr };
  5.       console.log(Array.isArray(arr2)); // 输出：false
  6.     </script>

19.from() ， of()：

Array.from()：可以从类数组对象或可迭代对象创建一个新的数组。

Array.of()：用于创建一个具有可变数量参数的新数组。

返回：创建的新数组

  1.     <script>
  2.       console.log(Array.from("foo")); // 输出：['f', 'o', 'o']
  3.       console.log(Array.of(1, 2, 3)); // 输出：[1, 2, 3]
  4.     </script>

20.fill()

作用：填充数组的一部分或全部元素为一个固定值。

返回：一个新数组

  1.     <script>
  2.       console.log(new Array(5).fill(0));//[0,0,0,0,0]
  3.     </script>

21.at()

作用：通过索引直接读取数组元素

返回：读到的元素

  1.     <script>
  2.       let myArray = ["apple", "banana", "cherry"];
  3.       console.log(myArray.at(0)); // 输出："apple"
  4.       console.log(myArray.at(-1)); // 输出："cherry"
  5.     </script>

22.toSpliced()

作用：裁剪数组中的元素,splice的不改变原数组方式

返回：裁剪后的新数组

  1.     <script>
  2.       let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  3.       // 从索引4开始删除2个元素
  4.       let newArr = arr.toSpliced(4, 2);
  5.       console.log(arr); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  6.       console.log(newArr); //[1, 2, 3, 4, 7, 8, 9, 10]
  7.     </script>

23.toReversed()

作用：逆转数组，reverse()的不改变原数组方法

返回：逆转后的新数组

  1.     <script>
  2.       let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  3.       let newArr = arr.toReversed();
  4.       console.log(arr);// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  5.       console.log(newArr); //[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
  6.     </script>

24.toSorted()

作用：数组排序,sort()的不改变原数组方式

返回：排序好的新数组

  1.     <script>
  2.       let arr = [5, 4, 9, 2, 7, 1, 3, 8, 6, 10];
  3.       let newArr = arr.toSorted();
  4.       console.log(arr); // [5, 4, 9, 2, 7, 1, 3, 8, 6, 10]
  5.       console.log(newArr); //[1, 10, 2, 3, 4, 5, 6, 7, 8, 9]
  6.     </script>

25.with()

作用：替换数组中的元素

返回：替换元素后的新数组

  1.     <script>
  2.       let arr = [1, 2, 3, 4, 5];
  3.       let newArr = arr.with(1, 4);
  4.       console.log(arr); // [5, 4, 9, 2, 7, 1, 3, 8, 6, 10]
  5.       console.log(newArr); //[1, 10, 2, 3, 4, 5, 6, 7, 8, 9]
  6.     </script>

觉得有用就点个赞吧！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/一键难忘520/article/detail/915148
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号