JavaScript数组常用的方法整理

以下或许是一些在实际工作中你或许会使用到的数组方法。

1. splice()

方法名称：splice()
返回值：返回被删除的元素数组
是否改变原数组：是
参数：
- start：开始删除的索引，例如第一个就是0。
- deleteCount：删除元素的数量
- ...items：将要新添加的元素。
描述：splice()方法可以实现增删改。

js 复制代码

let arr1 = ["游小北", "youxiaobei", "JaketYou"];
let res1 = arr1.splice(0, 1, "增加一个元素", "再增加一个元素", '又增加一个元素');
console.log(res1); // ['游小北']，得到删除的元素
console.log(arr1); // ['增加一个元素', '再增加一个元素', '又增加一个元素', 'youxiaobei', 'JaketYou']

2. slice()

方法名称：slice()
返回值：返回截取的元素数组
是否改变原数组：否
参数：
- start：开始位置，例如1就是删除索引为1的元素
- end：结束位置，例如3就删除索引3之前的元素
描述：slice()方法用来截取元素。

js 复制代码

let arr2 = ["游小北", "youxiaobei", "JaketYou"];
let res2 = arr2.slice(1, 3);
console.log(res2); //[ 'youxiaobei', 'JaketYou' ]
console.log(arr2); //[ '游小北', 'youxiaobei', 'JaketYou' ]  // 不改变原数组

3. pop()

方法名称：pop()
返回值：返回被截取的元素
是否改变原数组：是
参数：无
描述：pop()方法截取最后一个元素，并返回被截取的元素。

js 复制代码

let arr3 = ["游小北", "youxiaobei", "JaketYou"];
let res3 = arr3.pop();
console.log(res3); // JaketYou
console.log(arr3); // [ '游小北', 'youxiaobei' ]

4. shift/unshift

方法名称：shift() / unshift()
是否改变原数组：是
描述：shift()方法截取第一个元素，返回被截取的元素，unshift()将新的元素添加到数组开头并返回新数组的长度。

js 复制代码

let arr4 = ["游小北", "youxiaobei", "JaketYou"];
let res4 = arr4.shift();
console.log(res4); // 游小北
console.log(arr4); //[ 'youxiaobei', 'JaketYou' ]
console.log(arr4.unshift('jk')) // 3  // 数组的长度

5. reduce()

方法名称：reduce()
返回值：返回累积计算的结果
是否改变原数组：否
参数：
- callback（函数）：用于执行累积计算的逻辑。回调的参数为pre（上次的值），item（当前项），index，arr（原数组）
- initialValue（初始值，可选）：作为第一次调用回调函数时的第一个参数传入。
描述：reduce()方法遍历数组，按顺序迭代每个元素，返回累积计算的结果。

js 复制代码

let arr5 = [1, 2, 3];

// 第一种情况，加默认值，会多一次循环
const res = arr5.reduce((pre, item, index, arr) => {
    return pre + item;
}, 10);

console.log(res); //16

// 第二种不加默认值，少一次循环
const res5 = arr5.reduce((pre, item, index, arr) => {
    return pre + item;
});

console.log(res5); // 6

6. forEach()

方法名称：forEach()
返回值：无返回值 (undefined)
是否改变原数组：否
参数：
- callback（函数）：用于对每个元素执行的操作。回调的参数为 value（当前项），index，arr（原数组）。
描述：forEach()方法遍历数组，对每个元素执行回调函数中定义的操作，没有返回值。

js 复制代码

let arr6 = [1, 2, 3];

let sum = 0;
arr6.forEach((item, index, arr) => {
  sum = sum + item;
});

console.log(sum); // 6

7. concat()

方法名称：concat()
返回值：连接后的新数组
是否改变原数组：否
参数：要连接到原数组的其他数组或值。
备注：concat()方法将参数中的数组或值连接到原数组的末尾，并返回一个新的数组。

js 复制代码

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];

let newArr = arr1.concat(arr2, arr3);
console.log(newArr); // 输出：[1, 2, 3, 4, 5, 6, 7, 8, 9]

let newArr2 = arr1.concat(4, 5);
console.log(newArr2); // 输出：[1, 2, 3, 4, 5]

8. some()

方法名称：some()
返回值：布尔值
是否改变原数组：否
参数：回调函数，返回一个条件判断。
描述：some()方法对数组中的每个元素调用回调函数，如果有任何元素满足回调函数的条件，则返回 true；否则返回 false。

js 复制代码

let arr8 = [1, 2, 3, 4, 5];
let hasEven = arr8.some((element) => {
    return element % 2 === 0;
});
console.log(hasEven); // 输出：true，因为2是偶数

9. every()

方法名称：every()
返回值：布尔值
是否改变原数组：否
参数：回调函数，返回一个条件判断。
描述：every()方法对数组中的每个元素调用回调函数，如果所有元素都满足回调函数的条件，则返回 true；否则返回 false。

js 复制代码

let arr8 = [1, 2, 3, 4, 5];
let allPositive = arr8.every((element) => {
    return element > 0;
});
console.log(allPositive); // 输出：true，因为所有元素都大于0

10. find()

方法名称：find()
返回值：满足条件的第一个元素值，如果没有找到则返回 undefined。
是否改变原数组：否
参数：回调函数。
备注：find()方法对数组中的每个元素调用回调函数，返回第一个满足回调函数条件的元素。

js 复制代码

let arr10 = [1, 2, 3, 4, 5];
let evenNumber = arr10.find((element) => {
    return element % 2 === 0;
});
console.log(evenNumber); // 输出：2，因为2是数组中的第一个偶数

11. findIndex()

方法名称：findIndex()
返回值：满足条件的第一个元素的索引，如果没有找到则返回 -1。
是否改变原数组：否
参数：回调函数。
备注：findIndex()方法对数组中的每个元素调用回调函数，返回第一个满足回调函数条件的元素的索引。

js 复制代码

let arr10 = [1, 2, 3, 4, 5];
let evenIndex = arr10.findIndex((element) => {
    return element % 2 === 0;
});
console.log(evenIndex); // 输出：1，因为2是数组中的第一个偶数，其索引为1

12. join()

方法名称：join()
返回值：由数组中的每个元素转换为字符串并连接得到的字符串。
是否改变原数组：否
参数：分隔符（可选）。
备注：join()方法会将数组中的每个元素转换为字符串，并用指定的分隔符（默认为逗号）将它们连接起来。

js 复制代码

let arr12 = [1, 2, 3, 4, 5];
let joinedString = arr12.join("-");
console.log(joinedString); // 输出："1-2-3-4-5"

13. toString()

方法名称：toString()
返回值：由数组中的每个元素转换为字符串并连接得到的字符串
是否改变原数组：否
参数：无，意味着传递任何参数都无效
备注：toString()方法会将数组中的每个元素转换为字符串，并用逗号将他们连接起来。

js 复制代码

let arr12 = [1, 2, 3, 4, 5];
let arrayString = arr12.toString();
console.log(arrayString); // 输出："1,2,3,4,5"

14. indexOf()

方法名称：indexOf()
返回值：找到的第一个匹配元素的索引，如果没有找到则返回 -1。
是否改变原数组：否
参数：待搜索的元素，可选的开始搜索的位置。
备注：indexOf()方法从数组的开头（或从指定的位置）向后搜索，返回第一个匹配元素的索引。

js 复制代码

let arr14 = [1, 2, 3, 4, 2, 5, 2];
let firstIndex = arr14.indexOf(2);
console.log(firstIndex); // 输出：1，因为2第一次出现在索引1处

15. lastIndexOf()

方法名称：lastIndexOf()
返回值：找到的最后一个匹配元素的索引，如果没有找到则返回 -1。
是否改变原数组：否
参数：待搜索的元素，可选的开始搜索的位置。
备注：lastIndexOf()方法从数组的末尾（或从指定的位置）向前搜索，返回最后一个匹配元素的索引。

js 复制代码

let arr14 = [1, 2, 3, 4, 2, 5, 2];
let lastIndex = arr14.lastIndexOf(2);
console.log(lastIndex); // 输出：6，因为2最后一次出现在索引6处

16. map()

方法名称：map()
返回值：由原数组每个元素经过处理后的返回值组成的新数组。
是否改变原数组：否
参数：回调函数。
备注：map()方法对数组中的每个元素都执行提供的回调函数，并将回调函数的返回值组成一个新数组返回。

js 复制代码

let arr16 = [1, 2, 3, 4, 5];
let squaredArr = arr16.map(function (element) {
    return element * element;
});

console.log(squaredArr); // 输出：[1, 4, 9, 16, 25]

17. reverse()

方法名称：reverse()
返回值：反转后的数组。
是否改变原数组：是
参数：无
备注：reverse()方法反转数组中元素的顺序。

js 复制代码

let arr17 = [1, 2, 3, 4, 5];
arr17.reverse();
console.log(arr17); // 输出：[5, 4, 3, 2, 1]

18. filter()

方法名称：filter()
返回值：由满足回调函数条件的元素组成的新数组。
是否改变原数组：否
参数：回调函数
备注：filter()方法对数组中的每个元素执行提供的条件判断函数，并返回满足条件的元素组成的新数组。

js 复制代码

let arr18 = [1, 2, 3, 4, 5];
let filteredArr = arr18.filter(function (element) {
    return element > 2;
});
console.log(filteredArr); // 输出：[3, 4, 5]

19. sort()

方法名称：sort()
返回值：排序后的数组。
是否改变原数组：是
参数：排序比较函数（可选）
备注：sort()方法对数组进行原地排序，默认按照 Unicode 排序。可以传入一个比较函数来指定排序规则。

js 复制代码

function compareNumbers(a, b) {
    return b - a;
}
let arr19 = [4, 2, 1, 3, 5];
arr19.sort();
console.log(arr19); // 输出：[1, 2, 3, 4, 5]
arr19.sort(compareNumbers);
console.log(arr19); // 输出：[5, 4, 3, 2, 1]

20. includes()

方法名称：includes()
返回值：布尔值。
是否改变原数组：否
参数：要查找的元素，开始搜索的索引（可选）
备注：includes()方法判断数组是否包含指定的元素，返回布尔值。

js 复制代码

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

// 示例：使用 includes 方法判断数组是否包含元素
let result = arr20.includes(3);
let result1 = arr20.includes(3,2);
let result2 = arr20.includes(3,3);

console.log(result); // 输出：true
console.log(result1); // 输出：true
console.log(result2); // 输出：false

21. array.with(index, value)

方法名称：array.with(index, value)
返回值：修改后的数组。
是否改变原数组：否
参数：将被修改的索引，要分配给指定索引的任何值。
备注：array.with(index, value)是方括号表示法修改指定索引值的复制方法版本。

js 复制代码

const arr21 = [1, 2, 3, 4, 5];
console.log(arr21.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr21); // [1, 2, 3, 4, 5]

22. isArray()

方法名称：isArray()
返回值：布尔值。
是否改变原数组：否
参数：要判断的值
备注：isArray()方法用来判断给定的值是否是数组。

js 复制代码

let arr22 = [1, 2, 3, 4, 5];
console.log(Array.isArray(arr22)); // 输出：true

23. flat()

方法名称：flat()
返回值：新的一维数组
是否改变原数组：否
参数：表示深度；例如数字，1 代表展开的层级为 1，2 也同理。可使用 Infinity 作为参数代表必然展开为 1 维数组
备注：flat()方法将多维数组转化为一维。

js 复制代码

let arr23 = [1, [2, 3], [4, [5]]];
console.log(arr23.flat()) // [1, 2, 3, 4, [5]]
console.log(arr23.flat(2)) // [1, 2, 3, 4, 5]

let arrInfinite = [1, [2, 3], [4, [5,[6]]]];
console.log(arrInfinite.flat(2)) // [1, 2, 3, 4, 5, [6]]
console.log(arrInfinite.flat(Infinity)) // [1, 2, 3, 4, 5, 6]

24. flatMap()

方法名称：flatMap()
返回值：新的一维数组。
是否改变原数组：否
参数：回调函数。
备注：flatMap()方法对数组的每个元素执行指定操作，并将结果展开成一个新数组。

js 复制代码

let arr24 = [1, 2, 3];
let arr24fm = [1, 2, 3, [4]]
let arr24fmNan = [1, 2, 3, [4, 5]]

const res24 = arr24.flatMap(x => [x, x * 2])
const res24fm = arr24fm.flatMap(x => [x, x * 2])
const res24fmNan = arr24fmNan.flatMap(x => [x, x * 2])
console.log(res24) // [1, 2, 2, 4, 3, 6]
console.log(res24fm) // [1, 2, 2, 4, 3, 6, [4], 8]
console.log(res24fmNan) // [1, 2, 2, 4, 3, 6, [4, 5], NaN]

25. keys()

方法名称：keys()
返回值：迭代器对象。
是否改变原数组：否
参数：无
备注：keys()方法返回一个包含数组中每个索引键的迭代器对象。

js 复制代码

let arr25 = ['a', 'b', 'c'];
const iterator25 = arr25.keys(); // 示例：获取数组arr25中每个索引键的迭代器对象
console.log('i', iterator25.next()); // i { value: 0, done: false }
console.log('i', iterator25.next()); // i { value: 1, done: false }
console.log('i', iterator25.next()); // i { value: 2, done: false }
console.log('i', iterator25.next()); // i { value: undefined, done: true } // done 为 true 表示迭代结束

26. values()

方法名称：values()
返回值：迭代器对象。
是否改变原数组：否
参数：无
备注：values()方法返回一个包含数组中每个元素值的迭代器对象。

js 复制代码

let arr26 = ['a', 'b', 'c'];
let iterator26 = arr26.values();

console.log(iterator26.next()); // 输出：{value: 'a', done: false}
console.log(iterator26.next()); // 输出：{value: 'b', done: false}
console.log(iterator26.next()); // 输出：{value: 'c', done: false}
console.log(iterator26.next()); // 输出：{value: undefined, done: true}

27. entries()

方法名称：entries()
返回值：迭代器对象。
是否改变原数组：否
参数：无
备注：entries()方法返回一个包含数组中每个索引键和对应元素值的迭代器对象。

js 复制代码

let arr27 = ['a', 'b', 'c'];
let iterator27 = arr27.entries();

console.log(iterator27.next()); // 输出：{value: [0, 'a'], done: false}
console.log(iterator27.next()); // 输出：{value: [1, 'b'], done: false}
console.log(iterator27.next()); // 输出：{value: [2, 'c'], done: false}
console.log(iterator27.next()); // 输出：{value: undefined, done: true}

28. from()

方法名称：from()
返回值：新的数组。
是否改变原数组：否
参数：类似数组或可迭代的对象, 调用数组每个元素的函数 mapFn, 执行 mapFn 时用作 this 的值。
备注：from()方法通过类似数组或可迭代的对象创建一个新的数组。

js 复制代码

console.log(Array.from('foo'));  // 输出：["f", "o", "o"]
console.log(Array.from([1, 2, 3], (x) => x + x)); // 输出：[2, 4, 6]

29. of()

方法名称：of()
返回值：新的数组。
是否改变原数组：否
参数：传入的参数作为数组的元素。
备注：of()方法根据传入的参数创建一个新的数组。就算没有参数，也会创建一个空数组。

js 复制代码

console.log(Array.of('1', 2, '3')) // ["1", 2, "3"]
console.log(Array.of(0)) // [0]
console.log(Array.of()) // []