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

英文 | 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

此方法检查数组中的每个项目均符合某些特定条件。此方法返回布尔值而不是数组。

当你必须确保每个元素都具有某些特定的属性或值时，这将很有用。

var data = [
{name:'Science', results:'passed'},
{name:'Maths',results:'failed'},
{name:'Computer',results:'passed'},
];
var finalResult=data.every(v => v.results=='passed')
console.log(finalResult) // => false

例如，在上面的代码段中，学生的考试结果存储在数组“数据”中，要通过期末考试，他必须通过每门科目。

因此，我们使用了该every()方法来检查他是否通过了所有学科。

你甚至可以检查是否存在特定值，如下所示：

var data = [
{name:'Science', results:'passed'},
{name:'Maths',}, //here results is missing
{name:'Computer',results:'passed'},
];
var everyEle=data.every(v => v.results)
console.log(everyEle) // => false

6、Some

如果我们要检查某些要素是否满足条件而不是每个要素，该怎么办？

这就是some 方法的来历。

与every 方法一样，此方法也返回布尔值。但是，只要至少一个元素满足条件，它就会返回true。

var data = [
{name:'Science', results:'passed'},
{name:'Maths',results:'failed'},
{name:'Computer',results:'passed'},
];
var finalResult=data.every(v => v.results=='passed')
console.log(finalResult) // => true

7、includes

这是一种非常简单的方法，用于检查数组中是否包含特定元素。

值得一提的是，该includes方法也可用于String并提供相同的功能。

var numbers = [4, 9, 16, 25];
var s=numbers.includes(4)
console.log(s) // => true

此方法还返回true或false。

此外，你可以提供搜索开始位置以及第二个参数。

var numbers = [4, 9, 16, 25];
var s=numbers.includes(4,2)//(element,starting index)
console.log(s) // => false

8、reduce

与到目前为止我们讨论的方法相比，该方法相对复杂。

我们已经使用reduce 方法计算了“数据”数组中存在的元素的总价。

请注意，我们如何不声明全局变量来保留总数，而是使用方法本身提供的变量。

var data = [
  {item:'Coffee', price:10},
  {item:'Tea',price:12},
  {item:'Shirt',price:25},
  {item:'Pen',price:6},
  {item:'Shirt', price:10}
];
var totalPrice=data.reduce((total,current) => {
  return current.price+total
},0)
console.log(totalPrice)

对于初学者，此方法采用2个参数，而不是1个。

第一个参数是函数最后一次迭代的返回值，而第二个参数是数组中实际的当前元素。

因此，“ total”（第一个参数）包含“ current.price”（即当前对象的价格值）和总计之和。

此“ total”值由函数返回，并形成函数成为下一次迭代的第一个参数。

另外，请注意，我们在函数之后传递了另一个参数。这是默认值。我们希望'total'从0开始，因此将0作为第二个参数传递给该函数。

最后的想法

JavaScript在客户端脚本语言中占有主导地位，尽管它是一种非常适合初学者的语言，但它已广泛应用于不同领域。

JavaScript应用程序变得越来越复杂，该语言添加了功能并进行了自我更新以满足需求。

必须学习最佳的现代实践，以减少工作量并使用易读和简单的代码构建重要的应用程序。

JavaScript提供了各种数组方法，旨在简化与数组有关的操作。但是，重要的是要了解何时使用什么数组，以及使用此数组的目的是什么，解决什么问题。

使用JavaScript提供的最佳功能并了解何时使用它们，还可以在技术面试中提供优于其他功能的优势。

这个就是我们学习JavaScript的目的，在工作中解决问题，

最后，希望你喜欢这篇文章，也希望此文对你有所帮助，如果有什么问题，欢迎在留言区跟我们一起探讨。

感谢你的阅读，编程愉快！

学习更多技能

请点击下方公众号