JavaScript 数组方法全面总结及相似方法比较

​

JavaScript 提供了丰富的数组操作方法，包括增删改查、遍历、过滤、归并等。下面我将详细介绍这些方法，包括它们的返回值、使用差异以及示例。

一、数组添加/删除方法

1. push() - 末尾添加

• 作用：向数组末尾添加一个或多个元素
• 返回值：新数组的长度
• 是否改变原数组：是

let arr = [1, 2];
let length = arr.push(3, 4); // 返回4
console.log(arr); // [1, 2, 3, 4]

2. pop() - 末尾删除

• 作用：删除数组最后一个元素
• 返回值：被删除的元素
• 是否改变原数组：是

let arr = [1, 2, 3];
let last = arr.pop(); // 返回3
console.log(arr); // [1, 2]

3. unshift() - 开头添加

• 作用：向数组开头添加一个或多个元素
• 返回值：新数组的长度
• 是否改变原数组：是

let arr = [2, 3];
let length = arr.unshift(0, 1); // 返回4
console.log(arr); // [0, 1, 2, 3]

4. shift() - 开头删除

• 作用：删除数组第一个元素
• 返回值：被删除的元素
• 是否改变原数组：是

let arr = [1, 2, 3];
let first = arr.shift(); // 返回1
console.log(arr); // [2, 3]

5. splice() - 任意位置增删

• 作用：在指定位置添加/删除元素
• 返回值：由被删除元素组成的数组
• 是否改变原数组：是

let arr = [1, 2, 3, 4];
// 从索引1开始删除2个元素，然后添加'a','b'
let deleted = arr.splice(1, 2, 'a', 'b'); 
console.log(deleted); // [2, 3]
console.log(arr); // [1, 'a', 'b', 4]

二、数组遍历方法

1. forEach()

• 作用：对数组每个元素执行回调函数
• 返回值：undefined
• 是否改变原数组：取决于回调函数

let arr = [1, 2, 3];
arr.forEach((item, index) => {
  console.log(index, item);
});
// 输出:
// 0 1
// 1 2
// 2 3

2. map()

• 作用：对数组每个元素执行回调，返回新数组
• 返回值：新数组
• 是否改变原数组：否

let arr = [1, 2, 3];
let doubled = arr.map(item => item * 2);
console.log(doubled); // [2, 4, 6]

3. for...of

• 作用：遍历数组元素
• 返回值：无

let arr = [1, 2, 3];
for (let item of arr) {
  console.log(item);
}

三、数组查找方法

1. find()

• 作用：返回第一个满足条件的元素
• 返回值：找到的元素或undefined
• 是否改变原数组：否

let arr = [1, 2, 3, 4];
let found = arr.find(item => item > 2);
console.log(found); // 3

2. findIndex()

• 作用：返回第一个满足条件的元素的索引
• 返回值：找到的索引或-1
• 是否改变原数组：否

let arr = [1, 2, 3, 4];
let index = arr.findIndex(item => item > 2);
console.log(index); // 2

3. indexOf()

• 作用：返回指定元素的第一个索引
• 返回值：找到的索引或-1
• 是否改变原数组：否

let arr = [1, 2, 3, 2];
let index = arr.indexOf(2);
console.log(index); // 1

4. lastIndexOf()

• 作用：返回指定元素的最后一个索引
• 返回值：找到的索引或-1
• 是否改变原数组：否

let arr = [1, 2, 3, 2];
let index = arr.lastIndexOf(2);
console.log(index); // 3

5. includes()

• 作用：判断数组是否包含某元素
• 返回值：布尔值
• 是否改变原数组：否

let arr = [1, 2, 3];
let hasTwo = arr.includes(2);
console.log(hasTwo); // true

四、数组过滤方法

1. filter()

• 作用：返回满足条件的所有元素组成的新数组
• 返回值：新数组
• 是否改变原数组：否

let arr = [1, 2, 3, 4];
let filtered = arr.filter(item => item % 2 === 0);
console.log(filtered); // [2, 4]

2. some()

• 作用：判断是否有至少一个元素满足条件
• 返回值：布尔值
• 是否改变原数组：否

let arr = [1, 2, 3];
let hasEven = arr.some(item => item % 2 === 0);
console.log(hasEven); // true

3. every()

• 作用：判断是否所有元素都满足条件
• 返回值：布尔值
• 是否改变原数组：否

let arr = [2, 4, 6];
let allEven = arr.every(item => item % 2 === 0);
console.log(allEven); // true

五、数组归并方法

1. reduce()

• 作用：从左到右对数组元素执行归并操作
• 返回值：归并结果
• 是否改变原数组：否

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 10

2. reduceRight()

• 作用：从右到左对数组元素执行归并操作
• 返回值：归并结果
• 是否改变原数组：否

let arr = ['a', 'b', 'c'];
let combined = arr.reduceRight((acc, cur) => acc + cur);
console.log(combined); // 'cba'

六、其他常用方法

1. concat()

• 作用：合并数组
• 返回值：新数组
• 是否改变原数组：否

let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4]

2. slice()

• 作用：截取数组部分元素
• 返回值：新数组
• 是否改变原数组：否

let arr = [1, 2, 3, 4];
let part = arr.slice(1, 3);
console.log(part); // [2, 3]

3. join()

• 作用：将数组元素连接成字符串
• 返回值：字符串
• 是否改变原数组：否

let arr = [1, 2, 3];
let str = arr.join('-');
console.log(str); // "1-2-3"

4. reverse()

• 作用：反转数组
• 返回值：反转后的数组
• 是否改变原数组：是

let arr = [1, 2, 3];
let reversed = arr.reverse();
console.log(arr); // [3, 2, 1]
console.log(reversed); // [3, 2, 1]

5. sort()

• 作用：数组排序
• 返回值：排序后的数组
• 是否改变原数组：是

let arr = [3, 1, 4, 2];
let sorted = arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 3, 4]
console.log(sorted); // [1, 2, 3, 4]

七、相似方法比较

1. forEach vs map

• 相同点：都遍历数组

• 不同点：

  • forEach 不返回新数组，仅用于执行操作
  • map 返回新数组，用于转换元素

2. find vs filter

• 相同点：都用于查找元素

• 不同点：

  • find 返回第一个匹配元素
  • filter 返回所有匹配元素组成的数组

3. some vs every

• 相同点：都返回布尔值

• 不同点：

  • some 只要有一个满足就返回true
  • every 必须所有都满足才返回true

4. reduce vs reduceRight

• 相同点：都用于归并数组

• 不同点：

  • reduce 从左到右处理
  • reduceRight 从右到左处理

5. slice vs splice

• 相同点：都用于获取数组的一部分

• 不同点：

  • slice 不改变原数组，返回新数组
  • splice 改变原数组，返回被删除的元素

八、ES6+新增方法

1. flat()

• 作用：扁平化嵌套数组
• 返回值：新数组
• 是否改变原数组：否

let arr = [1, [2, [3]]];
let flatArr = arr.flat(2);
console.log(flatArr); // [1, 2, 3]

2. flatMap()

• 作用：先map再flat(1)
• 返回值：新数组
• 是否改变原数组：否

let arr = [1, 2, 3];
let result = arr.flatMap(x => [x, x * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6]

3. Array.from()

• 作用：将类数组或可迭代对象转为数组
• 返回值：新数组

let str = 'hello';
let arr = Array.from(str);
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

4. Array.of()

• 作用：创建包含任意数量参数的新数组
• 返回值：新数组

let arr = Array.of(1, 2, 3);
console.log(arr); // [1, 2, 3]

总结

JavaScript 数组方法非常丰富，选择合适的方法可以大大提高开发效率。关键要理解：

1. 方法是否会改变原数组
2. 方法的返回值是什么
3. 相似方法之间的区别

掌握这些方法后，可以更高效地处理数组数据。

​