JavaScript 数组方法速查表

该页面提供了JavaScript数组方法的详细指南,包括数组的常用操作、ES6新特性、性能优化等内容。

数组创建

JavaScript 提供了多种方式来创建数组:

使用数组字面量

let arr = [1, 2, 3];

使用构造函数

let arr = new Array(1, 2, 3);

使用 Array.of 方法

let arr = Array.of(1, 2, 3);

使用 Array.from 方法

let arr = Array.from('123'); // ['1', '2', '3']

数组操作

数组提供了丰富的方法用于数据的增删改查:

添加元素

  • push:向数组末尾添加一个或多个元素
  • unshift:向数组开头添加一个或多个元素

删除元素

  • pop:删除数组末尾的一个元素
  • shift:删除数组开头的一个元素
  • splice:根据索引删除任意个数的元素

查找元素

  • indexOf:查找元素在数组中的索引
  • includes:判断数组是否包含某个元素

遍历数组

  • forEach:对数组的每个元素执行一次回调函数
  • map:创建一个新数组,数组中的元素为原始数组元素调用函数处理后的值
  • filter:创建一个新数组,包含所有通过测试的元素

数组转换

  • join:将数组的所有元素转换为一个字符串
  • slice:返回数组的一个片段
  • concat:合并两个或多个数组

ES6 新特性

ES6 对数组操作做了许多增强:

扩展运算符

let arr = [1, 2, 3];
let arr2 = [...arr, 4, 5]; // [1, 2, 3, 4, 5]

Array.prototype.find

let result = arr.find(item => item > 2); // 3

Array.prototype.findIndex

let index = arr.findIndex(item => item > 2); // 2

Array.prototype.fill

arr.fill(0); // [0, 0, 0]

Array.prototype.includes

arr.includes(2); // true

性能优化

在处理大型数组时,性能优化尤为重要:

  • 尽量使用原生方法,如 mapfilter,它们通常是用 C++ 实现的,比 JavaScript 循环快。
  • 对于频繁操作的数组,考虑使用 Typed Arrays
  • 避免在循环中进行 DOM 操作,应该将需要操作的 DOM 节点收集起来,最后一起操作。

结语

通过本指南的学习,相信你对 JavaScript 数组的操作有了更深入的了解。有关更多信息,请参考 MDN Web Docs