28个JS常用数组方法总结

小心我沙包一样大的拳头
174 阅读8分钟

28个JS常用数组方法总结

数组的方法也是大家在面试中经常被问到的面试题，但是平时工作中，平时工作中常用的也就6、7个，如果突然让大家多说几个，或者被问到一个冷门的。没有准备的话就会被问到一时语塞。今天整理一波，需要的可以参考一下

目录

1.Array.map()

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

12345const list = [:tired_face:, :tired_face:, :tired_face:, :tired_face:];`` list.map((:white_circle:️) => :grinning:); ``// [:grinning:, :grinning:, :grinning:, :grinning:] const list = [1, 2, 3, 4];`` list.map((el) => el * 2); ``// [2, 4, 6, 8]

2.Array.filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

123456const list = [:grinning:, :tired_face:, :grinning:, :tired_face:];`` list.filter((:white_circle:️) => :white_circle:️ === :grinning:); ``// [:grinning:, :grinning:] // Code``const list = [1, 2, 3, 4];`` list.filter((el) => el % 2 === 0); ``// [2, 4]

3.Array.reduce()

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

123456const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.reduce((:white_large_square:️, :white_circle:️) => :white_large_square:️ + :white_circle:️); ``// :grinning: + :tired_face: + :grinning: + :tired_face: +   // OR``const list = [1, 2, 3, 4, 5];`` list.reduce((total, item) => total + item, 0); ``// 15

4.Array.reduceRight()

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

123456const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.reduceRight((:white_large_square:️, :white_circle:️) => :white_large_square:️ + :white_circle:️); ``//    + :tired_face: + :grinning: + :tired_face: + :grinning: // Code``const list = [1, 2, 3, 4, 5];`` list.reduceRight((total, item) => total + item, 0); ``// 15

5.Array.fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

123456const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.fill(:grinning:); ``// [:grinning:, :grinning:, :grinning:, :grinning:, :grinning:]  const list = [1, 2, 3, 4, 5];`` list.fill(0); ``// [0, 0, 0, 0, 0]

6.Array.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

12345678const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.find((:white_circle:️) => :white_circle:️ === :grinning:); ``// :grinning:`` list.find((:white_circle:️) => :white_circle:️ === :stuck_out_tongue_closed_eyes:); ``// undefined  const list = [1, 2, 3, 4, 5];`` list.find((el) => el === 3); ``// 3`` list.find((el) => el === 6); ``// undefined

7.Array.indexOf()

indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

12345678const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.indexOf(:grinning:); ``// 0`` list.indexOf(:rage:); ``// -1 // Code``const list = [1, 2, 3, 4, 5];`` list.indexOf(3); ``// 2`` list.indexOf(6); ``// -1

8.lastIndexOf()

1arr.lastIndexOf(searchElement[, fromIndex])

方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

12345678const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.lastIndexOf(:grinning:); ``// 3`` list.lastIndexOf(:grinning:, 1); ``// 0 // Code``const list = [1, 2, 3, 4, 5];`` list.lastIndexOf(3); ``// 2`` list.lastIndexOf(3, 1); ``// -1

9.Array.findIndex()

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

1234567891011121314151617const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.findIndex((:white_circle:️) => :white_circle:️ === :grinning:); ``// 0 // You might be thinking how it's different from `indexOf`  ```const array = [5, 12, 8, 130, 44]; array.findIndex((element) => element > 13); // 3` `// ORconst array = [{  id: :grinning:}, {  id: :tired_face:}, {  id:  }];` ` array.findIndex((element) => element.id ===   ); // 2`

10.Array.includes()

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

1234567const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.includes(:grinning:); ``// true // Code``const list = [1, 2, 3, 4, 5];`` list.includes(3); ``// true`` list.includes(6); ``// false

11.Array.pop()

pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。

12345678const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.pop(); ``//  `` list; ``// [:grinning:, :tired_face:, :grinning:, :tired_face:] // Code``const list = [1, 2, 3, 4, 5];`` list.pop(); ``// 5`` list; ``// [1, 2, 3, 4]

12.Array.push()

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

12345678const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.push(:rage:); ``// 5`` list; ``// [:grinning:, :tired_face:, :grinning:, :tired_face:,   , :rage:] // Code``const list = [1, 2, 3, 4, 5];`` list.push(6); ``// 6`` list; ``// [1, 2, 3, 4, 5, 6]

13.Array.shift()

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

123 const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ]; list.shift(); ``// :grinning: list; // [:tired_face:, :grinning:, :tired_face:,   ] // Code const list = [1, 2, 3, 4, 5]; list.shift(); // 1 list; // [2, 3, 4, 5]

14.Array.unshift()

unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

12345678const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.unshift(:rage:); ``// 6`` list; ``// [:rage:, :grinning:, :tired_face:, :grinning:, :tired_face:,   ] // Code``const list = [1, 2, 3, 4, 5];`` list.unshift(0); ``// 6`` list; ``// [0, 1, 2, 3, 4, 5]

15.Array.splice()

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

12345678const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.splice(1, 2); ``// [:grinning:, :tired_face:]`` list; ``// [:grinning:, :tired_face:,   ] // Code``const list = [1, 2, 3, 4, 5];`` list.splice(1, 2); ``// [2, 3]`` list; ``// [1, 4, 5]

16.Array.slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin，不包括end)。原始数组不会被改变。

12345678const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.slice(1, 3); ``// [:tired_face:, :grinning:]`` list; ``// [:grinning:, :tired_face:, :grinning:, :tired_face:,   ] // Code``const list = [1, 2, 3, 4, 5];`` list.slice(1, 3); ``// [2, 3]`` list; ``// [1, 2, 3, 4, 5]

17Array.join()

join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

123456const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];``list.join(``':wavy_dash:'`` ); ``// ":grinning::wavy_dash::tired_face::wavy_dash::grinning::wavy_dash::tired_face::wavy_dash:  " // Code``const list = [1, 2, 3, 4, 5];``list.join(``', '`` ); ``// "1, 2, 3, 4, 5"

18.Array.reverse()

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

12345678const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.reverse(); ``// [  , :tired_face:, :grinning:, :tired_face:, :grinning:]`` list; ``// [  , :tired_face:, :grinning:, :tired_face:, :grinning:] // Code``const list = [1, 2, 3, 4, 5];`` list.reverse(); ``// [5, 4, 3, 2, 1]`` list; ``// [5, 4, 3, 2, 1]

19.Array.sort()

sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。

1234567891011const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.sort(); ``// [:grinning:, :grinning:, :tired_face:, :tired_face:,   ] // This make more sense  ``const array = [``'D'`` , ``'B'`` , ``'A'`` , ``'C'``];`` array.sort(); ``// :grinning: ['A', 'B', 'C', 'D'] // OR``const array = [4, 1, 3, 2, 10];`` array.sort(); ``// :anguished: [1, 10, 2, 3, 4]`` array.sort((a, b) => a - b); ``// :grinning: [1, 2, 3, 4, 10]

20.Array.some()

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

12345678const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.some((:white_circle:️) => :white_circle:️ === :grinning:); ``// true`` list.some((:white_circle:️) => :white_circle:️ === :rage:); ``// false // Code``const list = [1, 2, 3, 4, 5];`` list.some((el) => el === 3); ``// true`` list.some((el) => el === 6); ``// false

21.Array.every()

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

123456789101112const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.every((:white_circle:️) => :white_circle:️ === :grinning:); ``// false const list = [:grinning:, :grinning:, :grinning:, :grinning:, :grinning:];`` list.every((:white_circle:️) => :white_circle:️ === :grinning:); ``// true // Code``const list = [1, 2, 3, 4, 5];`` list.every((el) => el === 3); ``// false const list = [2, 4, 6, 8, 10];`` list.every((el) => el%2 === 0); ``// true

22.Array.from()

Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

12345678const list = :grinning::tired_face::grinning::tired_face:  ;`` Array.from(list); ``// [:grinning:, :tired_face:, :grinning:, :tired_face:,   ]  const set = ``new Set([``':grinning:'`` , ``':tired_face:'`` , ``':grinning:'`` , ``':tired_face:'`` , ``'  '``]);`` Array.from(set); ``// [:grinning:, :tired_face:,   ] const range = (n) => Array.from({ length: n }, (_, i) => i + 1);`` console.log(range(10)); ``// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

23.Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组(注意：这是指一个有7个空位(empty)的数组，而不是由7个 undefined 组成的数组)。

12345 Array.of(7);       ``// [7]`` Array.of(1, 2, 3); ``// [1, 2, 3]  Array(7);          ``// [ , , , , , , ]`` Array(1, 2, 3);    ``// [1, 2, 3]

24.Array.isArray()

Array.isArray() 用于确定传递的值是否是一个 Array。

123456 Array.isArray([:grinning:, :tired_face:, :grinning:, :tired_face:,   ]); ``// true`` Array.isArray(  ); ``// false // Code`` Array.isArray([1, 2, 3, 4, 5]); ``// true`` Array.isArray(5); ``// false

25.Array.at()

at() 方法接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。

123456789101112const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.at(1); ``// :tired_face: // Return from last  `` list.at(-1); ``//  `` list.at(-2); ``// :tired_face: // Code``const list = [1, 2, 3, 4, 5];`` list.at(1); ``// 2`` list.at(-1); ``// 5`` list.at(-2); ``// 4

26.copyWithin()

1arr.copyWithin(target[, start[, end]])

方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

123456789const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.copyWithin(1, 3); ``// [:grinning:, :grinning:,   , :tired_face:,   ] const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];`` list.copyWithin(0, 3, 4); ``// [:tired_face:, :tired_face:, :grinning:, :tired_face:,   ] // Code``const list = [1, 2, 3, 4, 5];`` list.copyWithin(0, 3, 4); ``// [4, 2, 3, 4, 5]

27.Array.flat()

12var newArray = arr.flat([depth])``// depth 可选:指定要提取嵌套数组的结构深度，默认值为 1。

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

123456const list = [:grinning:, :tired_face:, [:grinning:, :tired_face:,   ]];`` list.flat(Infinity); ``// [:grinning:, :tired_face:, :grinning:, :tired_face:,   ] // Code``const list = [1, 2, [3, 4, [5, 6]]];`` list.flat(Infinity); ``// [1, 2, 3, 4, 5, 6]

28.Array.flatMap()

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

123456const list = [:grinning:, :tired_face:, [:grinning:, :tired_face:,   ]];`` list.flatMap((:white_circle:️) => [:white_circle:️, :white_circle:️ + :white_circle:️ ]); ``// [:grinning:, :grinning::grinning:, :tired_face:, :tired_face::tired_face:, :grinning:, :grinning::grinning:, :tired_face:, :tired_face::tired_face:,   ,     ] // Code``const list = [1, 2, 3];`` list.flatMap((el) => [el, el * el]); ``// [1, 1, 2, 4, 3, 9]
avatar
文章
阅读
粉丝