JavaScript 数组操作大全-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn_HPL/article/details/148916638

JavaScript 提供了丰富的数组操作方法，可以分为以下几类：

创建数组

// 字面量方式
const arr1 = [1, 2, 3];

// 构造函数方式
const arr2 = new Array(1, 2, 3);

// 创建指定长度的空数组
const arr3 = new Array(5); // 创建长度为5的空数组

// Array.of() - 解决构造函数参数歧义问题
const arr4 = Array.of(5); // [5], 而不是长度为5的空数组

// Array.from() - 从类数组或可迭代对象创建数组
const arr5 = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
const arr6 = Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4]

访问和修改元素

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

// 访问元素
arr[0]; // 'a'

// 修改元素
arr[1] = 'B'; // ['a', 'B', 'c']

// 获取数组长度
arr.length; // 3

// 设置数组长度（会截断或扩展数组）
arr.length = 2; // ['a', 'B']
arr.length = 5; // ['a', 'B', empty × 3]

添加/删除元素

let arr = [1, 2, 3];

// 末尾添加
arr.push(4); // [1, 2, 3, 4], 返回新长度 4

// 末尾删除
arr.pop(); // [1, 2, 3], 返回删除的元素 4

// 开头添加
arr.unshift(0); // [0, 1, 2, 3], 返回新长度 4

// 开头删除
arr.shift(); // [1, 2, 3], 返回删除的元素 0

// 任意位置添加/删除
arr.splice(1, 1, 'a', 'b'); // 从索引1开始删除1个元素，然后添加'a','b'
// 结果: [1, 'a', 'b', 3], 返回被删除的元素数组 [2]

数组遍历

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

// for循环
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// for...of循环
for (const item of arr) {
  console.log(item);
}

// forEach方法
arr.forEach((item, index, array) => {
  console.log(item, index);
});

// map方法 - 创建新数组
const newArr = arr.map(item => item.toUpperCase()); // ['A', 'B', 'C']

// filter方法 - 过滤数组
const filtered = arr.filter(item => item !== 'b'); // ['a', 'c']

// reduce方法 - 累积计算
const sum = [1, 2, 3].reduce((acc, cur) => acc + cur, 0); // 6

// reduceRight - 从右向左reduce
const concatRight = ['a', 'b', 'c'].reduceRight((acc, cur) => acc + cur); // 'cba'

查找和判断

const arr = [1, 2, 3, 4, 5];

// indexOf - 查找元素索引
arr.indexOf(3); // 2
arr.indexOf(6); // -1 (未找到)

// lastIndexOf - 从后向前查找
[1, 2, 3, 2].lastIndexOf(2); // 3

// includes - 是否包含元素
arr.includes(3); // true

// find - 查找第一个符合条件的元素
arr.find(item => item > 3); // 4

// findIndex - 查找第一个符合条件的元素索引
arr.findIndex(item => item > 3); // 3

// some - 是否有元素符合条件
arr.some(item => item > 4); // true

// every - 是否所有元素都符合条件
arr.every(item => item > 0); // true

排序和反转

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

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

// reverse - 反转数组
arr.reverse(); // [1, 2, 3, 4]

合并和拆分

const arr1 = [1, 2];
const arr2 = [3, 4];

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

// 扩展运算符合并
const combined2 = [...arr1, ...arr2]; // [1, 2, 3, 4]

// join - 数组转字符串
arr1.join('-'); // "1-2"

// split - 字符串转数组 (字符串方法)
"1-2".split('-'); // ['1', '2']

切片和复制

const arr = [1, 2, 3, 4, 5];

// slice - 切片
arr.slice(1, 3); // [2, 3] (原数组不变)

// 浅拷贝数组
const copy1 = arr.slice();
const copy2 = [...arr];
const copy3 = Array.from(arr);

// 深拷贝数组 (对于嵌套数组或对象)
const deepCopy = JSON.parse(JSON.stringify(arr));

其他实用方法

// fill - 填充数组
new Array(3).fill(0); // [0, 0, 0]
[1, 2, 3].fill('a', 1, 2); // [1, 'a', 3] (填充'a'从索引1到2)

// flat - 扁平化数组
[1, [2, [3]]].flat(); // [1, 2, [3]]
[1, [2, [3]]].flat(2); // [1, 2, 3]
[1, [2, [3]]].flat(Infinity); // [1, 2, 3]

// flatMap - 先map后flat
[1, 2, 3].flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

// entries/keys/values - 获取迭代器
for (const [index, value] of ['a', 'b'].entries()) {
  console.log(index, value);
}

// isArray - 判断是否为数组
Array.isArray([]); // true
Array.isArray({}); // false

ES6+ 新增方法

// findLast/findLastIndex (ES2023)
[1, 2, 3, 2].findLast(x => x === 2); // 2 (最后一个2)
[1, 2, 3, 2].findLastIndex(x => x === 2); // 3

// toReversed/toSorted/toSpliced (ES2023) - 不改变原数组的版本
const arr = [3, 1, 2];
arr.toSorted(); // [1, 2, 3], arr仍然是[3, 1, 2]

// with (ES2023) - 不改变原数组的修改
const arr2 = [1, 2, 3];
arr2.with(1, 4); // [1, 4, 3], arr2仍然是[1, 2, 3]