建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要為大家展示了“JS中遍歷語法之間有什么區(qū)別”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JS中遍歷語法之間有什么區(qū)別”這篇文章吧。
for循環(huán)
JavaScript 提供多種遍歷語法。最原始的寫法就是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)：這種寫法的問題在于，無法中途跳出forEach循環(huán)，break命令或return命令都不能奏效。
for...in
for…in 用于遍歷對象所有的可枚舉屬性，功能類似于Object.keys()。
let obj = {
name: 'cloud',
phone: '157xxxx2065'
}
for (let prop in obj) {
console.log(prop); // name phone
}可能有朋友會問，不可枚舉的對象有哪些呢? 比如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)：
數(shù)組的鍵名是數(shù)字，但是
for...in循環(huán)是以字符串作為鍵名“0”、“1”、“2”等等。for...in循環(huán)主要是為遍歷對象而設(shè)計(jì)的，不適用于遍歷數(shù)組
for...of
for…of是ES6新增的遍歷方式，它提供了統(tǒng)一的遍歷機(jī)制。所有實(shí)現(xiàn)了[Symbol.iterator]接口的對象都可以被遍歷。for...of循環(huán)可以使用的范圍包括數(shù)組、Set 和 Map 結(jié)構(gòu)、某些類似數(shù)組的對象（比如arguments對象、DOM NodeList 對象）、Generator 對象，以及字符串
優(yōu)點(diǎn)：
有著同
for...in一樣的簡潔語法，但是沒有for...in那些缺點(diǎn)不同用于
forEach方法，它可以與break、continue和return配合使用提供了遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一操作接口
下面是一個使用break語句，跳出for...of循環(huán)的例子。
for (var n of fibonacci) {
if (n > 1000)
break;
console.log(n);
}上面的例子，會輸出斐波納契數(shù)列小于等于1000的項(xiàng)。如果當(dāng)前項(xiàng)大于1000，就會使用break語句跳出for...of循環(huán)。
for...of獲取索引
entries()返回一個遍歷器對象，用來遍歷[鍵名, 鍵值]組成的數(shù)組。對于數(shù)組，鍵名就是索引值；對于 Set，鍵名與鍵值相同。Map 結(jié)構(gòu)的 Iterator 接口，默認(rèn)就是調(diào)用entries方法。keys()返回一個遍歷器對象，用來遍歷所有的鍵名。values()返回一個遍歷器對象，用來遍歷所有的鍵值。
// demo
let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']類似數(shù)組的對象
類似數(shù)組的對象包括好幾類。下面是for...of循環(huán)用于字符串、DOM NodeList 對象、arguments對象的例子。
// 字符串
let str = "hello";
for (let s of str) {
console.log(s); // h e l l o
}
// DOM NodeList對象
let paras = document.querySelectorAll("p");
for (let p of paras) {
p.classList.add("test");
}
// arguments對象
function printArgs() {
for (let x of arguments) {
console.log(x);
}
}
printArgs('a', 'b');
// 'a'
// 'b'并不是所有類似數(shù)組的對象都具有 Iterator 接口，一個簡便的解決方法，就是使用Array.from方法將其轉(zhuǎn)為數(shù)組。
let arrayLike = { length: 2, 0: 'a', 1: 'b' };
// 報錯
for (let x of arrayLike) {
console.log(x);
}
// 正確
for (let x of Array.from(arrayLike)) {
console.log(x); // 'a' // 'b'
}普通的對象
對于普通的對象，for...of結(jié)構(gòu)不能直接使用，會報錯，必須部署了 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方法將對象的鍵名生成一個數(shù)組，然后遍歷這個數(shù)組。
for (var key of Object.keys(someObject)) {
console.log(key + ': ' + someObject[key]);
}以上是“JS中遍歷語法之間有什么區(qū)別”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
分享名稱：JS中遍歷語法之間有什么區(qū)別-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://www.dlmjj.cn/article/djocjd.html
