JavaScript循環(huán)遍歷小結
總結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()不再一一介紹，詳細請看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ù)組值
}當我們給數(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 對象屬性
}總結
用于遍歷數(shù)組元素使用：for()，forEach()，map()，for...of
用于循環(huán)對象屬性使用：for...in
以上所述是小編給大家介紹的JavaScript循環(huán)遍歷你會用哪些小結篇，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
JS清除文本框內(nèi)容離開在恢復及鼠標離開文本框時觸發(fā)js的方法
多網(wǎng)站的需要填寫的文本框在默認狀態(tài)下都會給出一個默認的提示語言，當鼠標點擊此文本框的時候能夠將里面的默認文本清除，當刪除輸入的文本且焦點離開文本框的時候再將默認的文本寫入文本框2016-01-01
這篇文章主要介紹了JS ES6多行字符串與連接字符串的表示方法,結合具體實例形式對比分析了ES6中的多行字符串與連接字符串的表示方法與相關操作技巧,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)水平垂直滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了對JavaScript中this指針的新理解分享,本文講解了方法調(diào)用模式、函數(shù)調(diào)用模式、構造函數(shù)調(diào)用模式、Apply調(diào)用模式中的this指針理解,需要的朋友可以參考下2015-01-01
sort()方法主要是用于對數(shù)組進行排序，默認情況下該方法是將數(shù)組元素轉換成字符串，然后按照ASC碼進行排序，這個大家都能理解，但如果數(shù)組元素是一個Object呢，轉不了字符串，難道不能進行排序？答案當然是否定的,那么我們就來詳細探討下sort()方法的使用2015-08-08
這篇文章主要介紹了使用Mock.js生成前端測試數(shù)據(jù)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
首先，單例模式是對象的創(chuàng)建模式之一，此外還包括工廠模式。2011-04-04
javascript dom 操作詳解 js加強操作實現(xiàn)代碼。2009-07-07
本文整理了一些實用小函數(shù)如阻止輸入非數(shù)字，backspace除外；限制輸入最大字符串長度等，需要的朋友可以了解下2013-11-11
這篇文章主要介紹了JavaScript實現(xiàn)頁面跳轉的方式匯總的相關資料,需要的朋友可以參考下2016-05-05