EnlightenCode

JavaScript数组方法完全指南 ​

1. 修改数组的方法 ​

1.1 添加/删除元素（会改变原数组） ​

方法描述返回值
push()末尾添加元素新数组长度
pop()删除最后一个元素被删除的元素
unshift()开头添加元素新数组长度
shift()删除第一个元素被删除的元素
splice()删除/添加指定位置元素被删除元素组成的数组

1.2 不改变原数组的方法 ​

方法描述返回值
slice(start, end)提取指定范围的元素新数组
fill()用固定值填充数组新数组

2. 数组转换方法 ​

js
// 数组合并
const newArray = arr1.concat(arr2, arr3);  // 不改变原数组

// 数组转字符串
const str = arr.join(',');  // 不改变原数组

// 字符串转数组
const arr = str.split(',');  // 返回新数组

3. 数组排序方法 ​

js
// 数组反转
arr.reverse();  // 会改变原数组

// 数组排序
arr.sort((a, b) => a - b);  // 升序，会改变原数组
arr.sort((a, b) => b - a);  // 降序，会改变原数组

4. 数组查找方法 ​

js
// 元素查找
arr.indexOf(value);      // 从前往后找，返回索引
arr.lastIndexOf(value);  // 从后往前找，返回索引
arr.includes(value);     // 返回布尔值

// 条件查找
arr.find(item => item > 5);        // 返回第一个满足条件的元素
arr.findIndex(item => item > 5);   // 返回第一个满足条件的元素索引
arr.every(item => item > 0);       // 所有元素都满足条件才返回true
arr.some(item => item > 0);        // 只要有一个元素满足条件就返回true

5. 数组遍历方法 ​

js
// forEach - 无返回值
arr.forEach((item, index) => {
  console.log(item, index);
});

// map - 返回新数组
const newArr = arr.map(item => item * 2);

// filter - 返回满足条件的新数组
const filtered = arr.filter(item => item > 5);

// reduce - 累加器
const sum = arr.reduce((total, item) => total + item, 0);

reduce方法示例 ​

js
// 示例1：统计元素出现次数
function countOccurrences(arr, value) {
  return arr.reduce((count, item) => 
    count + (item === value ? 1 : 0), 0);
}

// 示例2：查找数组最大值
const maxValue = arr.reduce((prev, item) => 
  Math.max(prev, item));

注意事项 ​

  1. 区分会改变原数组的方法和不会改变原数组的方法
  2. slice() 包含开始索引，不包含结束索引
  3. splice() 可以同时实现删除和添加元素
  4. reduce() 方法需要注意初始值的设置