JavaScript 中更好的循环

在本文中，我们将了解 for 循环和数组方法的各种形式，它们可以使你的代码更简洁、更易读。当你需要操作数组或对象中的数据时，这些循环/方法非常有用。

for 循环

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

//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 of 循环

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

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

数组方法

现在我们来看看几个数组循环方法。处理数组时，循环往往会变得过大，我们必须显式地将元素推送到另一个数组中等等。以下方法可以更轻松地处理此类情况。以下方法将回调函数作为参数，该函数将针对数组中的每个元素执行。我们来看几个示例。

迭代数组

为此，您可以使用array.forEach()方法。for-each 接受回调作为参数，并针对每个数组元素执行该回调。

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

转换数组

要将现有数组转换为其他形式，可以使用array.map()方法。map() 方法接受回调函数作为参数，并返回一个新数组。新数组中的元素将是回调函数返回的值。

假设你有一个对象数组，每个对象都有 id 和 name。你需要一个只包含 id 的数组。

使用 for 循环

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)
}

附地图

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

或者使用箭头函数更短更简单

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

从数组中过滤元素

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

选择电子产品

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

在数组中搜索元素

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

正在搜索名称“Phone”

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

从数组中获取单个值

要从数组中获取单个值，可以使用array.reduce()方法。reduce() 方法接受一个回调函数及其初始值作为参数。回调函数的参数是累加器和 currentValue。累加器包含上一次回调执行时获取的值，currentValue 是正在处理的数组元素。

数组的和与积

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

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

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

检查数组中至少一个元素的条件是否为真。

为此，请使用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
friends.some(val => val >= 18)

检查数组中所有元素的条件是否成立

为此，请使用array.every()方法。如果条件对数组中的所有元素都成立，则此方法返回 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

需要注意的事项

数组方法比普通的for 循环稍微慢一些，但它们提供了很多优点，并且它们的性能会随着 JS 引擎的变化而提高。
我们上面讨论的所有方法（除了 some() 和 find()）都会在整个数组上执行。如果你不想这样做，那么这些方法对你来说毫无用处。你不能使用 break 来停止回调。

今天就到这里。这些方法潜力巨大，可以去 MDN 上查看一下它们的文档，然后尝试一下。

如果您喜欢这篇文章，请分享:)。

文章来源：https://dev.to/kartik2406/better-loops-in-javascript-2716