1. 基本分类

修改原数组的方法(变异方法)

不修改原数组的方法(非变异方法)

遍历方法

其他方法


2. 详细方法列表

修改原数组的方法

// 1. push() - 末尾添加元素
let arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
console.log(arr.push(5, 6)); // 返回新长度 6

// 2. pop() - 末尾删除元素
let last = arr.pop(); // 返回删除的元素 6
console.log(arr); // [1, 2, 3, 4, 5]

// 3. unshift() - 开头添加元素
arr.unshift(0); // [0, 1, 2, 3, 4, 5]

// 4. shift() - 开头删除元素
let first = arr.shift(); // 返回 0
console.log(arr); // [1, 2, 3, 4, 5]

// 5. splice() - 添加/删除元素
let arr2 = [1, 2, 3, 4, 5];
arr2.splice(2, 1); // 从索引2开始删除1个元素 → [1, 2, 4, 5]
arr2.splice(2, 0, 3); // 从索引2开始删除0个,添加3 → [1, 2, 3, 4, 5]
arr2.splice(2, 1, 'a', 'b'); // 删除索引2的1个元素,添加'a','b' → [1, 2, 'a', 'b', 4, 5]

// 6. reverse() - 反转数组
let arr3 = [1, 2, 3];
arr3.reverse(); // [3, 2, 1]

// 7. sort() - 排序
let arr4 = [3, 1, 2];
arr4.sort(); // [1, 2, 3]
arr4.sort((a, b) => b - a); // 降序 [3, 2, 1]

// 8. fill() - 填充数组
let arr5 = new Array(3).fill(0); // [0, 0, 0]
arr5.fill(1, 1, 3); // [0, 1, 1]

不修改原数组的方法

// 1. concat() - 合并数组
let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2); // [1, 2, 3, 4]

// 2. slice() - 切片
let arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 3)); // [2, 3] (索引1到3,不包括3)
console.log(arr.slice(2)); // [3, 4, 5] (从索引2到最后)
console.log(arr.slice(-2)); // [4, 5] (最后两个)

// 3. join() - 数组转字符串
let arr3 = ['Hello', 'World'];
console.log(arr3.join(' ')); // "Hello World"
console.log(arr3.join()); // "Hello,World"

// 4. toString() - 转字符串
console.log([1, 2, 3].toString()); // "1,2,3"

// 5. toLocaleString() - 本地化字符串
let dateArr = [new Date()];
console.log(dateArr.toLocaleString());

遍历方法

let numbers = [1, 2, 3, 4, 5];

// 1. forEach() - 遍历
numbers.forEach((item, index, array) => {
    console.log(`索引 ${index}: ${item}`);
});

// 2. map() - 映射新数组
let doubled = numbers.map(x => x * 2); // [2, 4, 6, 8, 10]

// 3. filter() - 过滤
let even = numbers.filter(x => x % 2 === 0); // [2, 4]

// 4. reduce() - 累积
let sum = numbers.reduce((acc, curr) => acc + curr, 0); // 15

// 5. reduceRight() - 从右累积
let strArr = ['H', 'e', 'l', 'l', 'o'];
let reversedStr = strArr.reduceRight((acc, curr) => acc + curr, ''); // "olleH"

// 6. find() - 查找元素
let found = numbers.find(x => x > 3); // 4

// 7. findIndex() - 查找索引
let index = numbers.findIndex(x => x > 3); // 3

// 8. findLast() & findLastIndex() - 从后查找 (ES2023)
let lastEven = numbers.findLast(x => x % 2 === 0); // 4
let lastEvenIndex = numbers.findLastIndex(x => x % 2 === 0); // 3

// 9. some() - 是否有满足条件的
let hasEven = numbers.some(x => x % 2 === 0); // true

// 10. every() - 是否所有都满足条件
let allPositive = numbers.every(x => x > 0); // true

搜索和判断方法

let arr = [1, 2, 3, 2, 1];

// 1. indexOf() - 查找元素索引
console.log(arr.indexOf(2)); // 1
console.log(arr.indexOf(5)); // -1

// 2. lastIndexOf() - 从后查找
console.log(arr.lastIndexOf(2)); // 3

// 3. includes() - 是否包含
console.log(arr.includes(3)); // true
console.log(arr.includes(5)); // false

// 4. Array.isArray() - 判断是否为数组
console.log(Array.isArray(arr)); // true
console.log(Array.isArray({})); // false

迭代器方法

let arr = ['a', 'b', 'c'];

// 1. keys() - 键的迭代器
for (let key of arr.keys()) {
    console.log(key); // 0, 1, 2
}

// 2. values() - 值的迭代器
for (let value of arr.values()) {
    console.log(value); // 'a', 'b', 'c'
}

// 3. entries() - 键值对的迭代器
for (let [index, value] of arr.entries()) {
    console.log(index, value); // 0 'a', 1 'b', 2 'c'
}

ES6+ 新增方法

// 1. from() - 类数组转数组
let arrayLike = {0: 'a', 1: 'b', length: 2};
let realArray = Array.from(arrayLike); // ['a', 'b']
let squares = Array.from([1, 2, 3], x => x * x); // [1, 4, 9]

// 2. of() - 创建数组
let arr1 = Array.of(1, 2, 3); // [1, 2, 3]
let arr2 = Array.of(5); // [5] (与 new Array(5) 不同)

// 3. copyWithin() - 内部复制
let arr3 = [1, 2, 3, 4, 5];
arr3.copyWithin(0, 3); // [4, 5, 3, 4, 5]

// 4. flat() - 数组扁平化
let nested = [1, [2, [3, [4]]]];
console.log(nested.flat()); // [1, 2, [3, [4]]]
console.log(nested.flat(2)); // [1, 2, 3, [4]]
console.log(nested.flat(Infinity)); // [1, 2, 3, 4]

// 5. flatMap() - 映射后扁平化
let arr4 = [1, 2, 3];
let result = arr4.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

// 6. at() - 支持负索引的访问
let arr5 = [1, 2, 3];
console.log(arr5.at(-1)); // 3 (相当于 arr5[arr5.length - 1])

3. 实用示例

// 数组去重
let duplicates = [1, 2, 2, 3, 4, 4, 5];
let unique = [...new Set(duplicates)]; // [1, 2, 3, 4, 5]
// 或者
let unique2 = duplicates.filter((item, index) => duplicates.indexOf(item) === index);

// 数组分割成 chunks
function chunkArray(array, size) {
    const chunks = [];
    for (let i = 0; i < array.length; i += size) {
        chunks.push(array.slice(i, i + size));
    }
    return chunks;
}
console.log(chunkArray([1, 2, 3, 4, 5], 2)); // [[1,2], [3,4], [5]]

// 数组交集、并集、差集
let a = [1, 2, 3];
let b = [2, 3, 4];

let intersection = a.filter(x => b.includes(x)); // [2, 3]
let union = [...new Set([...a, ...b])]; // [1, 2, 3, 4]
let difference = a.filter(x => !b.includes(x)); // [1]

4. 方法速查表

方法 修改原数组 返回值 描述
push() 新长度 末尾添加
pop() 删除的元素 末尾删除
unshift() 新长度 开头添加
shift() 删除的元素 开头删除
splice() 删除的元素数组 添加/删除
reverse() 反转后的数组 反转
sort() 排序后的数组 排序
fill() 填充后的数组 填充
concat() 新数组 合并
slice() 新数组 切片
join() 字符串 转字符串
map() 新数组 映射
filter() 新数组 过滤
reduce() 累积值 累积
find() 元素或undefined 查找元素
findIndex() 索引或-1 查找索引
some() boolean 是否有满足条件的
every() boolean 是否所有都满足
includes() boolean 是否包含
indexOf() 索引或-1 查找索引

这个总结涵盖了 JavaScript 数组的主要方法,可以根据具体需求选择合适的方法使用。

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐