JavaScript数组原型方法分类详解与示例

JavaScript数组的方法非常丰富,主要分为数组原型方法和从Object对象继承来的方法,这篇文章主要介绍了JavaScript数组原型方法分类的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、返回新数组的方法（不修改原数组）

1. map()

• 功能 ：对数组中每个元素执行函数，返回结果组成的新数组

• 示例 ：

  const arr = [1, 2, 3];
   const newArr = arr.map(x => x * 
   2); // [2, 4, 6]
   console.log(arr); // [1, 2, 3] 
   (原数组不变)

2. filter()

• 功能 ：根据条件筛选元素，返回符合条件的元素组成的新数组

• 示例 ：

  const arr = [1, 2, 3, 4];
   const newArr = arr.filter(x => x 
   > 2); // [3, 4]
   console.log(arr); // [1, 2, 3, 
   4] (原数组不变)

3. concat()

• 功能 ：连接两个或多个数组，返回新数组

• 示例 ：

  const arr1 = [1, 2];
   const arr2 = [3, 4];
   const newArr = arr1.concat
   (arr2); // [1, 2, 3, 4]
   console.log(arr1); // [1, 2] (原
   数组不变)

4. slice()

• 功能 ：截取数组的一部分，返回新数组

• 示例 ：

  const arr = [1, 2, 3, 4];
   const newArr = arr.slice(1, 
   3); // [2, 3]
   console.log(arr); // [1, 2, 3, 
   4] (原数组不变)

5. reduce()（可返回新数组）

• 功能 ：对数组元素执行累积操作，可返回任意类型值（包括新数组）

• 示例 ：

  const arr = [1, 2, 3];
   const newArr = arr.reduce((acc, 
   curr) => [...acc, curr * 2], 
   []); // [2, 4, 6]
   console.log(arr); // [1, 2, 3] 
   (原数组不变)

6. flat([depth])

• 功能 ：将嵌套数组扁平化，返回新数组

• depth（可选）:指定扁平化深度，默认值为1，值为Infinity时完全扁平化

• 示例 ：

  const arr = [1, [2, 3], [4, 
   [5]]];
   const newArr = arr.flat(2); // 
   [1, 2, 3, 4, 5]
   console.log(arr); // [1, [2, 3], 
   [4, [5]]] (原数组不变)

7. flatMap()

• 功能 ：先执行 map，再执行 flat(1)，返回新数组

• 示例 ：

  const arr = [1, 2, 3];
   const newArr = arr.flatMap(x => 
   [x, x * 2]); // [1, 2, 2, 4, 3, 
   6]
   console.log(arr); // [1, 2, 3] 
   (原数组不变)

8. toLocaleString() / toString()

• 功能 ：将数组转换为字符串，返回字符串（不是数组，但不修改原数组）

• 示例 ：

  const arr = [1, 2, 3];
   const str = arr.toString(); // 
   "1,2,3"
   console.log(arr); // [1, 2, 3] 
   (原数组不变)

二、在原数组上操作的方法（修改原数组）

1. push()

• 功能 ：在数组末尾添加元素，返回新长度

• 示例 ：

  const arr = [1, 2, 3];
   const length = arr.push(4); // 4
   console.log(arr); // [1, 2, 3, 
   4] (原数组已修改)

2. pop()

• 功能 ：移除数组末尾元素，返回被移除的元素

• 示例 ：

  const arr = [1, 2, 3];
   const last = arr.pop(); // 3
   console.log(arr); // [1, 2] (原数
   组已修改)

3. shift()

• 功能 ：移除数组首个元素，返回被移除的元素

• 示例 ：

  const arr = [1, 2, 3];
   const first = arr.shift(); // 1
   console.log(arr); // [2, 3] (原数
   组已修改)

4. unshift()

• 功能 ：在数组开头添加元素，返回新长度

• 示例 ：

  const arr = [1, 2, 3];
   const length = arr.unshift
   (0); // 4
   console.log(arr); // [0, 1, 2, 
   3] (原数组已修改)

5. sort()

• 功能 ：对数组元素排序，返回排序后的数组（原数组已修改）

• 示例 ：

  const arr = [3, 1, 2];
   arr.sort(); // [1, 2, 3]
   console.log(arr); // [1, 2, 3] 
   (原数组已修改)

6. reverse()

• 功能 ：反转数组元素顺序，返回反转后的数组（原数组已修改）

• 示例 ：

  const arr = [1, 2, 3];
   arr.reverse(); // [3, 2, 1]
   console.log(arr); // [3, 2, 1] 
   (原数组已修改)

7. splice()

• 功能 ：添加/删除/替换数组元素，返回被删除的元素组成的数组

• 示例 ：

  const arr = [1, 2, 3, 4];
   const removed = arr.splice(1, 2, 
   5); // [2, 3]
   console.log(arr); // [1, 5, 4] 
   (原数组已修改)

8. fill()

• 功能 ：用指定值填充数组，返回填充后的数组（原数组已修改）

• 示例 ：

  const arr = [1, 2, 3];
   arr.fill(0); // [0, 0, 0]
   console.log(arr); // [0, 0, 0] 
   (原数组已修改)

三、其他方法（不修改原数组）

1. forEach()

• 功能 ：对数组中每个元素执行函数，无返回值

• 示例 ：

  const arr = [1, 2, 3];
   arr.forEach(x => console.log
   (x)); // 输出 1, 2, 3
   console.log(arr); // [1, 2, 3] 
   (原数组不变)

2. some()

• 功能 ：检查是否至少有一个元素符合条件，返回布尔值

• 示例 ：

  const arr = [1, 2, 3];
   const hasEven = arr.some(x => x 
   % 2 === 0); // true
   console.log(arr); // [1, 2, 3] 
   (原数组不变)

3. every()

• 功能 ：检查是否所有元素都符合条件，返回布尔值

• 示例 ：

  const arr = [1, 2, 3];
   const allPositive = arr.every(x 
   => x > 0); // true
   console.log(arr); // [1, 2, 3] 
   (原数组不变)

4. find()

• 功能 ：查找第一个符合条件的元素，返回该元素

• 示例 ：

  const arr = [1, 2, 3];
   const found = arr.find(x => x > 
   1); // 2
   console.log(arr); // [1, 2, 3] 
   (原数组不变)

5. findIndex()

• 功能 ：查找第一个符合条件的元素索引，返回索引值

• 示例 ：

  const arr = [1, 2, 3];
   const index = arr.findIndex(x => 
   x > 1); // 1
   console.log(arr); // [1, 2, 3] 
   (原数组不变)

6. includes()

• 功能 ：检查数组是否包含指定元素，返回布尔值

• 示例 ：

  const arr = [1, 2, 3];
   const hasTwo = arr.includes
   (2); // true
   console.log(arr); // [1, 2, 3] 
   (原数组不变)

7. indexOf() / lastIndexOf()

• 功能 ：查找元素在数组中的索引，返回索引值

• 示例 ：

  const arr = [1, 2, 3, 2];
   const index = arr.indexOf(2); // 
   1
   console.log(arr); // [1, 2, 3, 
   2] (原数组不变)

四、方法分类表

分类 方法 功能 返回新数组 map() 映射每个元素 filter() 筛选元素 concat() 连接数组 slice() 截取数组 flat() 扁平化数组 flatMap() 映射后扁平化 修改原数组 push() 末尾添加元素 pop() 末尾移除元素 shift() 开头移除元素 unshift() 开头添加元素 sort() 排序数组 reverse() 反转数组 splice() 添加/删除/替换元素 fill() 填充数组 其他（无返回数组） forEach() 遍历元素 some() 检查是否有元素符合条件 every() 检查是否所有元素都符合条件 find() 查找元素 findIndex() 查找元素索引 includes() 检查元素是否存在 indexOf() 查找元素索引 lastIndexOf() 从末尾查找元素索引

五、使用建议

• 不可变操作 ：当需要保持原数组不变时，使用返回新数组的方法（如 map 、 filter 、 slice ）

• 性能考虑 ：对于大型数组，频繁创建新数组可能影响性能，可考虑使用修改原数组的方法

• 链式调用 ：返回新数组的方法支持链式调用，提高代码可读性

  const result = arr
     .filter(x => x > 0)
     .map(x => x * 2)
     .sort((a, b) => a - b);

• 函数式编程 ：推荐使用不可变方法，符合函数式编程原则，减少副作用

六、注意事项

• sort() 方法 ：默认按字符串 Unicode 码点排序，对于数字需要提供比较函数

• splice() 方法 ：参数复杂，使用时需注意索引和删除数量的正确性

• reduce() 方法 ：功能强大但相对复杂，需理解累加器的工作原理

• 箭头函数 ：在 forEach 、 map 等方法中使用箭头函数时，需注意 this 指向 通过理解这些方法的特性，可以更有效地使用数组操作，提高代码质量和性能。

总结

到此这篇关于JavaScript数组原型方法分类的文章就介绍到这了,更多相关JS数组原型方法分类内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

• JS array 数组详解
• js数组去重的常用方法总结
• JS实现数组去重方法总结(六种方法)
• js获取数组的最后一个元素
• javascript进行数组追加方法小结