大廠技術(shù) 高級前端 Node進(jìn)階

點擊上方程序員成長指北，關(guān)注公眾號

回復(fù)1，加入高級Node交流群

今天我們來看點基礎(chǔ)知識，看看JavaScript中的那些循環(huán)遍歷方法：

一、數(shù)組遍歷方法

1. forEach()

forEach 方法用于調(diào)用數(shù)組的每個元素，并將元素傳遞給回調(diào)函數(shù)。數(shù)組中的每個值都會調(diào)用回調(diào)函數(shù)。其語法如下：

array.forEach(function(currentValue, index, arr), thisValue)
復(fù)制代碼

該方法的第一個參數(shù)為回調(diào)函數(shù)，是必傳的，它有三個參數(shù)：

currentValue：必需。當(dāng)前元素
index：可選。當(dāng)前元素的索引值。
arr：可選。當(dāng)前元素所屬的數(shù)組對象

let arr = [1,2,3,4,5]
arr.forEach((item, index, arr) => {
  console.log(index+":"+item)
})
復(fù)制代碼

該方法還可以有第二個參數(shù)，用來綁定回調(diào)函數(shù)內(nèi)部this變量（前提是回調(diào)函數(shù)不能是箭頭函數(shù)，因為箭頭函數(shù)沒有this）：

let arr = [1,2,3,4,5]
let arr1 = [9,8,7,6,5]
arr.forEach(function(item, index, arr){
  console.log(this[index])  //  9 8 7 6 5
}, arr1)
復(fù)制代碼

注意：

forEach 方法不會改變原數(shù)組，也沒有返回值；
forEach無法使用 break，continue 跳出循環(huán)，使用 return 時，效果和在 for 循環(huán)中使用 continue 一致；
forEach 方法無法遍歷對象，僅適用于數(shù)組的遍歷。

2. map()

map() 方法會返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。該方法按照原始數(shù)組元素順序依次處理元素。其語法如下：

array.map(function(currentValue,index,arr), thisValue)
復(fù)制代碼

該方法的第一個參數(shù)為回調(diào)函數(shù)，是必傳的，它有三個參數(shù)：

currentValue：必須。當(dāng)前元素的值；
index：可選。當(dāng)前元素的索引值；
arr：可選。當(dāng)前元素屬于的數(shù)組對象。

let arr = [1, 2, 3];
 
arr.map(item => {
    return item + 1;
})

// 輸出結(jié)果：[2, 3, 4]
復(fù)制代碼

該方法的第二個參數(shù)用來綁定參數(shù)函數(shù)內(nèi)部的this變量，是可選的：

let arr = ['a', 'b', 'c'];
 
[1, 2].map(function (e) {
    return this[e];
}, arr)

// 輸出結(jié)果：['b', 'c']
復(fù)制代碼

該方法還可以進(jìn)行鏈?zhǔn)秸{(diào)用：

let arr = [1, 2, 3];
 
arr.map(item => item + 1).map(item => item + 1)

// 輸出結(jié)果：[3, 4, 5]
復(fù)制代碼

注意：

map 方法不會對空數(shù)組進(jìn)行檢測；
map 方法遍歷數(shù)組時會返回一個新數(shù)組，不會改變原始數(shù)組；
map 方法有返回值，可以return出來，map的回調(diào)函數(shù)中支持return返回值；
map 方法無法遍歷對象，僅適用于數(shù)組的遍歷。

3. for of

for...of 語句創(chuàng)建一個循環(huán)來迭代可迭代的對象。在 ES6 中引入的 for...of 循環(huán)，以替代 for...in 和 forEach() ，并支持新的迭代協(xié)議。其語法如下：

for (variable of iterable) {
    statement
}
復(fù)制代碼

該方法有兩個參數(shù)：

variable：每個迭代的屬性值被分配給該變量。
iterable：一個具有可枚舉屬性并且可以迭代的對象。

該方法允許獲取對象的鍵值：

let arr = [
    {id:1, value:'hello'},
    {id:2, value:'world'},
    {id:3, value:'JavaScript'}
]
for (let item in arr) {
  console.log(item); 
}
// 輸出結(jié)果：0 1 2 
復(fù)制代碼

注意：

for of 方法只會遍歷當(dāng)前對象的屬性，不會遍歷其原型鏈上的屬性；
for of 方法適用遍歷數(shù)組/ 類數(shù)組/字符串/map/set 等擁有迭代器對象的集合；
for of 方法不支持遍歷普通對象，因為其沒有迭代器對象。如果想要遍歷一個對象的屬性，可以用 for in 方法；
可以使用break、continue、return來中斷循環(huán)遍歷；

4. filter()

filter()方法用于過濾數(shù)組，滿足條件的元素會被返回。它的參數(shù)是一個回調(diào)函數(shù)，所有數(shù)組元素依次執(zhí)行該函數(shù)，返回結(jié)果為true的元素會被返回，如果沒有符合條件的元素，則返回空數(shù)組。其語法如下：

array.filter(function(currentValue,index,arr), thisValue)
復(fù)制代碼

該方法的第一個參數(shù)為回調(diào)函數(shù)，是必傳的，它有三個參數(shù)：

currentValue：必須。當(dāng)前元素的值；
index：可選。當(dāng)前元素的索引值；
arr：可選。當(dāng)前元素屬于的數(shù)組對象。

const arr = [1, 2, 3, 4, 5]
arr.filter(item => item > 2) 

// 輸出結(jié)果：[3, 4, 5]
復(fù)制代碼

同樣，它也有第二個參數(shù)，用來綁定參數(shù)函數(shù)內(nèi)部的this變量。

可以使用filter()方法來移除數(shù)組中的undefined、null、NAN等值：

let arr = [1, undefined, 2, null, 3, false, '', 4, 0]
arr.filter(Boolean)

// 輸出結(jié)果：[1, 2, 3, 4]
復(fù)制代碼

注意：

filter 方法會返回一個新的數(shù)組，不會改變原數(shù)組；
filter 方法不會對空數(shù)組進(jìn)行檢測；
filter 方法僅適用于檢測數(shù)組。

5. some()、every()

some() 方法會對數(shù)組中的每一項進(jìn)行遍歷，只要有一個元素符合條件，就返回true，且剩余的元素不會再進(jìn)行檢測，否則就返回false。

every() 方法會對數(shù)組中的每一項進(jìn)行遍歷，只有所有元素都符合條件時，才返回true，如果數(shù)組中檢測到有一個元素不滿足，則整個表達(dá)式返回 false ，且剩余的元素不會再進(jìn)行檢測。其語法如下：

兩者的語法如下：

array.some(function(currentValue,index,arr),thisValue)
array.every(function(currentValue,index,arr), thisValue)
復(fù)制代碼

兩個方法的第一個參數(shù)為回調(diào)函數(shù)，是必傳的，它有三個參數(shù)：

currentValue：必須。當(dāng)前元素的值；
index：可選。當(dāng)前元素的索引值；
arr：可選。當(dāng)前元素屬于的數(shù)組對象。

let arr = [1, 2, 3, 4, 5]
arr.some(item => item > 4) 

// 輸出結(jié)果：true

let arr = [1, 2, 3, 4, 5]
arr.every(item => item > 0) 

// 輸出結(jié)果：true
復(fù)制代碼

注意：

兩個方法都不會改變原數(shù)組，會返回一個布爾值；
兩個方法都不會對空數(shù)組進(jìn)行檢測；
兩個方法都僅適用于檢測數(shù)組。

6. reduce()、reduceRight()

reduce() 方法接收一個函數(shù)作為累加器，數(shù)組中的每個值（從左到右）開始縮減，最終計算為一個值。reduce() 可以作為一個高階函數(shù)，用于函數(shù)的 compose。其語法如下：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
復(fù)制代碼

reduce 方法會為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù)，不包括數(shù)組中被刪除或從未被賦值的元素，回調(diào)函數(shù)接受四個參數(shù)：

total：上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue）；
currentValue：當(dāng)前被處理的元素；
currentIndex：當(dāng)前元素的索引；
arr：當(dāng)前元素所屬的數(shù)組對象。

該方法的第二個參數(shù)是 initialValue，表示傳遞給函數(shù)的初始值（作為第一次調(diào)用 callback 的第一個參數(shù)）：

let arr = [1, 2, 3, 4]
let sum = arr.reduce((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);
復(fù)制代碼

輸出結(jié)果：

1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
復(fù)制代碼

再來加一個初始值試試：

let arr = [1, 2, 3, 4]
let sum = arr.reduce((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
}, 5)
console.log(arr, sum);
復(fù)制代碼

輸出結(jié)果：

5 1 0
6 2 1
8 3 2
11 4 3
[1, 2, 3, 4] 15
復(fù)制代碼

由此可以得出結(jié)論：如果沒有提供初始值initialValue，reduce 會從索引1的地方開始執(zhí)行 callback 方法，跳過第一個索引。如果提供了初始值initialValue，從索引0開始執(zhí)行

reduceRight() 方法和的reduce()用法幾乎一致，只是該方法是對數(shù)組進(jìn)行倒序遍歷的，而reduce()方法是正序遍歷的。

let arr = [1, 2, 3, 4]
let sum = arr.reduceRight((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
}, 5)
console.log(arr, sum);
復(fù)制代碼

輸出結(jié)果：

5 4 3
9 3 2
12 2 1
14 1 0
[1, 2, 3, 4] 15
復(fù)制代碼

注意：

兩個方法都不會改變原數(shù)組；
兩個方法如果添加初始值，就會改變原數(shù)組，會將這個初始值放在數(shù)組的最后一位；
兩個方法對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

7. find()、findIndex()

find() 方法返回通過函數(shù)內(nèi)判斷的數(shù)組的第一個元素的值。當(dāng)數(shù)組中的元素在測試條件時返回 true 時， find() 返回符合條件的元素，之后的值不會再調(diào)用執(zhí)行函數(shù)。如果沒有符合條件的元素返回 undefined。

findIndex() 方法返回傳入一個測試函數(shù)符合條件的數(shù)組第一個元素位置（索引）。當(dāng)數(shù)組中的元素在函數(shù)條件時返回 true 時， findIndex() 返回符合條件的元素的索引位置，之后的值不會再調(diào)用執(zhí)行函數(shù)。如果沒有符合條件的元素返回 -1。

兩個方法的語法如下：

array.find(function(currentValue, index, arr),thisValue)
array.findIndex(function(currentValue, index, arr), thisValue)
復(fù)制代碼

兩個方法的第一個參數(shù)為回調(diào)函數(shù)，是必傳的，它有三個參數(shù)：

currentValue：必需。當(dāng)前元素；
index：可選。當(dāng)前元素的索引；
arr：可選。當(dāng)前元素所屬的數(shù)組對象。

let arr = [1, 2, 3, 4, 5]
arr.find(item => item > 2) 

// 輸出結(jié)果：3

let arr = [1, 2, 3, 4, 5]
arr.findIndex(item => item > 2) 

// 輸出結(jié)果：2
復(fù)制代碼

find()和findIndex()兩個方法幾乎一樣，只是返回結(jié)果不同：

find()：返回的是第一個符合條件的值；
findIndex：返回的是第一個返回條件的值的索引值。

注意：

兩個方法對于空數(shù)組，函數(shù)是不會執(zhí)行的；
兩個方法否不會改變原數(shù)組。

8. keys()、values()、entries()

三個方法都返回一個數(shù)組的迭代對象，對象的內(nèi)容不太相同：

keys() 返回數(shù)組的索引值；
values() 返回數(shù)組的元素；
entries() 返回數(shù)組的鍵值對。

三個方法的語法如下：

array.keys()
array.values()
array.entries()
復(fù)制代碼

這三個方法都沒有參數(shù)：

let arr = ["Banana", "Orange", "Apple", "Mango"];
const iterator1 = arr.keys();
const iterator2 = arr.values() 
const iterator3 = arr.entries() 

for (let item of iterator1) {
  console.log(item);
}
// 輸出結(jié)果：0 1 2 3

for (let item of iterator2) {
  console.log(item);
}
// 輸出結(jié)果：Banana Orange Apple Mango

for (let item of iterator3) {
  console.log(item);
}
// 輸出結(jié)果：[0, 'Banana'] [1, 'Orange'] [2, 'Apple'] [3, 'Mango']
復(fù)制代碼

總結(jié)：

方法	是否改變原數(shù)組	特點
forEach()	否	沒有返回值
map()	否	有返回值，可鏈?zhǔn)秸{(diào)用
for of	否	for...of遍歷具有Iterator迭代器的對象的屬性，返回的是數(shù)組的元素、對象的屬性值，不能遍歷普通的obj對象，將異步循環(huán)變成同步循環(huán)
filter()	否	過濾數(shù)組，返回包含符合條件的元素的數(shù)組，可鏈?zhǔn)秸{(diào)用
every()、some()	否	some()只要有一個是true，便返回true；而every()只要有一個是false，便返回false.
find()、findIndex()	否	find()返回的是第一個符合條件的值；findIndex()返回的是第一個返回條件的值的索引值
reduce()、reduceRight()	否	reduce()對數(shù)組正序操作；reduceRight()對數(shù)組逆序操作
keys()、values()、entries()	否	keys() 返回數(shù)組的索引值；values() 返回數(shù)組元素；entries() 返回數(shù)組的鍵值對。

二、對象遍歷方法

1. for in

for…in 主要用于循環(huán)對象屬性。循環(huán)中的代碼每執(zhí)行一次，就會對對象的屬性進(jìn)行一次操作。其語法如下：

for (var in object) {
 執(zhí)行的代碼塊
}
復(fù)制代碼

其中兩個參數(shù)：

var：必須。指定的變量可以是數(shù)組元素，也可以是對象的屬性。
object：必須。指定迭代的的對象。

var obj = {a: 1, b: 2, c: 3}; 
 
for (var i in obj) { 
    console.log('鍵名：', i); 
    console.log('鍵值：', obj[i]); 
}
復(fù)制代碼

輸出結(jié)果：

鍵名：a
鍵值：1
鍵名：b
鍵值：2
鍵名：c
鍵值：3
復(fù)制代碼

注意：

for in 方法不僅會遍歷當(dāng)前的對象所有的可枚舉屬性，還會遍歷其原型鏈上的屬性。

2. Object.keys()、Object.values()、Object.entries()

這三個方法都用來遍歷對象，它會返回一個由給定對象的自身可枚舉屬性（不含繼承的和Symbol屬性）組成的數(shù)組，數(shù)組元素的排列順序和正常循環(huán)遍歷該對象時返回的順序一致，這個三個元素返回的值分別如下：

Object.keys()：返回包含對象鍵名的數(shù)組；
Object.values()：返回包含對象鍵值的數(shù)組；
Object.entries()：返回包含對象鍵名和鍵值的數(shù)組。

let obj = { 
  id: 1, 
  name: 'hello', 
  age: 18 
};
console.log(Object.keys(obj));   // 輸出結(jié)果: ['id', 'name', 'age']
console.log(Object.values(obj)); // 輸出結(jié)果: [1, 'hello', 18]
console.log(Object.keys(obj));   // 輸出結(jié)果: [['id', 1], ['name', 'hello'], ['age', 18]
復(fù)制代碼

注意

Object.keys()方法返回的數(shù)組中的值都是字符串，也就是說不是字符串的key值會轉(zhuǎn)化為字符串。
結(jié)果數(shù)組中的屬性值都是對象本身可枚舉的屬性，不包括繼承來的屬性。

3. Object.getOwnPropertyNames()

Object.getOwnPropertyNames()方法與Object.keys()類似，也是接受一個對象作為參數(shù)，返回一個數(shù)組，包含了該對象自身的所有屬性名。但它能返回不可枚舉的屬性。

let a = ['Hello', 'World'];
 
Object.keys(a) // ["0", "1"]
Object.getOwnPropertyNames(a) // ["0", "1", "length"]
復(fù)制代碼

這兩個方法都可以用來計算對象中屬性的個數(shù)：

var obj = { 0: "a", 1: "b", 2: "c"};
Object.getOwnPropertyNames(obj) // ["0", "1", "2"]
Object.keys(obj).length // 3
Object.getOwnPropertyNames(obj).length // 3
復(fù)制代碼

4. Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols() 方法返回對象自身的 Symbol 屬性組成的數(shù)組，不包括字符串屬性：

let obj = {a: 1}

// 給對象添加一個不可枚舉的 Symbol 屬性
Object.defineProperties(obj, {
 [Symbol('baz')]: {
  value: 'Symbol baz',
  enumerable: false
 }
})
 
// 給對象添加一個可枚舉的 Symbol 屬性
obj[Symbol('foo')] = 'Symbol foo'
 
Object.getOwnPropertySymbols(obj).forEach((key) => {
 console.log(obj[key]) 
})

// 輸出結(jié)果：Symbol baz Symbol foo
復(fù)制代碼

5. Reflect.ownKeys()

Reflect.ownKeys() 返回一個數(shù)組，包含對象自身的所有屬性。它和Object.keys()類似，Object.keys()返回屬性key，但不包括不可枚舉的屬性，而Reflect.ownKeys()會返回所有屬性key：

var obj = {
	a: 1,
	b: 2
}
Object.defineProperty(obj, 'method', {
	value: function () {
	    alert("Non enumerable property")
	},
	enumerable: false
})

console.log(Object.keys(obj))
// ["a", "b"]
console.log(Reflect.ownKeys(obj))
// ["a", "b", "method"]
復(fù)制代碼

注意：

Object.keys() ：相當(dāng)于返回對象屬性數(shù)組；
Reflect.ownKeys() :相當(dāng)于 Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj)。

總結(jié)：

對象方法	遍歷基本屬性	遍歷原型鏈	遍歷不可枚舉屬性	遍歷Symbol
for in	是	是	否	否
Object.keys()	是	否	否	否
Object.getOwnPropertyNames()	是	否	是	否
Object.getOwnPropertySymbols()	否	否	是	是
Reflect.ownKeys()	是	否	是	是

三、其他遍歷方法

1. for

for循環(huán)是應(yīng)該是最常見的循環(huán)方式了，它由三個表達(dá)式組成，分別是聲明循環(huán)變量、判斷循環(huán)條件、更新循環(huán)變量。這三個表達(dá)式用分號分隔。可以使用臨時變量將數(shù)組的長度緩存起來，避免重復(fù)獲取數(shù)組長度，當(dāng)數(shù)組較大時優(yōu)化效果會比較明顯。

const arr = [1,2,3,4,5]
for(let i = 0, len = arr.length; i < len; i++ ){
  console.log(arr[i])
}
復(fù)制代碼

在執(zhí)行的時候，會先判斷執(zhí)行條件，再執(zhí)行。for循環(huán)可以用來遍歷數(shù)組，字符串，類數(shù)組，DOM節(jié)點等。可以改變原數(shù)組。

2. while

while循環(huán)中的結(jié)束條件可以是各種類型，但是最終都會轉(zhuǎn)為布爾值，轉(zhuǎn)換規(guī)則如下。

Boolean：true為真，false為假；
String：空字符串為假，所有非空字符串為真；
Number：0為假，非0數(shù)字為真；
null/Undefined/NaN：全為假；
Object：全為真。

let num = 1;
            
while (num < 10){
    console.log(num);
    num ++;
}
復(fù)制代碼

while和for一樣，都是先判斷，再執(zhí)行。只要指定條件為 true，循環(huán)就可以一直執(zhí)行代碼。

3. do / while

該方法會先執(zhí)行再判斷，即使初始條件不成立，do/while循環(huán)也至少會執(zhí)行一次。

let num = 10;
            
do
	{
    console.log(num);
    num--;
  }
while(num >= 0);
            
console.log(num); //-1
復(fù)制代碼

不建議使用do / while來遍歷數(shù)組。

4. for await of

for await...of方法被稱為異步迭代器，該方法是主要用來遍歷異步對象。它是ES2018中引入的方法。

for await...of 語句會在異步或者同步可迭代對象上創(chuàng)建一個迭代循環(huán)，包括 String，Array，類數(shù)組，Map， Set和自定義的異步或者同步可迭代對象。這個語句只能在 async function內(nèi)使用：

function Gen (time) {
  return new Promise((resolve,reject) => {
    setTimeout(function () {
       resolve(time)
    },time)
  })
}

async function test () {
   let arr = [Gen(2000),Gen(100),Gen(3000)]
   for await (let item of arr) {
      console.log(Date.now(),item)
   }
}
test()
復(fù)制代碼

輸出結(jié)果：

—— 本文完 ——

作者：cuggz
原文：https://juejin.cn/post/7007965963819679751

Node 社群

我組建了一個氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學(xué)習(xí)感興趣的話（后續(xù)有計劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加考拉好友回復(fù)「Node」即可。

“分享、點贊、在看” 支持一波??

24個 JavaScript 循環(huán)遍歷方法，你知道幾個？

大廠技術(shù) 高級前端 Node進(jìn)階

一、數(shù)組遍歷方法

1. forEach()

2. map()

3. for of

4. filter()

5. some()、every()

6. reduce()、reduceRight()

7. find()、findIndex()

8. keys()、values()、entries()

二、對象遍歷方法

1. for in

2. Object.keys()、Object.values()、Object.entries()

3. Object.getOwnPropertyNames()

4. Object.getOwnPropertySymbols()

5. Reflect.ownKeys()

三、其他遍歷方法

1. for

2. while

3. do / while

4. for await of