JavaScript中更好的迴圈寫法大全

banq發表於2018-12-17
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來停止回撥。



 

相關文章