JavaScript数组方法大合集

JavaScript数组方法大合集

众所周知，JavaScript拥有非常之多的数组方法，许多人在使用数组方法时不知该如何选择，也有在需要使用时忘记了能非常方便达到所需效果的数组方法，导致要多写许多逻辑代码，还可能会出现记错了数组方法的返回值，导致出现一些莫名其妙的bug。本文为了解决这个问题，详细介绍JavaScript中35种数组方法，帮助各位看官规避以上问题。

一、改变原数组的方法

1.splice(start, deleteCount, item1, item2, ...)

作用： 从数组中添加/删除元素。

参数：

• start：指定删除/插入的起始位置的索引。
• deleteCount：指定删除的元素个数。
• item1, item2, ...：可选参数，要插入的新元素。

返回值： 被删除的元素组成的新数组

示例：

js

const array = [1, 2, 3, 4, 5]; array.splice(2, 2); // 从索引2开始删除2个元素 [3, 4] array.splice(1, 0, 'a', 'b'); // 在索引1处插入 'a' 和 'b'，返回空数组 [] array; // [1, 'a', 'b', 2, 5]

2.reverse()

作用： 用于颠倒数组中元素的顺序。

参数： 无

返回值： 反转后的数组

示例：

js

const array = [1, 2, 3, 4]; array.reverse()// [4,3,2,1]

3.pop()

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

参数： 无

返回值： 被删除的元素值

示例：

js

const array = [1, 2, 3, 4, 5]; const lastElement = array.pop(); console.log(array); // [1, 2, 3, 4] console.log(lastElement); // 5

4.push(item1, item2, ...)

作用： 用于在数组的末尾添加一个或多个元素。

参数：

• item1, item2, ...：要添加到数组末尾的元素。

返回值： 修改后数组的长度

示例：

js

const array = [1, 2, 3, 4]; const newLength = array.push(5, 6); console.log(array); // [1, 2, 3, 4, 5, 6] console.log(newLength); // 6

5.shift()

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

参数： 无

返回值： 被删除的元素的值

示例：

js

const array = [1, 2, 3, 4, 5]; const firstElement = array.shift(); console.log(array); // [2, 3, 4, 5] console.log(firstElement); // 1

6.unshift(item1, item2, ...)

作用： 用于在数组的开头添加一个或多个元素。

参数：

• item1, item2, ...：要添加到数组开头的元素。

返回值： 修改后数组的长度

示例：

js

const array = [1, 2, 3, 4]; const newLength = array.unshift(0, -1); console.log(array); // [0, -1, 1, 2, 3, 4] console.log(newLength); // 6

7.sort(compareFn)

作用： 用于对数组元素进行排序。

参数：

• compareFn：可选参数，用于指定排序规则的自定义比较函数。

返回值： 排序后的数组

示例：

js

const array = [43, 22, 58, 15, 3, 48]; let a = array.sort(); //默认将值视为字符串按升序排序，及比较第一位的大小，第一位相同再比较第二位的大小 console.log(a); // [ 15, 22, 3, 43, 48, 58 ] console.log(array); // [ 15, 22, 3, 43, 48, 58 ] array.sort((a, b) => a - b); //升序排列 console.log(array); //[ 3, 15, 22, 43, 48, 58 ] array.sort((a, b) => b - a); //降序排列 console.log(array); //[ 58, 48, 43, 22, 15, 3 ]

8.fill(value, start, end)

作用： 使用指定的值填充数组的指定区域。

参数：

• value：必需，要填充的值。
• start：可选，填充起始位置的索引，默认为0。
• end：可选，填充结束位置的索引，默认为数组的长度。

返回值： 填充后的数组

示例：

js

const array = [1, 2, 3, 4, 5]; let a = array.fill(0, 1, 4); console.log(a); //[ 1, 0, 0, 0, 5 ] console.log(array); // [1, 0, 0, 0, 5]

9.copyWithin(target, start, end)

作用： 在数组内部，将指定范围的元素复制到数组的指定位置。

参数：

• target：必需，复制到的目标位置的索引。
• start：可选，复制元素的起始位置的索引，默认为0。
• end：可选，复制元素的结束位置的索引，默认为数组的长度。 返回值： 填充后的数组

示例：

js

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

注意： fill方法和copyWithin方法都不会使数组超过原本的长度。

---

以上就是JavaScript中改变原数组的数组方法，这些方法都会修改原始数组，所以使用时需小心，需要保留原始数组时需先拷贝原始数组，避免产生不必要的错误。

二、不改变原数组的方法

10.concat(value1, value2, …, valueN)

作用： 用于合并两个或多个数组，并返回一个新数组。

参数：

• value：可选，要连接的数组或值。

返回值： 合并后的新数组。

示例：

js

const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const result = array1.concat(array2); console.log(result); // [1, 2, 3, 4, 5, 6]

11.filter(callbackFn, thisArg)

作用： 创建一个新数组，其中包含通过由提供的函数实现的测试的所有元素。

参数：

• callbackFn：必需，用来测试每个元素的函数，接受三个参数：element（当前遍历的元素），index（当前元素的索引），array（原数组）。
• thisArg：可选，执行回调函数时使用的this值。

返回值： 由通过测试的元素组成的新数组。

示例：

js

const array = [1, 2, 3, 4, 5]; const evenNumbers = array.filter((element) => element % 2 === 0); console.log(evenNumbers); // [2, 4]

12.find(callbackFn, thisArg)

作用： 返回数组中满足由提供的函数实现的测试的第一个元素的值，若没有满足条件的元素则返回 undefined。

参数：

• callbackFn：必需，用来测试每个元素的函数，接受三个参数：element（当前遍历的元素），index（当前元素的索引），array（原数组）。
• thisArg：可选，执行回调函数时使用的this值。

返回值： 满足条件的第一个元素的值，若没有满足条件的元素则返回 undefined。

示例：

js

const array = [1, 2, 3, 4, 5]; const evenNumber = array.find((element) => element % 2 === 0); console.log(evenNumber); // 2

13.findIndex(callbackFn, thisArg)

作用： 返回数组中满足由提供的函数实现的测试的第一个元素的索引，若没有满足条件的元素则返回 -1。

参数：

• callbackFn：必需，用来测试每个元素的函数，接受三个参数：element（当前遍历的元素），index（当前元素的索引），array（原数组）。
• thisArg：可选，执行回调函数时使用的this值。

返回值： 满足条件的第一个值的索引，若没有满足条件的元素则返回-1。

示例：

js

const array = [1, 2, 3, 4, 5]; const evenNumber = array.findIndex((element) => element % 2 === 0); console.log(evenNumber); // 1

14.indexOf(searchElement, fromIndex)

作用： 返回数组中第一个匹配元素的索引，若未找到则返回 -1。

参数：

• searchElement：必需，要查找的元素。
• fromIndex：可选，从指定索引处开始搜索，默认为 0。

返回值： 第一个匹配元素的索引，若未找到则返回 -1。

示例：

js

const array = [1, 2, 3, 2, 5]; console.log(array.indexOf(2)); // 1 console.log(array.indexOf(2, 2)); // 3 console.log(array.indexOf(6)); // -1

15.lastIndexOf(searchElement, fromIndex)

作用： 返回数组中最后一个匹配元素的索引，若未找到则返回 -1。

参数：

• searchElement：必需，要查找的元素。
• fromIndex：可选，从指定索引处开始搜索，默认为 0。

返回值： 最后一个匹配元素的索引，若未找到则返回 -1。

示例：

js

const array = [1, 2, 3, 2, 5]; console.log(array.lastIndexOf(2)); // 3 console.log(array.lastIndexOf(2, 2)); // 1 console.log(array.lastIndexOf(6)); // -1

16.includes(searchElement, fromIndex)

作用： 判断数组是否包含某个元素，根据情况返回 true 或 false。

参数：

• searchElement：必需，要查找的元素。
• fromIndex：可选，从指定索引处开始搜索，默认为 0。

返回值： 如果数组中包含指定元素，返回 true，否则返回 false。

示例：

js

const array = [1, 2, 3, 4, 5]; console.log(array.includes(3)); // true console.log(array.includes(6)); // false

17.every(callbackFn, thisArg)

作用： 用于测试数组的所有元素是否都通过由提供的函数实现的测试。

参数：

• callbackFn：必需，用来测试每个元素的函数，接受三个参数：element（当前遍历的元素），index（当前元素的索引），array（原数组）。
• thisArg：可选，执行回调函数时使用的this值。

返回值： 如果所有元素都通过测试则返回 true，否则返回 false。

示例：

js

const array = [1, 2, 3, 4, 5]; const isEven = array.every((element) => element % 2 === 0); console.log(isEven); // false

18.some(callbackFn, thisArg)

作用： 测试数组中是否至少有一个元素通过了由提供的函数实现的测试。

参数：

• callbackFn：必需，用来测试每个元素的函数，接受三个参数：element（当前遍历的元素），index（当前元素的索引），array（原数组）。
• thisArg：可选，执行回调函数时使用的this值。

返回值： 如果数组中至少有一个元素通过了测试，则返回 true，否则返回 false。

示例：

js

const array = [1, 2, 3, 4, 5]; const hasEvenNumber = array.some((element) => element % 2 === 0); console.log(hasEvenNumber); // true

19.flat(depth)

作用： 将嵌套数组按指定深度展开成新数组。

参数：

• depth：可选，指定展开的深度，默认为 1。

返回值： 展开后的新数组。

示例：

js

const array = [1, [2, 3], [4, [5, 6]]]; const flattenedArray = array.flat(); console.log(flattenedArray); // [1, 2, 3, 4, [5, 6]]

20.flatMap(callbackFn, thisArg)

作用： 首先使用映射函数映射每个元素，然后将结果展平成一个新数组。

参数：

• callbackFn：必需，用来测试每个元素的函数，接受三个参数：element（当前遍历的元素），index（当前元素的索引），array（原数组）。
• thisArg：可选，执行回调函数时使用的this值。

返回值： 映射展平后的新数组。

示例：

js

const array = [1, 2, 3]; const multipliedArray = array.flatMap((element) => [element * 2]); console.log(multipliedArray); // [2, 4, 6]

21.forEach(callbackFn, thisArg)

作用： 遍历数组的每个元素，并对他们执行提供的函数

参数：

• callbackFn：必需，用来测试每个元素的函数，接受三个参数：element（当前遍历的元素），index（当前元素的索引），array（原数组）。
• thisArg：可选，执行回调函数时使用的this值。

返回值： 无

示例：

js

const array = [1, 2, 3]; array.forEach((element) => console.log(element)); // 输出： // 1 // 2 // 3

22.map(callbackFn, thisArg)

作用： 创建一个新数组，其中包含对原数组中的每个元素调用提供的函数的结果。

参数：

• callbackFn：必需，用来测试每个元素的函数，接受三个参数：element（当前遍历的元素），index（当前元素的索引），array（原数组）。
• thisArg：可选，执行回调函数时使用的this值。

返回值： 由函数的返回值组成的新数组。

示例：

js

const array = [1, 2, 3]; const squaredArray = array.map((element) => element * element); console.log(squaredArray); // [1, 4, 9]

23.from(arrayLike, mapFn, thisArg)

作用： 通过将类数组对象或可迭代对象转换为数组创建一个新数组。

参数：

• arrayLike：必需，类数组对象或可迭代对象。
• mapFn：可选，对每个元素进行映射的函数。
• thisArg：可选，执行回调函数时使用的 this 值。

返回值： 转换后的新数组。

示例：

js

const arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 }; const array = Array.from(arrayLike); console.log(array); // ["a", "b", "c"]

24.isArray(value)

作用： 判断一个值是否为数组。

参数：

• value：必需，要判断的值。

返回值： 如果给定的值是一个数组，返回 true，否则返回 false。

示例：

js

console.log(Array.isArray([1, 2, 3])); // true console.log(Array.isArray("hello")); // false

25.join(separator)

作用： 将数组的所有元素连接成一个字符串。

参数：

• separator：可选，指定分隔符字符串，默认使用逗号 “,”。

返回值： 所有元素连接起来的字符串。

示例：

js

const array = ["Hello", "World"]; const joinedString = array.join(" "); console.log(joinedString); // "Hello World"

26.reduce(reducer, initialValue)

作用： 对数组中的每个元素（从左到右）应用一个函数，将其结果汇总为单个值。

参数：

• reducer：必需，用于数组元素的函数，接受四个参数：accumulator（累加器），element（当前遍历的元素），index（当前元素的索引），array（原数组）。
• initialValue：可选，作为第一次调用 reducer 函数时的第一个参数的值，若未提供则使用数组的第一个元素作为初始值，并从数组的第二个元素开始遍历。

返回值： 汇总后的值。

示例：

js

const array = [1, 2, 3, 4, 5]; const sum = array.reduce((accumulator, element) => accumulator + element,0); console.log(sum); // 15 const mul = array.reduce((accumulator, element) => accumulator * element); console.log(mul); // 120

27.reduceRight(reducer, initialValue)

作用： 对数组中的每个元素（从右到左）应用一个函数，将其结果汇总为单个值。

参数：

• reducer：必需，用于数组元素的函数，接受四个参数：accumulator（累加器），element（当前遍历的元素），index（当前元素的索引），array（原数组）。
• initialValue：可选，作为第一次调用 reducer 函数时的第一个参数的值，若未提供则使用数组的第一个元素作为初始值，并从数组的第二个元素开始遍历。

返回值： 汇总后的值。

示例：

js

const array = [1, 2, 3, 4, 5]; const sum = array.reduceRight((accumulator, element) => accumulator + element,0); console.log(sum); // 15 const mul = array.reduceRight((accumulator, element) => accumulator * element); console.log(mul); // 120

28.slice(start, end)

作用： 返回一个新的数组，包含原数组中从开始索引到结束索引（不包括结束索引）之间的元素。

参数：

• start：可选，指定开始提取元素的索引，默认为 0。如果为负数，则从末尾开始计数。
• end：可选，提取元素的结束索引（不包括该索引），默认为原数组的长度。如果为负数，则从末尾开始计数。

返回值： 一个新的数组，包含提取的元素。

示例：

js

const array = [1, 2, 3, 4, 5]; const slicedArray = array.slice(1, 4); console.log(slicedArray); // [2, 3, 4]

29.toString()

作用： 返回一个表示数组元素的字符串。

参数： 无

返回值： 表示数组的字符串，其中包含每个元素的 toString() 的返回值，以逗号分隔。

示例：

js

const array = [1, 2, 3]; const string = array.toString(); console.log(string); // "1,2,3"

30.toLocaleString()

作用： 返回一个表示数组元素的本地化字符串。

参数： 无

返回值： 一个表示数组的本地化字符串，其中包含每个元素的 toLocaleString() 的返回值，以逗号分隔。

示例：

js

const array = [1, 2, 3]; const localizedString = array.toLocaleString(); console.log(localizedString); // "1, 2, 3"

31.valueOf()

作用： 返回数组对象的原始值，即数组本身。

参数： 无

返回值： 数组对象本身。

示例：

js

const array = [1, 2, 3]; console.log(array.valueOf()); // [1, 2, 3]

32.entries()

作用： 返回一个新的数组迭代器对象，该对象包含数组中每个索引处的键值对。

参数： 无

返回值： 一个新的迭代器对象。

示例：

js

const array = ["a", "b", "c"]; const iterator = array.entries(); console.log(iterator.next().value); // [0, 'a'] console.log(iterator.next().value); // [1, 'b'] console.log(iterator.next().value); // [2, 'c']

33.keys()

作用： 返回一个新的数组迭代器对象，该对象包含数组中每个索引的键。

参数： 无

返回值： 一个新的迭代器对象。

示例：

js

const array = ["a", "b", "c"]; const iterator = array.keys(); console.log(iterator.next().value); // 0 console.log(iterator.next().value); // 1 console.log(iterator.next().value); // 2

34.values()

作用： 返回一个新的数组迭代器对象，该对象包含了数组中每个元素的值。

参数： 无

返回值： 一个新的迭代器对象。

示例：

js

const arr = ['a', 'b', 'c']; const iterator = arr.values(); console.log(iterator.next().value); // 输出 'a' console.log(iterator.next().value); // 输出 'b' console.log(iterator.next().value); // 输出 'c'

35.at(index)

作用： 获取数组中指定索引位置的元素值。

参数：

• index：可选，索引值（可以是负数，表示从数组末尾开始计数），默认为0。

返回值： 指定索引位置的元素值。

示例：

js

const array = [1, 2, 3, 4, 5]; const element = array.at(2); console.log(element); // 3

---

行文至此，以上就是JavaScript全部35种数组方法，希望对各位看官有所帮助。如果您在阅读过程中有任何疑问或想分享您的见解，请在评论区提出。相信互相交流和分享可以带来更好的学习效果。同时，如果您发现本文中有任何错误或遗漏之处，请务必指正，让我们一起共同学习和进步！