for循環(huán)

JavaScript 提供多種遍歷語(yǔ)法。最原始的寫法就是for循環(huán)。

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

for (var index = 0; index < arr.length; index++) {
 console.log(myArray[index]); // 1 2 3 4 5
} 

缺點(diǎn)：這種寫法比較麻煩

forEach

數(shù)組提供內(nèi)置的forEach方法

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

arr.forEach((element,index) => {
  console.log(element); // 1 2 3 4 5
});

缺點(diǎn)：這種寫法的問題在于，無(wú)法中途跳出forEach循環(huán)，break命令或return命令都不能奏效。

 for...in

for…in 用于遍歷對(duì)象所有的可枚舉屬性，功能類似于Object.keys()。 

let obj = {
  name: 'cloud',
  phone: '157xxxx2065'
}
 
for (let prop in obj) {
  console.log(prop); // name phone
}

可能有朋友會(huì)問，不可枚舉的對(duì)象有哪些呢? 比如constructor，數(shù)組的length就屬于不可枚舉屬性。

let arr = [10, 20, 30, 40, 50];
 
for (let prop in arr) {
  console.log(prop); // '0' '1' '2' '3' '4'
}

缺點(diǎn)：

1. 數(shù)組的鍵名是數(shù)字，但是for...in循環(huán)是以字符串作為鍵名“0”、“1”、“2”等等。
2. for...in循環(huán)主要是為遍歷對(duì)象而設(shè)計(jì)的，不適用于遍歷數(shù)組

 for...of

for…of是ES6新增的遍歷方式，它提供了統(tǒng)一的遍歷機(jī)制。所有實(shí)現(xiàn)了[Symbol.iterator]接口的對(duì)象都可以被遍歷。for...of循環(huán)可以使用的范圍包括數(shù)組、Set 和 Map 結(jié)構(gòu)、某些類似數(shù)組的對(duì)象（比如arguments對(duì)象、DOM NodeList 對(duì)象）、Generator 對(duì)象，以及字符串

優(yōu)點(diǎn)：

1. 有著同for...in一樣的簡(jiǎn)潔語(yǔ)法，但是沒有for...in那些缺點(diǎn)
2. 不同用于forEach方法，它可以與break、continue和return配合使用
3. 提供了遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一操作接口

下面是一個(gè)使用break語(yǔ)句，跳出for...of循環(huán)的例子。

for (var n of fibonacci) {
 if (n > 1000)
  break;
 console.log(n);
}

上面的例子，會(huì)輸出斐波納契數(shù)列小于等于1000的項(xiàng)。如果當(dāng)前項(xiàng)大于1000，就會(huì)使用break語(yǔ)句跳出for...of循環(huán)。

 for...of獲取索引

1. entries() 返回一個(gè)遍歷器對(duì)象，用來(lái)遍歷[鍵名, 鍵值]組成的數(shù)組。對(duì)于數(shù)組，鍵名就是索引值；對(duì)于 Set，鍵名與鍵值相同。Map 結(jié)構(gòu)的 Iterator 接口，默認(rèn)就是調(diào)用entries方法。
2. keys() 返回一個(gè)遍歷器對(duì)象，用來(lái)遍歷所有的鍵名。
3. values() 返回一個(gè)遍歷器對(duì)象，用來(lái)遍歷所有的鍵值。

 // demo
let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
 console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

類似數(shù)組的對(duì)象

類似數(shù)組的對(duì)象包括好幾類。下面是for...of循環(huán)用于字符串、DOM NodeList 對(duì)象、arguments對(duì)象的例子。

// 字符串
let str = "hello";

for (let s of str) {
 console.log(s); // h e l l o
}

// DOM NodeList對(duì)象
let paras = document.querySelectorAll("p");

for (let p of paras) {
 p.classList.add("test");
}

// arguments對(duì)象
function printArgs() {
 for (let x of arguments) {
  console.log(x);
 }
}
printArgs('a', 'b');
// 'a'
// 'b'

并不是所有類似數(shù)組的對(duì)象都具有 Iterator 接口，一個(gè)簡(jiǎn)便的解決方法，就是使用Array.from方法將其轉(zhuǎn)為數(shù)組。 

let arrayLike = { length: 2, 0: 'a', 1: 'b' };

// 報(bào)錯(cuò)
for (let x of arrayLike) {
 console.log(x);
}

// 正確
for (let x of Array.from(arrayLike)) {
 console.log(x); // 'a' // 'b'
}

普通的對(duì)象

對(duì)于普通的對(duì)象，for...of結(jié)構(gòu)不能直接使用，會(huì)報(bào)錯(cuò)，必須部署了 Iterator 接口后才能使用。

let es6 = {
 edition: 6,
 committee: "TC39",
 standard: "ECMA-262"
};

for (let e in es6) {
 console.log(e);
}
// edition
// committee
// standard

for (let e of es6) {
 console.log(e);
}
// TypeError: es6 is not iterable

解決方法是，使用Object.keys方法將對(duì)象的鍵名生成一個(gè)數(shù)組，然后遍歷這個(gè)數(shù)組。

for (var key of Object.keys(someObject)) {
 console.log(key + ': ' + someObject[key]);
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論