資訊專欄INFORMATION COLUMN
摘要：總結(jié)中的循環(huán)遍歷定義一個數(shù)組和對象經(jīng)常用來遍歷數(shù)組元素遍歷值為數(shù)組元素索引用來遍歷數(shù)組元素第一個參數(shù)為數(shù)組元素，第二個參數(shù)為數(shù)組元素索引，第三個參數(shù)為數(shù)組本身可選沒有返回值用來遍歷數(shù)組元素第一個參數(shù)為數(shù)組元素，第二個參數(shù)為數(shù)組元素索引，第三
總結(jié)JavaScript中的循環(huán)遍歷
定義一個數(shù)組和對象
const arr = ["a", "b", "c", "d", "e", "f"];
const obj = {
a: 1,
b: 2,
c: 3,
d: 4
}
for()
經(jīng)常用來遍歷數(shù)組元素
遍歷值為數(shù)組元素索引
for (let i = 0, len = arr.length; i < len; i++) {
console.log(i); // 0 1 2 3 4 5
console.log(arr[i]); // a b c d e f
}
forEach()
用來遍歷數(shù)組元素
第一個參數(shù)為數(shù)組元素，第二個參數(shù)為數(shù)組元素索引，第三個參數(shù)為數(shù)組本身(可選)
沒有返回值
arr.forEach((item, index) => {
console.log(item); // a b c d e f
console.log(index); // 0 1 2 3 4 5
})
map()
用來遍歷數(shù)組元素
第一個參數(shù)為數(shù)組元素，第二個參數(shù)為數(shù)組元素索引，第三個參數(shù)為數(shù)組本身(可選)
有返回值，返回一個新數(shù)組every()，some()，filter()，reduce()，reduceRight()不再一一介紹，詳細(xì)請看Js中Array方法有哪些？
let arrData = arr.map((item, index) => {
console.log(item); // a b c d e f
console.log(index); // 0 1 2 3 4 5
return item;
})
console.log(arrData); // ["a", "b", "c", "d", "e", "f"]
for...in
可循環(huán)對象和數(shù)組，推薦用于循環(huán)對象
用于循環(huán)對象時
循環(huán)值為對象屬性
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key); // a b c d 屬性
console.log(obj[key]); // 1 2 3 4 屬性值
}
}
用于遍歷數(shù)組時
值為數(shù)組索引
for (let index in arr) {
console.log(index); // 0 1 2 3 4 5 數(shù)組索引
console.log(arr[index]); // a b c d e f 數(shù)組值
}
當(dāng)我們給數(shù)組添加一個屬性name
arr.name = "我是自定義的屬性"
for (let index in arr) {
console.log(index); // 0 1 2 3 4 5 name (會遍歷出我們自定義的屬性)
console.log(arr[index]); // a b c d e f 我是自定義屬性name
}
for...of
可循環(huán)對象和數(shù)組，推薦用于遍歷數(shù)組
用于遍歷數(shù)組時
遍歷值為數(shù)組元素
for (let value of arr) {
console.log(value); // a b c d e f 數(shù)組值
}
用于循環(huán)對象時
須配合Object.keys()一起使用，直接用于循環(huán)對象會報錯，不推薦使用for...of循環(huán)對象
循環(huán)值為對象屬性
for (let value of Object.keys(obj)) {
console.log(value); // a b c d 對象屬性
}
總結(jié)
用于遍歷數(shù)組元素使用：for()，forEach()，map()，for...of
用于循環(huán)對象屬性使用：for...in
關(guān)于上述循環(huán)對性能的影響會后續(xù)補充
更多內(nèi)容請關(guān)注我的博客
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/98053.html
摘要：前端工程師自檢清單對于，掌握其語法和特性是最基本的，但是這些只是應(yīng)用能力，最終仍舊考量仍然是計算機體系的理論知識，所以數(shù)據(jù)結(jié)構(gòu)，算法，軟件工程，設(shè)計模式等基礎(chǔ)知識對前端工程師同樣重要，這些知識的理解程度，可以決定你在前端工程師這條路上能走多 2019前端工程師自檢清單 對于JavaScript，掌握其語法和特性是最基本的，但是這些只是應(yīng)用能力，最終仍舊考量仍然是計算機體系的理論知識，所...
摘要：本文總結(jié)了前端老司機經(jīng)常問題的一些問題并結(jié)合個人總結(jié)給出了比較詳盡的答案。網(wǎng)易阿里騰訊校招社招必備知識點。此外還有網(wǎng)絡(luò)線程，定時器任務(wù)線程，文件系統(tǒng)處理線程等等。線程核心是引擎。主線程和工作線程之間的通知機制叫做事件循環(huán)。 showImg(https://segmentfault.com/img/bVbu4aB?w=300&h=208); 本文總結(jié)了前端老司機經(jīng)常問題的一些問題并結(jié)合個...
摘要：對于，其默認(rèn)大小一般是本地存儲和都保存在瀏覽器端，且都是同源的。把變量放在閉包中和放在全局作用域，對內(nèi)存的影響是一致的，這里并不能說成是內(nèi)存泄露。將新的樹和之前的虛擬樹進行相比較，根據(jù)結(jié)果對進行精準(zhǔn)響應(yīng)。 1. JavaScript 1. JavaScript文件在什么情況下會放在html哪個位置 https://zhuanlan.zhihu.com/p/... 對于必須要在DOM加載...
摘要：對于，其默認(rèn)大小一般是本地存儲和都保存在瀏覽器端，且都是同源的。把變量放在閉包中和放在全局作用域，對內(nèi)存的影響是一致的，這里并不能說成是內(nèi)存泄露。將新的樹和之前的虛擬樹進行相比較，根據(jù)結(jié)果對進行精準(zhǔn)響應(yīng)。 1. JavaScript 1. JavaScript文件在什么情況下會放在html哪個位置 https://zhuanlan.zhihu.com/p/... 對于必須要在DOM加載...
閱讀 1017·2021-09-26 09:55
閱讀 3285·2021-09-22 15:36
閱讀 3048·2021-09-04 16:48
閱讀 3234·2021-09-01 11:41
閱讀 2650·2019-08-30 13:49
閱讀 1546·2019-08-29 18:46
閱讀 3599·2019-08-29 17:28
閱讀 3512·2019-08-29 14:11
