JavaScript数组方法大合集

笨笨的地球人
220 阅读14分钟

JavaScript数组方法大合集

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

一、改变原数组的方法

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

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

参数：

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

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

示例：

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()

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

参数： 无

返回值： 反转后的数组

示例：

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

3.pop()

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

参数： 无

返回值： 被删除的元素值

示例：

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, ...：要添加到数组末尾的元素。

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

示例：

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()

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

参数： 无

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

示例：

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, ...：要添加到数组开头的元素。

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

示例：

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：可选参数，用于指定排序规则的自定义比较函数。

返回值： 排序后的数组

示例：

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：可选，填充结束位置的索引，默认为数组的长度。

返回值： 填充后的数组

示例：

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：可选，复制元素的结束位置的索引，默认为数组的长度。 返回值： 填充后的数组

示例：

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：可选，要连接的数组或值。

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

示例：

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值。

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

示例：

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。

示例：

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。

示例：

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

14.findLast(callbackFn, thisArg)

作用： 返回数组中满足由提供的函数实现的测试的最后一个元素，若没有满足条件的元素则返回 undefined。（反向迭代）

参数：

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

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

示例：

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

15.findLastIndex(callbackFn, thisArg)

作用： 返回数组中满足由提供的函数实现的测试的最后一个元素的索引，若没有满足条件的元素则返回 -1。（反向迭代）

参数：

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

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

示例：

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

16.indexOf(searchElement, fromIndex)

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

参数：

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

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

示例：

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

17.lastIndexOf(searchElement, fromIndex)

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

参数：

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

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

示例：

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

18.includes(searchElement, fromIndex)

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

参数：

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

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

示例：

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

19.every(callbackFn, thisArg)

作用： 用于测试数组的所有元素是否都通过由提供的函数实现的测试。当遍历到一个元素不通过时，会立即停止遍历，并返回false。

参数：

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

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

示例：

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

20.some(callbackFn, thisArg)

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

参数：

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

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

示例：

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

21.flat(depth)

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

参数：

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

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

示例：

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

22.flatMap(callbackFn, thisArg)

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

参数：

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

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

示例：

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

23.forEach(callbackFn, thisArg)

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

参数：

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

返回值： 无

示例：

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

24.map(callbackFn, thisArg)

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

参数：

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

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

示例：

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

25.from(arrayLike, mapFn, thisArg)

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

参数：

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

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

示例：

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

26.isArray(value)

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

参数：

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

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

示例：

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

27.join(separator)

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

参数：

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

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

示例：

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

28.reduce(reducer, initialValue)

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

参数：

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

返回值： 汇总后的值。

示例：

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

29.reduceRight(reducer, initialValue)

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

参数：

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

返回值： 汇总后的值。

示例：

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

30.slice(start, end)

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

参数：

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

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

示例：

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

31.toSpliced(start, deleteCount，item1,item2...)

作用： splice()方法的复制版本。它不再是就地修改原数组，而是返回一个新数组，并在给定的索引处删除和/或替换了一些元素。

参数：

  • start：指定删除/插入的起始位置的索引。如果为负数，则从末尾开始计数。
  • deleteCount：可选，指示数组中要从 start 删除的元素数量，如不填，则删除start后的所有元素。
  • item1, item2, ...：可选参数，要插入的新元素。

返回值： 一个新的数组，并在给定的索引处删除和/或替换了一些元素。

示例：

const array = [1, 2, 3, 4, 5]; 
const toSplicedArray = array.toSpliced(2,1,2); 
console.log(toSplicedArray); // [1，2, 2, 4，5]
console.log(array);  //[1, 2, 3, 4, 5]

32.toString()

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

参数： 无

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

示例：

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

33.toLocaleString()

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

参数： 无

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

示例：

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

34.valueOf()

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

参数： 无

返回值： 数组对象本身。

示例：

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

35.entries()

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

参数： 无

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

示例：

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']

36.keys()

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

参数： 无

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

示例：

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

37.values()

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

参数： 无

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

示例：

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'

38.at(index)

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

参数：

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

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

示例：

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

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

avatar
文章
阅读
粉丝