JavaScript 所有操作数组的方法

JavaScript数组的所有方法中常见的包括修改原数组的方法（如push、pop、shift、unshift、splice、sort、reverse）、不修改原数组的方法（如concat、slice、join、map、filter、reduce等）、搜索和检查方法（如indexOf、find、includes、some、every）以及ES6新增的方法（如flat、flatMap、findIndex、fill等）。还有一些较新的方法如at()，以及如何转换类数组对象。

接下来我会通过案例，详细的讲解每个方法的具体用法。

一、修改原数组的方法

1.push()

作用：在数组末尾添加元素。

示例：

const arr = [1, 2];
arr.push(3);        // arr → [1, 2, 3]
console.log(arr.push(4));  // 输出: 4（新长度）

2.pop()

作用：删除数组最后一个元素。

示例：

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

3.shift()

作用：删除数组第一个元素。

示例：

const arr = [1, 2, 3];
arr.shift(); // arr → [2, 3]

4.unshift()

作用：在数组头部添加元素。

示例：

const arr = [2, 3];
arr.unshift(1); // arr → [1, 2, 3]

5.splice()

作用：万能方法，可删除、插入或替换元素。

语法：splice(startIndex, deleteCount, item1, item2, ...)

示例：

const arr = [1, 2, 3, 4];
// 删除并插入
arr.splice(1, 2, 'a', 'b'); 
// arr → [1, 'a', 'b', 4]

6.sort()

作用：排序数组（默认按 Unicode 码点）。

示例：

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

7.reverse()

作用：反转数组顺序。

示例：

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

8.copyWithin()

作用：用于将数组的一部分浅拷贝到数组的同一位置的另一个位置上，并返回修改后的数组。它不会改变数组的长度。

语法：array.copyWithin(target, start[, end])

• target：零基索引，复制序列的目标起始位置。
• start：零基索引，开始复制的起始位置。
• end（可选）：零基索引，停止复制的结束位置（不包含）。默认为数组的长度。

示例：

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

二、不修改原数组的方法

这些方法返回新数组或值，原始数组不变。

1.concat()

作用：合并多个数组或值。

示例：

const arr1 = [1, 2];
const arr2 = arr1.concat(3, [4, 5]); 
// arr2 → [1, 2, 3, 4, 5]

2.slice()

作用：截取数组片段。

语法：slice(startIndex, endIndex)（endIndex 不包含）

示例：

const arr = [1, 2, 3, 4];
const subArr = arr.slice(1, 3); // → [2, 3]

3.join()

作用：将数组元素拼接为字符串。

示例：

const arr = ['a', 'b', 'c'];
console.log(arr.join('-')); // 输出: "a-b-c"

4.map()

作用：创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

示例：

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

5.filter()

作用：过滤满足条件的元素。

示例：

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

6.reduce()

作用：累积计算（从左到右）。

示例（求和）：

const arr = [1, 2, 3];
const sum = arr.reduce((acc, curr) => acc + curr, 0); // → 6

7.flat()

作用：flat()可以将一个多维数组的深度转成一维(扁平化或称作降维)，它有一个选填的参数，代表要转换的深度数字，预设为1(只展开一层放到一维数组里，如果是2，只展开2层放到一位数组里)，如果深度有很多层，可使用Infinity来全部展开成一维数组。

示例：

const arr = [1, [2, [3]]];
console.log(arr.flat(2)); // → [1, 2, 3]（深度为2）

8. flatMap() 

作用：对数组中的每个元素应用给定的回调函数，然后将结果展开一级，返回一个新数组

const arr1 = [1, 2, 1];const result = arr1.flatMap((num) => (num === 2 ? [2, 2] : 1));console.log(result); //  [1, 2, 2, 1]

三、搜索与检查方法

用于查找元素或验证条件。

1.indexOf()

作用：查找元素首次出现的索引（严格相等）。

示例：

const arr = ['a', 'b', 'c'];
console.log(arr.indexOf('b')); // → 1

2.find()

作用：返回第一个满足条件的元素。

示例：

const users = [{id:1}, {id:2}];
const user = users.find(u => u.id === 2); // → {id:2}

3.includes()

作用：检查数组是否包含某元素。

示例：

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

4.some()

作用：检查是否有至少一个元素满足条件。

示例：

const arr = [1, 2, 3];
console.log(arr.some(x => x > 2)); // → true

5.every()

作用：检查是否所有元素都满足条件。

示例：

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

四、其他实用方法

1.fill()

作用：用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为 array.length）内的全部元素。

语法：fill(value, start, end)

示例：

const array1 = [1, 2, 3, 4];console.log(array1.fill(0, 2, 4));   //  → [1, 2, 0, 0]

2.Array.from()

作用：将类数组或可迭代对象转为数组。这个方法非常实用，所以这个方法我会给多个例子方便理解。

语法：Array.from(arrayLike, mapFn, thisArg)

• arrayLike：想要转换成数组的类似数组或可迭代对象。
• mapFn（可选）：如果提供了该参数，则会调用此函数为数组中的每个元素执行一次，并将结果作为新的数组元素。
• thisArg（可选）：执行 mapFn 时使用的 this 值。

例1.转换字符串：

const str = 'hello';
const chars = Array.from(str); // → ['h', 'e', 'l', 'l', 'o']

 例2.将类数组对象转换为数组：

function sumArgs() {let arr = Array.from(arguments);return arr.reduce((acc, curr) => acc + curr, 0);
}
console.log(sumArgs(1, 2, 3)); // 6

 例3.使用 mapFn 参数：

let numbers = [1, 2, 3, 4];
let squares = Array.from(numbers, x => x * x);
console.log(squares); // [1, 4, 9, 16]

3.findIndex() / find() 

作用：返回第一个满足条件的元素的索引或元素的值。

示例：

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

4.at()

作用：支持负数索引访问元素。

示例：

const arr = [10, 20, 30];
console.log(arr.at(-1)); // → 30（等同于 arr[arr.length-1]）

 5.forEach

作用：遍历数组（不触发更新）

示例：

let a = [1,2,3,4,5];let b = 0;a.forEach(item => { b = b + item;});console.log(b); // 15 ( 1+2+3+4+5 )

五、实战案例

场景1：数组去重

const arr = [1, 2, 2, 3];
const unique = [...new Set(arr)]; // → [1, 2, 3]

场景2：深拷贝数组

const original = [1, [2]];
const copy = JSON.parse(JSON.stringify(original));

场景3：合并与扁平化

const arr1 = [1, 2];
const arr2 = [3, [4]];
const merged = arr1.concat(arr2).flat(); // → [1, 2, 3, 4]