JavaScript 数组方法和属性详解

数组属性

length

返回数组中元素的个数
可设置，用于截断或扩展数组

const arr = [1, 2, 3];
console.log(arr.length); // 3
arr.length = 2;
console.log(arr); // [1, 2]

数组方法

修改原数组的方法

1. push()

在数组末尾添加一个或多个元素
返回新数组的长度

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

2. pop()

删除并返回数组的最后一个元素
空数组返回 undefined

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

3. unshift()

在数组开头添加一个或多个元素
返回新数组的长度

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

4. shift()

删除并返回数组的第一个元素
空数组返回 undefined

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

5. splice()

添加/删除数组元素
返回被删除的元素数组

const arr = [1, 2, 3, 4, 5];
// 从索引2开始删除1个元素
const removed = arr.splice(2, 1);
console.log(arr); // [1, 2, 4, 5]
console.log(removed); // [3]

// 从索引1开始删除0个元素，添加'a','b'
arr.splice(1, 0, 'a', 'b');
console.log(arr); // [1, 'a', 'b', 2, 4, 5]

6. reverse()

反转数组元素的顺序
返回反转后的数组

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

7. sort()

对数组元素进行排序
默认按字符串Unicode码点排序

const arr = [3, 1, 4, 1, 5];
arr.sort();
console.log(arr); // [1, 1, 3, 4, 5]

// 自定义排序
const nums = [10, 5, 40, 25];
nums.sort((a, b) => a - b); // 升序
console.log(nums); // [5, 10, 25, 40]

8. fill()

用固定值填充数组中指定范围的元素

const arr = new Array(5).fill(0);
console.log(arr); // [0, 0, 0, 0, 0]

const arr2 = [1, 2, 3, 4];
arr2.fill('a', 1, 3);
console.log(arr2); // [1, 'a', 'a', 4]

9. copyWithin()

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

const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3);
console.log(arr); // [4, 5, 3, 4, 5]

不修改原数组的方法

10. concat()

合并两个或多个数组
返回新数组

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = arr1.concat(arr2, [5, 6]);
console.log(arr3); // [1, 2, 3, 4, 5, 6]

11. slice()

返回数组的浅拷贝部分
参数：start[, end]

const arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 3)); // [2, 3]
console.log(arr.slice(2)); // [3, 4, 5]
console.log(arr.slice(-2)); // [4, 5]

12. join()

将数组所有元素连接成字符串
默认用逗号分隔

const arr = ['Hello', 'World'];
console.log(arr.join()); // "Hello,World"
console.log(arr.join(' ')); // "Hello World"
console.log(arr.join('-')); // "Hello-World"

13. toString()

返回数组的字符串表示

const arr = [1, 2, 3];
console.log(arr.toString()); // "1,2,3"

14. toLocaleString()

返回本地化字符串表示

const arr = [1000, new Date()];
console.log(arr.toLocaleString()); // "1,000,2023/12/7 10:30:00"

迭代方法

15. forEach()

对每个数组元素执行函数
不返回新数组

const arr = [1, 2, 3];
arr.forEach((item, index, array) => {
console.log(arr[${index}] = ${item});
});
// arr[0] = 1
// arr[1] = 2
// arr[2] = 3

16. map()

对每个元素执行函数，返回新数组

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

17. filter()

返回通过测试的元素组成的新数组

const arr = [1, 2, 3, 4, 5];
const even = arr.filter(x => x % 2 === 0);
console.log(even); // [2, 4]

18. reduce()

从左到右对每个元素执行reducer函数
返回单个累积值

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

// 求最大值
const max = arr.reduce((a, b) => Math.max(a, b));
console.log(max); // 4

19. reduceRight()

从右到左执行reducer函数

const arr = ['a', 'b', 'c'];
const result = arr.reduceRight((acc, curr) => acc + curr);
console.log(result); // "cba"

20. find()

返回第一个满足测试函数的元素
未找到返回 undefined

const arr = [5, 12, 8, 130, 44];
const found = arr.find(x => x > 10);
console.log(found); // 12

21. findIndex()

返回第一个满足测试函数的元素索引
未找到返回 -1

const arr = [5, 12, 8, 130, 44];
const index = arr.findIndex(x => x > 10);
console.log(index); // 1

22. findLast() & findLastIndex() (ES2023)

从数组末尾开始查找

const arr = [5, 12, 8, 130, 44];
const last = arr.findLast(x => x > 10);
console.log(last); // 44

const lastIndex = arr.findLastIndex(x => x > 10);
console.log(lastIndex); // 4

23. some()

测试是否至少有一个元素通过测试
返回布尔值

const arr = [1, 2, 3, 4, 5];
const hasEven = arr.some(x => x % 2 === 0);
console.log(hasEven); // true

24. every()

测试是否所有元素都通过测试
返回布尔值

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

搜索方法

25. indexOf()

返回指定元素的第一个索引
未找到返回 -1

const arr = ['apple', 'banana', 'orange', 'banana'];
console.log(arr.indexOf('banana')); // 1
console.log(arr.indexOf('grape')); // -1

26. lastIndexOf()

返回指定元素的最后一个索引

const arr = ['apple', 'banana', 'orange', 'banana'];
console.log(arr.lastIndexOf('banana')); // 3

27. includes()

判断数组是否包含某个元素
返回布尔值

const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

静态方法

28. Array.isArray()

判断值是否为数组

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray({})); // false
console.log(Array.isArray('hello')); // false

29. Array.from()

从类数组或可迭代对象创建新数组

console.log(Array.from('hello')); // ['h', 'e', 'l', 'l', 'o']
console.log(Array.from([1, 2, 3], x => x * 2)); // [2, 4, 6]

30. Array.of()

创建具有可变数量参数的新数组

console.log(Array.of(1, 2, 3)); // [1, 2, 3]
console.log(Array.of(5)); // [5] (与 new Array(5) 不同)

数组遍历方式比较

方法	返回值	是否修改原数组	用途
forEach()	undefined	否	单纯遍历
map()	新数组	否	转换每个元素
filter()	新数组	否	过滤元素
reduce()	累积值	否	累积计算
for...of	-	否	遍历值
for...in	-	否	遍历索引(不推荐)

实用示例

数组去重

复制代码

const arr = [1, 2, 2, 3, 4, 4, 5];
const unique = [...new Set(arr)];
// 或
const unique2 = arr.filter((item, index) => arr.indexOf(item) === index);

数组扁平化

复制代码

const arr = [1, [2, [3, [4]]]];
const flat = arr.flat(Infinity);
// 或使用递归
function flatten(arr) {
    return arr.reduce((acc, val) => 
        Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []);
}

数组分组

复制代码

const groupBy = (arr, key) => {
    return arr.reduce((acc, obj) => {
        const group = obj[key];
        acc[group] = acc[group] || [];
        acc[group].push(obj);
        return acc;
    }, {});
};

性能注意事项

push/pop 比 unshift/shift 快（O(1) vs O(n)）
for循环 通常比 forEach 快
避免在循环中修改数组长度
对于大型数组，考虑使用 TypedArray

这个文档涵盖了 JavaScript 数组的主要方法和属性，可以作为日常开发的参考手册。