当前位置：首页 > news >正文

JavaScript 数组方法大全

news 2025/11/10 7:41:57

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	查找索引