前端各種迴圈用法總結

ohh_發表於2020-01-12
前端

for

const arr = ["a", "b", "c"]
for(let i = 0; i < arr.length; i++) {
    // if(i === 1) break
    // if(i === '1') return 
    console.log(i, arr[i], typeof i)
}
// 列印內容
// 0 'a' 'number'
// 1 'b' 'number'
// 2 'c' 'number'
複製程式碼
  • 普通的for迴圈
  • i是number型別
  • 可以使用 break， return

for in

const obj = {
    a: '這是a',
    b: '這是b',
    c: '這是c'
}
for (const i in obj) {
    console.log(i, obj[i], typeof i)
}

// 列印內容
// a 這是a string
// b 這是b string
// c 這是c string
複製程式碼
const arr = ["a", "b", "c"]
Array.prototype.newArr = () => {}
Array.prototype.arr = ['1233']
for (const i in arr) {
    // if(i === '1') break
    // if(i === '1') return 
    console.log(i, arr[i], typeof i)
}

// 列印內容
// 0 a string
// 1 b string
// 2 c string
// newArr () => {} string
// arr [ 'xxx' ] string
複製程式碼
  • 用於遍歷陣列或者物件的屬性
  • 還從建構函式的原型中查詢繼承的非列舉屬性
  • i是String型別
  • 可以使用 break， return

forEach

arr.forEach((currentValue, index, arr) => {
    console.log(currentValue, index, arr)
    if(index === 1) return
    console.log(currentValue, index, arr)
})

// a 0 [ 'a', 'b', 'c' ]
// a 0 [ 'a', 'b', 'c' ]
// b 1 [ 'a', 'b', 'c' ]
// c 2 [ 'a', 'b', 'c' ]
// c 2 [ 'a', 'b', 'c' ]
複製程式碼
  • 對陣列的迴圈
  • return結束單次函式， 不能使用break

for of

// 錯誤 ~
const obj = {
    a: '這是a',
    b: '這是b',
    c: '這是c'
}
for (const i of obj) {
    console.log(i, obj)
}
複製程式碼
// 正確 ~
const arr = ["a", "b", "c"];
for (const i of arr) {
    console.log(i)
}

for (const i of 'ABCDEF') {
    console.log(i)
}
複製程式碼
// 正確 ~
const map = new Map([['a', '這是a'], ['b', '這是b'], ['c', '這是c']])
for (const [key, value] of map) {
    console.log(key, value)
}
複製程式碼
// 正確 ~
const set = new Set([5, 0, 1, 1, 2, 2, 1, 3, 4 ,5])
for (const value of set) {
    console.log(value)
}
  
複製程式碼
  • ES6 中引入， 替代 for...in 和 forEach()
  • for...of 允許你遍歷 Arrays（陣列）, Strings（字串）, Maps（對映）, Sets（集合）等可迭代的資料結構等。 而普通物件不可迭代
  • 可以使用 break， return

map

const newArr = arr.map((value, index, array) => {
    console.log(value, index, array)
    return value + '1'
})

console.log(newArr, arr)

// a 0 [ 'a', 'b', 'c' ]
// b 1 [ 'a', 'b', 'c' ]
// c 2 [ 'a', 'b', 'c' ]
// [ 'a1', 'b1', 'c1' ] [ 'a', 'b', 'c' ]


const newArr = [].map((value) => {
    return value + '1'
})
// []
複製程式碼
  • 對陣列中的每個元素進行處理，得到新的陣列
  • 不改變原陣列
  • 不會對空陣列進行檢測

filter

const newFilterArr = arr.filter((value, index, array) => {
    console.log(value, index, array)
    return value !== 'a'
})

console.log(newFilterArr, arr)

// a 0 [ 'a', 'b', 'c' ]
// b 1 [ 'a', 'b', 'c' ]
// c 2 [ 'a', 'b', 'c' ]
// [ 'b', 'c' ] [ 'a', 'b', 'c' ]
複製程式碼
  • 新陣列中的元素是通過檢查指定陣列中符合條件的所有元素
  • 不改變原陣列
  • 不會對空陣列進行檢測

some

const isTrue = arr.some((value, index, array) => {
    console.log(value, index, array, 'xxx')
    return value !== 'a'
})

console.log(isTrue, arr)

// a 0 [ 'a', 'b', 'c' ] xxx
// b 1 [ 'a', 'b', 'c' ] xxx
// true [ 'a', 'b', 'c' ]
複製程式碼
  • 用於檢測陣列中的元素是否滿足指定條件
  • 會依次執行陣列的每個元素, 直到true
  • 返回一個布林值
  • 不改變原始陣列
  • 空陣列返回false

every

const isEveryTrue = arr.every((value, index, array) => {
    console.log(value, index, array, 'xxx')
    return value !== 'a'
})

console.log(isEveryTrue, arr)

// a 0 [ 'a', 'b', 'c' ] xxx
// false [ 'a', 'b', 'c' ]
複製程式碼
  • 用於檢測陣列中的元素是否滿足指定條件
  • 會依次執行陣列的每個元素, 遇見false則退出迴圈，返回false
  • 返回一個布林值
  • 不改變原始陣列
  • 空陣列返回true

reduce

const numberArr = [1, 2, 3, 4, 665, 23, 534, 67, 87]
const newReduceArr = numberArr.reduce((total, currentValue, currentIndex, arr) => {
    console.log(total, currentValue, currentIndex)
    return currentValue + total
}, 666)
// 666 預設值

console.log(newReduceArr, numberArr, 'newReduceArr')

// 666 1 0
// 667 2 1
// 669 3 2
// 672 4 3
// 676 665 4
// 1341 23 5
// 1364 534 6
// 1898 67 7
// 1965 87 8
// 2052 [ 1, 2, 3, 4, 665, 23, 534, 67, 87 ] 'newReduceArr'
複製程式碼
  • 每次return的值將作為下次total 傳入回撥中
  • 可傳遞給函式初始值
  • 不改變原始陣列
  • 空陣列是不會執行回撥函式的

reduceRight

const numberArr = [1, 2, 3, 4, 665, 23, 534, 67, 87]
const newReduceArr = numberArr.reduceRight((total, currentValue, currentIndex, arr) => {
    console.log(total, currentValue, currentIndex)
    return currentValue + total
}, 666)
// 666 預設值

console.log(newReduceArr, numberArr, 'newReduceArr')

// 666 87 8
// 753 67 7
// 820 534 6
// 1354 23 5
// 1377 665 4
// 2042 4 3
// 2046 3 2
// 2049 2 1
// 2051 1 0
// 2052 [ 1, 2, 3, 4, 665, 23, 534, 67, 87 ] 'newReduceArr'
複製程式碼
  • 同reduce， 從陣列的末尾向前

Object.keys(), Object.values(), Object.entries()

const arr = ["a", "b", "c"];
const obj = {
    a: '這是a',
    b: '這是b',
    c: '這是c'
}
console.log(Object.keys(arr), Object.values(arr), Object.entries(arr))
console.log(Object.keys(obj), Object.values(obj), Object.entries(obj))

// [ '0', '1', '2' ] [ 'a', 'b', 'c' ] [ [ '0', 'a' ], [ '1', 'b' ], [ '2', 'c' ] ]
// [ 'a', 'b', 'c' ] [ '這是a', '這是b', '這是c' ] [ [ 'a', '這是a' ], [ 'b', '這是b' ], [ 'c', '這是c' ] ]
複製程式碼
  • Object.keys(): 陣列返回索引陣列，物件返回鍵名陣列
  • Object.values(): 陣列返回本身，物件返回值的陣列
  • Object.entries()：返回鍵值對陣列， 陣列鍵為其索引


相關文章