欢迎来到站长教程网!

JavaScript

当前位置:主页 > 网页制作 > JavaScript >

JavaScript开发中 15 种常见的数组操作

时间:2020-06-23|栏目:JavaScript|点击:

本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

数组是 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; // => [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; // => [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; // => 6

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

提示:

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

4. 数据的连接4.1 array.concat() 方法

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

const heroes = ['小智', '前端小智']; const villains = ['老王', '小三']; const everyone = heroes.concat(villains); everyone // ["小智", "前端小智", "老王", "小三"]

提示:

concat()创建一个新的数组,而不改变原来的数组

array.concat(array1 [,array2,...]) 接受多个要连接的数组。

4.2 展开操作符号

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

const heroes = ['小智', '前端小智']; const villains = ['老王', '小三']; const names = [...heroes, ...villains]; names; // ["小智", "前端小智", "老王", "小三"]

提示:

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

获取数组的片段5.1 array.slice() 方法

上一篇:微信小程序清空输入框信息与实现屏幕往上滚动

栏    目:JavaScript

下一篇:vue实现点击按钮切换背景颜色的示例代码

本文标题:JavaScript开发中 15 种常见的数组操作

本文地址:http://www.blue1000.com/wangyezhizuo/JavaScript/2069.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7