数组迭代 - 是什么使它们如此有用？-DEV365 开发者社区

了解内置阵列迭代器方法对我来说是一个改变游戏规则的人。它很快成为操纵阵列中我最喜欢的JavaScript工具之一。我能够用更少的行进行清洁器。

您应该如何使用它们？您什么时候使用它们？是什么使一种方法比另一种方法更好？为什么我认为这是在JavaScript中知道的重要工具？

什么是数组？

让我们从头开始。
正如MDN website：中定义的那样，数组是一个有序的数据集合。换句话说，它是将多个单独数据固定在一起的列表。我们可以只使用多个变量调用整个集合，而只能为整个数组使用一个名称。

const first = 1
const second = 2
const third = 3

//use this instead
const myArray = [1, 2, 3, 4, 5]

下一步是什么？

现在我们已经了解了一个数组是什么，让我们谈谈阵列迭代。

那么，如果我需要以特定方式操纵MyArray中的每个元素怎么办？我们可以使用一个for for循环进行。

const myArray = [1, 2, 3, 4, 5]
const newArray = [ ]
for (const num of myArray) {
    newArray.push(num*2)
}

//=> newArray = [2, 4, 6, 8, 10]

看起来不错。我们能够将每个元素乘以2，并将每个结果推入新数组。但是我们需要每次声明一个空数组。有另一种不需要额外声明的方式 - 使用地图。

const myArray = [1, 2, 3, 4, 5]
const newArray = myArray.map(num => num *2)

//=> newArray = [2, 4, 6, 8, 10]

使用地图使我可以使用较少的代码线来产生相同的结果。使用地图的另一个优点是表达式。换句话说，当另一个程序员读取代码时，他们会知道地图将修改数组的每个元素，并将返回带有修改后元素的新数组。相比之下，随着for ... of，程序员将需要读取整个块代码，以了解代码在做什么以及将返回的内容。

常用的另一种迭代方法是过滤器，其中它将返回一个新数组，其所有元素符合条件（即返回true）由回调函数设置。

const myArray = [1, 2, 3, 4, 5]
const oddArray = myArray.filter(num => (num % 2) === 1)

//=>oddArray = [1, 3, 5]

喜欢地图，使用过滤器具有表达性。这意味着它将滤除不通过条件并返回包含所有元素的新数组的数组元素。

到目前为止，地图和过滤器方法都返回数组。但是，减少方法返回单个摘要结果。降低将对数组的每个元素执行回调函数，同时将返回计算的值从上一个元素传递到最终的汇总结果。 注意：使用RELADE时，回调函数正在传递两个参数；累加器和当前数字元素。累加器应该始终是第一个参数，第二个参数将是数组元素。订单很重要。

const myArray = [1, 2, 3, 4, 5]
const myResult = myArray.reduce(function(accumulator, num){
          return num + accumulator
          }, 0)

//=> myResult = 15

请注意，减少选择可选的初始累加器值参数。在此示例中，初始值为0。如果不提供初始值，则将数组的第一个元素用作启动值，第二个元素将通过回调函数通过第一个元素作为累加器。这意味着第一个元素被跳过，并且不会由回调函数执行。加上这不是问题，但是如果回调功能更复杂，该怎么办。

const myArray = [2, 3, 4]
const doubleResult = myArray.reduce(function(accumulator, num){
          return num * 2 + accumulator
          }, 0)
//=> doubleResult = 18

//Without an initial value
const myArray = [2, 3, 4]
const doubleResult = myArray.reduce(function(accumulator, num){
          return num * 2 + accumulator
          })
//=> doubleResult = 16

看一下。两个不同的结果。作为使用减少时的好练习，请记住要包含一个初始值，以避免获得意外的结果。

foreach是另一种数组迭代方法。它被称为表达式最低，没有回报值。您可以将foreach视为所有迭代方法中最通用的。对于每个数组元素，它将执行一次回调函数。可以将foreach用于替换减少或映射并产生相同的结果，但是它将失去使用降低或映射提供的表现力。对于另一个程序员而言，这就是功能的意图。

const myArray = [2, 3, 4]
function doubleResult(numArray) {
  let total = 0
  numArray.forEach(function(num){
    total = num * 2 + total
  })
  return total
}
//=> doubleResult(myArray) = 18

那么您什么时候应该使用foreach方法？由于Foreach没有返回任何内容，因此最好的使用时间是当您不需要任何东西返回时。例如，在调试过程中，可以使用foreach来记录每个数组元素。

unknownArray.forEach(function(e){
     console.log("I am" + e)
     })

另一个时间适当的是需要突变或更改阵列元素的时候。以前提到的迭代方法（地图，过滤器，减少）是无损的，这意味着它们不会更改原始数组。

const myArray = [ 
  {name: "Spot", pet: "dog"}, 
  {name: "Mittens", pet: "cat"}, 
  {name: "Bow", pet: "bird"}
]

myArray.forEach(function(e){
    e.isCute = "yes"
  })

/*=> myArray = [
   {name: "Spot", pet: "dog", isCute: "yes"}, 
   {name: "Mittens", pet: "cat", isCute: "yes"}, 
   {name: "Bow", pet: "bird", isCute: "yes"}
 ]  */

这里还有其他数组迭代方法在这里没有讨论，但是我涵盖了最常用的方法。我希望这对您有用。