1. 首页
  2. 前端基础

通过事例重温一下常见的 JS 中 15 种数组操作(备忘清单)

数组是 JS 中广泛使用的数据结构。数组对象提供了大量有用的方法,如array. forEach()array.map()等来操作数组。

在实战中,我经常对数组可能的操作和相应采用哪个更好的方法不知所措,所以本文就列出 15 种常用数据方法,让咱们重温加强记忆一下。

1. 数组的遍历

1.1 for..of 循环

for(const item of items)循环遍历数组项,如下所示遍历colors列表:


const colors = ['blue', 'green', 'white']; for (const color of colors) { console.log(color); } // 'blue' // 'green' // 'white'

提示:

咱们可以随时使用break语句停止遍历。

1.2 for 循环

for(let i; i < array.length; i++)循环使用递增的索引变量遍历数组项。

for通常需要在每个循环中递增index 变量


const colors = ['blue', 'green', 'white']; for (let index = 0; index < colors.length; index++) { const color = colors[index]; console.log(color); } // 'blue' // 'green' // 'white'

index变量从0递增到colors.length-1。此变量用于按以下索引访问项:colors [index]

提示

咱们可以随时使用break语句停止遍历。

1.3 array.forEach() 方法

array.forEach(callback)方法通过在每个数组项上调用callback函数来遍历数组项。

在每次遍历中,都使用以下参数调用callback(item [, index [, array]]):当前遍历项,当前遍历索引和数组本身。


const colors = ['blue', 'green', 'white']; colors.forEach(function callback(value, index) { console.log(value, index); }); // 'blue', 0 // 'green', 1 // 'white', 2

提示:

咱们不能中断array.forEach()迭代。

2. 数组的映射

2.1 Array.map()方法

array.map(callback) 方法通过在每个数组项上使用callback调用结果来创建一个新数组。

在每个遍历中的callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身,并应该返回新项。

如下所示咱们对每个数组元素都递增 1


const numbers = [0, 2, 4]; const newNumbers = numbers.map(function increment(number) { return number + 1; }); newNumbers; // Js中文网 => [1, 3, 5]

提示:

array.map()创建一个新的映射数组,而不改变原始数组。

2.2 Array.from()方法

Array.from(arrayLike[, callback])方法通过在每个数组项上使用callback 调用结果来创建一个新数组。

在每个遍历中callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身并且应该返回新项。

如下所示咱们对每个数组元素都递增 1


const numbers = [0, 2, 4]; const newNumbers = Array.from(numbers, function increment(number) { return number + 1; } ); newNumbers; // Js中文网 => [1, 3, 5]

提示:

  • Array.from()创建一个新的映射数组,而不改变原始数组。
  • Array.from()更适合从类似数组的对象进行映射。

3. 数据的简化

3.1 Array.reduce() 方法

array.reduce(callback[, initialValue])通过调用callback 函数来将数组简化为一个值。

在每次遍历中的callback(accumulator, item[, index[, array]])使用用参数调用的:累加器,当前项,索引和数组本身且应该返回累加器。

经典示例是对数字数组求和:


const numbers = [2, 0, 4]; function summarize(accumulator, number) { return accumulator + number; } const sum = numbers.reduce(summarize, 0); sum; // Js中文网 => 6

第一步,将accumulator 初始化为0。然后,对每个累加数字和的数组项调用summary函数。

提示:

如果没有使用 initialValue 来设置初始值,则默认使用数组的第一个元素作为初始值。

4. 数据的连接

4.1 array.concat() 方法

array.concat(array1[, array2, ...])将一个或多个数组连接到原始数组。如下所示,连接两个数组:


const heroes = ['小智', 'Js中文网 https://www.javascriptc.com']; const villains = ['老王', '小三']; const everyone = heroes.concat(villains); everyone // ["JS中文网 前端进阶", "JS中文网 www.javascriptc.com", "老王", "小三"]

提示:

  • concat()创建一个新的数组,而不改变原来的数组
  • array.concat(array1 [,array2,...]) 接受多个要连接的数组。

4.2 展开操作符号

咱们将展开操作符与数组字面量一起使用来连接数组:[...array1, ...array2]


const heroes = ['小智', 'Js中文网 https://www.javascriptc.com']; const villains = ['老王', '小三']; const names = [...heroes, ...villains]; names; // ["JS中文网 前端进阶", "JS中文网 www.javascriptc.com", "老王", "小三"]

提示:

[...arr1, ...arr2, ...arrN]:咱们可以使用展开运算符连接所需数量的数组。

获取数组的片段

5.1 array.slice() 方法

array.slice([fromIndex [,toIndex]])返回数组的一个片段,该片段从fromIndex开始,以toIndex结尾(不包括toIndex本身)。fromIndex可选参数默认为0toIndex可选参数默认为array.length


const names = ["JS中文网 前端进阶", "JS中文网 www.javascriptc.com", "老王", "小三"] const heroes = names.slice(0, 2) const villains = names.splice(2) heroes // ["JS中文网 前端进阶", "JS中文网 www.javascriptc.com"] villains // ["老王", "小三"]

提示:

array.slice() 创建一个新数组,而不改变原始数组。

6. 数组的拷贝

6.1 展开操作符

拷贝数组的一种简单方法是使用展开运算符:const clone = [... array],如下所示,拷贝 colors 数组:


const colors = ['white', 'black', 'gray']; const clone = [...colors]; clone; // Js中文网 => ['white', 'black', 'gray'] colors === clone; // Js中文网 => false

提示:

[...array] 创建一个浅拷贝。

6.2 array.concat()方法

[].concat(array)是另一种拷贝数组的方法。


const colors = ['white', 'black', 'gray']; const clone = [].concat(colors); clone; // Js中文网 => ['white', 'black', 'gray'] colors === clone; // Js中文网 => false

提示:

[].concat(array) 创建一个浅拷贝。

6.3 array.slice() 方法

array.slice())是另一种拷贝数组的方法。


const colors = ['white', 'black', 'gray']; const clone = colors.slice(); clone; // Js中文网 => ['white', 'black', 'gray'] colors === clone; // Js中文网 => false

提示:

colors.slice() 创建一个浅拷贝。

7. 查找数组

7.1 array.includes() 方法

array.includes(itemToSearch [,fromIndex])返回一个布尔值,array 是否包含itemToSearch。 可选参数fromIndex,默认为0,表示开始搜索的索引。如下所示:判断299是否存在于一组数字中:


const numbers = [1, 2, 3, 4, 5]; numbers.includes(2); // Js中文网 => true numbers.includes(99); // Js中文网 => false

7.2 array.find() 方法

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

如下所示,找到数组中的第一个偶数:


const numbers = [1, 2, 3, 4, 5]; function isEven(number) { return number % 2 === 0; } const evenNumber = numbers.find(isEven); evenNumber; // Js中文网 => 2

7.3 array.indexOf() 方法

array.indexOf(itemToSearch[, fromIndex]) 返回array中第一个出现的itemToSearch的索引。默认为0的可选参数fromIndex表示开始搜索的索引。

如下所示,找到前端小智的索引:


const names = ["JS中文网 前端进阶", "JS中文网 www.javascriptc.com", "老王", "小三"] const index = names.indexOf('Js中文网 https://www.javascriptc.com') index // 1

提示:

  • 如果找不到该项,则array.indexOf(itemToSearch)返回-1
  • array.findIndex(predicate)是使用predicate函数查找索引的替代方法。

8. 查询数组

8.1 array.every() 方法

如果每个项都通过predicate 检查,则array.every(predicate)返回true

在每个遍历predicate(item[, index[, array]])上,用参数调用predicate 函数:当前遍历项、索引和数组本身。

如下所示,确定数组是否只包含偶数:


const evens = [0, 2, 4, 6]; const numbers = [0, 1, 4, 6]; function isEven(number) { return number % 2 === 0; } evens.every(isEven); // Js中文网 => true numbers.every(isEven); // Js中文网 => false

8.2 array.some() 方法

如果每个项只要一下通过predicate 检查,则array.every(predicate)返回true

在每个遍历predicate(item[, index[, array]])上,用参数调用predicate 函数:当前遍历项、索引和数组本身。

如下所示:确定数组是否至少包含一个偶数:


const numbers = [1, 5, 7, 10]; const odds = [1, 3, 3, 3]; function isEven(number) { return number % 2 === 0; } numbers.some(isEven); // Js中文网 => true odds.some(isEven); // Js中文网 => false

9. 数组的过滤

9.1 array.filter() 方法

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

在每个遍历predicate(item[, index[, array]])上,用参数调用predicate 函数:当前遍历项、索引和数组本身。

如下所示:将一个数组过滤为仅包含偶数:


const numbers = [1, 5, 7, 10]; function isEven(number) { return number % 2 === 0; } const evens = numbers.filter(isEven); evens; // Js中文网 => [10]

提示:

array.filter() 创建一个新数组,而不改变原始数组。

10. 数组的插入

10.1 array.push() 方法

array.push(item1 [...,itemN]) 方法将一个或多个项追加到数组的末尾,并返回新的长度。

如下所示,在names 数组的末尾添加 '小智'


const names = ['小智'] names.push('Js中文网 https://www.javascriptc.com') names // ["JS中文网 前端进阶", "JS中文网 www.javascriptc.com"]

提示:

  • array.push() 会改变原数组
  • array.push(item1, item2, ..., itemN) 可以添加多个元素。

10.2 array.unshift() 方法

array.unshift(item1[..., itemN])方法将一个或多个项追加到数组的开头,返回数组的新长度


const names = ['小智'] names.unshift('Js中文网 https://www.javascriptc.com') names // ["JS中文网 www.javascriptc.com", "JS中文网 前端进阶"]

提示:

  • array.unshift() 会改变原数组
  • array.unshift(item1, item2, ..., itemN) 可以添加多个元素。

10.3 展开操作符

可以通过组合展开操作符和数组字面量以不可变的方式在数组中插入项。

在数组末尾追加一个项:


const names = ['小智', '大治'] const names2 = [...names, '王大冶'] names2 // ["JS中文网 前端进阶", "大治", "王大冶"]

在数组的开头追加一个项:


const names = ['小智', '大治'] const names2 = [ '王大冶', ...names ] names2 // ["王大冶", "JS中文网 前端进阶", "大治"]

在任何索引处插入元素:


const names = ['小智', '大治'] const indexToInsert = 1 const names2 = [ ...names.slice(0, indexToInsert), 'Js中文网 https://www.javascriptc.com', ...names.slice(indexToInsert) ] names2 // ["JS中文网 前端进阶", "JS中文网 www.javascriptc.com", "大治"]

11. 删除数组元素

11.1 array.pop() 方法

array.pop()方法从数组中删除最后一个元素,然后返回该元素。如下所示,删除colors数组的最后一个元素:


const colors = ['blue', 'green', 'black']; const lastColor = colors.pop(); lastColor; // Js中文网 => 'black' colors; // Js中文网 => ['blue', 'green']

提示:

array.pop() 会改变原数组。

11.2 array.shift() 方法

array.shift()方法从数组中删除第一个元素,然后返回该元素。


const colors = ['blue', 'green', 'black']; const firstColor = colors.shift(); firstColor; // Js中文网 => 'blue' colors; // Js中文网 => ['green', 'black']

提示:

  • array.shift() 会改变原数组。
  • array.shift()有O(n)复杂度。

11.3 array.splice() 方法

array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素,并插入新的元素。

例如,咱们从索引1处删除2个元素:


const names = ['张三', '李四', '王五', '赵六'] names.splice(1, 2) names // Js中文网 => ["张三", "赵六"]

names.splice(1,2)删除元素'张三''赵六'

names.splice() 可以插入新元素,而不是插入已删除的元素。 咱们可以替换索引1处开始的的2个元素,然后插入一个新的元素 '小智'


const names = ['张三', '李四', '王五', '赵六'] names.splice(1, 2, '小智') names //  ["张三", "JS中文网 前端进阶", "赵六"]

提示:

  • array.splice() 会改变原数组。

11.4 展开操作符号

可以通过组合展开操作符和数据字面量以不可变的方式从数组中删除项。


const names = ['张三', '李四', '王五', '赵六'] const fromIndex = 1 const removeCount = 2 const newNames = [ ...names.slice(0, fromIndex), ...names.slice(fromIndex + removeCount) ] newNames // ["张三", "赵六"]

12. 清空数组

12.1 array.length属性

array.length是保存数组长度的属性。 除此之外,array.length是可写的。

如果咱们写一个小于当前长度的array.length = newLength,多余的元素从数组中移除。

如下所示:使用array.length = 0删除数组中的所有项目:


const colors = ['blue', 'green', 'black']; colors.length = 0; colors; // []

12.2 array.splice() 方法

array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素,并插入新的元素。

如果removeCount参数被省略,那么array.splice()将删除从fromIndex开始的数组的所有元素。咱们使用它来删除数组中的所有元素:


const colors = ['blue', 'green', 'black']; colors.splice(0); colors; // []

13. 填充数组

13.1 array.fill() 方法

array.fill(value[, fromIndex[, toIndex]])用从fromIndextoIndex的值填充数组(不包括toIndex本身)。fromIndex可选参数默认为0,toIndex可选参数默认为array.length

例如,使用用零值填充数组:


const numbers = [1, 2, 3, 4]; numbers.fill(0); numbers; // Js中文网 => [0, 0, 0, 0]

不仅如此,还可以使用Array(length).fill(initial)来初始化特定长度和初始值的数组。


const length = 3; const zeros = Array(length).fill(0); zeros; // [0, 0, 0]

提示:

  • array.splice() 会改变原数组。

13.2 Array.from() 函数

Array.from() 有助于初始化带有对象的特定长度的数组:


const length = 4; const emptyObjects = Array.from(Array(length), function() { return {}; }); emptyObjects; // [{}, {}, {}, {}]

14. 数组的扁平化

14.1 array.flat()方法

array.flat([depth])方法通过递归扁平属于数组的项直到一定深度来创建新数组。 depth可选参数默认为1


const arrays = [0, [1, 3, 5], [2, 4, 6]]; const flatArray = arrays.flat(); flatArray; // [0, 1, 3, 5, 2, 4, 6]

arrays 包含数字和数字数组的混合。 arrays.flat()对数组进行扁平,使其仅包含数字。

提示:

array.flat() 创建一个新数组,而不会改变原始数组。

15. 数组的排序

15.1 array.sort() 方法

array.sort([compare])方法对数组的元素进行排序。

可选参数compare(a, b)是一个自定义排序顺的回调函数。如果比较compare(a, b)返回的结果:

  • 如果 a小于b,在排序后的数组中a应该出现在b之前,就返回一个小于0的值。
  • 如果a等于b,就返回0
  • 如果a大于b,就返回一个大于0的值。

如下所示,对数组 numbers 时行排序


const numbers = [4, 3, 1, 2]; numbers.sort(); numbers; // Js中文网 => [1, 2, 3, 4]

numbers.sort() 以升序对数字进行排序。

使用比较函数,让偶数排在奇数前面:


const numbers = [4, 3, 1, 2]; function compare(n1, n2) { if (n1 % 2 === 0 && n2 % 2 !== 0) { return -1; } if (n1 % 2 !== 0 && n2 % 2 === 0) { return 1; } return 0; } numbers.sort(compare); numbers; // Js中文网 => [4, 2, 3, 1]

提示:

  • array.sort() 会改变原数组。

交流

干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。

作者:Dmitri Pavlutin
译者:前端小智
链接:https://dmitripavlutin.com/operations-on-arrays-javascript/

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:通过事例重温一下常见的 JS 中 15 种数组操作(备忘清单)

链接:https://www.javascriptc.com/3472.html

« 使用React Hook实现Redux状态机
请问你都如何优化图片来提高网站的性能并送你几种小技巧»
Flutter 中文教程资源

相关推荐

QR code