8种现代数组方法,每个开发人员都应该知道

新墨科技 / 2021-04-10 18:43:42

英文 | https://javascript.plainenglish.io/8-modern-array-methods-that-every-developer-should-know-416855e01757

翻译 | 小爱
在用代码执行数组操作时,你是否经想过,关于数组执行,有没有更加简单的办法?
在JavaScript中,我们可以使用各种非常有用的数组方法。正确使用它们后,只需几行代码,便可以帮助你实现你想要的效果。
在这里,我研究了8种数组方法,与你一起来分享一下,希望这些方法可以大大减少你的工作量。
那让我们现在开始吧。

1、Map

Map方法允许你使用指定的操作将现有数组转换为新数组。




var numbers = [4, 9, 16, 25];var x = numbers.map(v=> 2*v)console.log(x)console.log(numbers)

该map方法将返回一个新数组,并将其存储在变量“ x”中。原始数组“数字”将保持不变。

上面的代码输出:



[8,18,32,50] // x[4,9,16,25]  // numbers

2、Find

这是另一个有用的功能。该find方法的作用是使我们能够在数组中找到特定的对象。它的语法与map方法类似,除了我们必须根据某些特定的检查返回true或false之外。

第一次返回true时,此方法就停止对数组进行循环迭代。

但需要注意的是,此方法只能获取查询匹配到的第一个元素,返回一次,不能查询所有查询匹配到的元素。

示例如下:

var data = [  {item:'Coffee', price:10},  {item:'Tea',price:12},  {item:'Shirt',price:25},  {item:'Pen',price:6},  {item:'Shirt', price:10}];var searchEle=data.find(v => v.item=='Shirt')console.log(searchEle)

输出:

{  item:"Shirt",  price:25}

如你所见,数组“ data”中有两个对象,“ item”的值为“ Shirt”,但是,该.find()方法仅返回了符合条件的第一个对象。

3、筛选数组

顾名思义,此方法使我们可以过滤数组。

与上述两种方法一样,此方法也不会更改原始数组。

在上一个示例中,我们将使用相同的“数据”数组,并将过滤出价格低于10的元素。










var data = [  {item:'Coffee', price:10},  {item:'Tea',price:12},  {item:'Shirt',price:25},  {item:'Pen',price:6},  {item:'Shirt', price:10}];var filteredArr=data.filter(v => v.price>=10)console.log(filteredArr)

如果你看一下方法中的filter函数 ,你会发现我们正在检查当前对象的'price'属性的值是否大于等于10。

如果是这样,则将元素添加到我们的“ filteredArr”数组中。

上面的代码片段的输出:



















[  {    "item": "Coffee",    "price": 10  },  {    "item": "Tea",    "price": 12  },  {    "item": "Shirt",    "price": 25  },  {    "item": "Shirt",    "price": 10  }]

你可以做的另一件事是,将find( )方法来实现该方法的功能。但是,会有一个区别。

使用该find方法时,我们仅获得与搜索查询匹配的第一个元素,而使用该filter方法,我们将获得与查询匹配的所有元素。

如果我们使用与示例相同的示例来更好地说明这一点find ,那么,只有这次我们将使用该filter 方法实现相同的目的。










var data = [  {item:'Coffee', price:10},  {item:'Tea',price:12},  {item:'Shirt',price:25},  {item:'Pen',price:6},  {item:'Shirt', price:10}];var searchEle=data.filter(v => v.item=='Shirt')console.log(searchEle)

我们只需要将'find'关键字与'filter'交换,其余代码保持不变。但是,输出看起来会有所不同。

输出结果如下:











[  {    "item": "Shirt",    "price": 25  },  {    "item": "Shirt",    "price": 10  }]

如前所述,与find 方法不同,过滤器将返回函数返回true的每个对象,并且不会在第一次停止。

4、forEach

此方法替代了for循环。

代替编写整个循环语句,我们可以使用此方法来实现相同的效果。

但是,此方法不返回数组,而只是循环遍历它们。



var numbers = [4, 9, 16, 25];numbers.forEach(v=> console.log(v))

当你只想循环遍历数组中的元素时,这是一个好方法。

但是,这不会阻止你执行其他操作,例如,根据某种条件将数组的值分配给其他数组。








var numbers = [4, 9, 16, 25];var s=[];numbers.forEach(  v=> v%2==0 ? //checking for even numbers  s.push(v*v): //adding their square to another array  null)console.log(s)

但是,最好是使用filter方法来执行这些操作。

5、Every

上一篇:前端也要懂物理 —— 惯性滚动篇

热门文章
最新文章
推荐文章