JavaScript中更好的循环写法大全

在这篇文章中，我们将介绍for循环的形式，数组方法，使用它们可以使代码更简单，更易读。当您想要操纵数组或对象中的数据时，这些循环/方法很有用。

for in循环
使用这种循环，您不必手动迭代数组索引和对象key。

//iterating over an array
let arr = [1, 2, 3, 4, 5]
for (let index in arr) {
  console.log(arr[index])
}
// Output: 1,2,3,4,5

//iterating over object keys
let obj = { id: 1, msg: 'hello' }
for (let key in obj) {
  console.log(obj[key])
}
// Output: 1, hello

for循环
使用此循环，您可以获取特定索引处的值。此循环仅适用于数组。

for (let val of arr) {
  console.log(val)
}
// Output: 1,2,3,4,5

数组方法
现在让我们看一些数组循环方法。处理数组时，循环往往变得太大，我们必须明确地将项目推送到另一个数组中，依此类推。以下方法可以更轻松地处理此类方案。以下方法将回调函数作为将为数组中的每个元素执行的参数。我们来看几个例子。

1. 迭代数组
您可以使用array.forEach（）方法。For-each将回调作为参数并为每个数组元素执行。

// display index and value
arr.forEach((value, index) => console.log(`Index = ${index} Value = ${value}`))

2.转换数组
要将现有数组转换为另一种形式，可以使用array.map（）方法。map（）方法将回调作为参数并返回一个新数组。新数组中的元素将是回调返回的值。
假设你有一个对象数组，每个对象都有id，name。你想要一个只包含id的数组。
循环：

let data = [
  { id: 1, name: 'Phone', type: 'electronic' },
  { id: 2, name: 'Laptop', type: 'electronic' },
  { id: 3, name: 'Shirt', type: 'clothing' },
]
let ids = []
for (let i = 0; i < data.length; i++) {
  ids.push(data[i].id)
}

使用map:

let ids = data.map(function(val) {
  return val.id
})

使用箭头函数：

let ids = data.map(val => val.id)

3.过滤数组中的元素
要从数组中过滤元素，可以使用array.filter（）方法。filter（）方法需要一个回调，这个回调将对数组中的每个元素执行并返回一个包含过滤项的新数组。如果回调函数为给定元素返回true，则该元素将位于已过滤数组中。

let electronics = data.filter(item => item.type == 'electronic')

4.在数组中搜索元素
如果要在数组中搜索元素，可以使用array.find（）方法。与此处讨论的所有其他方法一样，此方法也需要回调。回调函数应该返回true或false。回调返回true的第一个值将是此方法的输出。如果没有匹配，则该函数将返回undefined。

data.find(val => val.name == 'Phone')

5.从数组中获取单个值
要从数组中获取单个值，可以使用array.reduce（）方法。reduce（）方法采用回调函数，初始值作为参数。回调实习生有一个累加器，currentValue作为强制参数。累加器包含从先前执行的回调中获得的值，currentValue是正在处理的数组元素。
数组的总和和乘积:

let arr = [1, 2, 3, 4, 5]

//sum of array elements
arr.reduce((accumulator, currentValue) => (acc += curr), 0)
// where 0 is the initial value
// Output: 15

// product of array elements
arr.reduce((acc, curr) => (acc *= curr), 1)
// Output: 120

6.检查数组中至少一个元素的条件是否为真。
使用array.some（）方法。如果条件对数组中的至少一个元素为真，则此方法将返回true，否则返回false。

let friends = [13, 15, 16, 18] //ages of group of friends

// checking if at least one of them is 18 or above
arr.some(val => val >= 18)

7.检查数组中所有元素的条件是否为真
使用array.every（）方法。如果条件对于数组中的所有元素为true，则此方法将返回true，否则将返回false。

let giftPrices = [300, 350, 399, 400]
let budgetPerGift = 450

let checkBudget = price => price <= budgetPerGift

giftPrices.every(checkBudget) // true

budgetPerGift = 300

giftPrices.every(checkBudget) // false

需要注意：

对于循环，数组方法比正常情况略慢，但它们提供了许多优点，并且随着JS引擎的更改，它们的性能将得到改善。
我们上面讨论的所有方法（some（），find（）除外）都在整个数组上执行。如果您不想这样做，那么这些方法对您没用。你不能使用break来停止回调。