JS 中forEach，for in、for of用法實(shí)例總結(jié)
更新時(shí)間：2023年05月24日 09:11:03 作者：書香水墨
這篇文章主要介紹了JS 中forEach，for in、for of用法,結(jié)合實(shí)例形式總結(jié)分析了JS 中forEach，for in、for of的基本功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
一、forEach
1.1 遍歷數(shù)組
var array = [1,2,3,4,5,6];
/**
* currentValue 當(dāng)前元素
* index 當(dāng)前元素的索引值
* arr 當(dāng)前元素所屬的數(shù)組對(duì)象
**/
array.forEach(function(currentValue, index, arr) {
?? ?console.log("index: " + index + "; currentValue: ", currentValue);
});1.2 遍歷對(duì)象
var object = {"a":1, "b":2, "c":3};
/**
* currentValue 當(dāng)前元素
* index 當(dāng)前元素的索引值
* arr 當(dāng)前元素所屬的數(shù)組對(duì)象
**/
Object.keys(object).forEach(function(currentValue, index, arr) {
?? ?console.log("index: " + index + "; currentValue: ", currentValue);
});二、for in
2.1 遍歷數(shù)組
var array = [1,2,3,4,5,6];
for (var index in array) {
?? ?console.log("index: " + index + "; currentValue: ", array[index]);
}2.2 遍歷對(duì)象
var object = {"a":1, "b":2, "c":3};
for (var index in object) {
?? ?console.log("index: " + index + "; currentValue: ", object[index]);
}三、for of
3.1 遍歷數(shù)組
var array = [1,2,3,4,5,6];
for (var varlue of array) {
?? ?console.log("currentValue: ", varlue);
}3.2 遍歷對(duì)象
for of不能直接遍歷數(shù)組，需要為對(duì)象增加 Symbol.iterator 屬性
3.2.1 方法一
var obj = {
? ? a:1,
? ? b:2,
? ? c:3
};
obj[Symbol.iterator] = function(){
? ? var keys = Object.keys(this);
? ? var count = 0;
? ? return {
? ? ? ? next(){
? ? ? ? ? ? if(count < keys.length) {
? ? ? ? ? ? ? ? return {value:obj[keys[count++]], done:false};
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? return {value:undefined, done:true};
? ? ? ? ? ? }
? ? ? ? }
? ? }
};
for(var k of obj){
? ? console.log(k);
}3.2.2 方法二使用ES6 function*()
var obj = {
? ? a:1,
? ? b:2,
? ? c:3
};
obj[Symbol.iterator] = function*(){
? ? var keys = Object.keys(obj);
? ? for(var k in keys){
? ? ? ? yield [k, keys[k]]
? ? }
};
for(var [k, v] of obj){
? ? console.log(k, v);
}感興趣的朋友可以使用本站在線工具：http://tools.jb51.net/code/HtmlJsRun 測(cè)試上述代碼運(yùn)行效果！
您可能感興趣的文章:
相關(guān)文章
ionic實(shí)現(xiàn)帶字的toggle滑動(dòng)組件
這篇文章主要為大家詳細(xì)介紹了ionic實(shí)現(xiàn)帶字的toggle滑動(dòng)組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了JS中document獲取元素的常用方法,并提供了具體的示例代碼,這些方法涵蓋了從單個(gè)元素到多個(gè)元素的獲取方式,需要的朋友可以參考下2025-05-05
基于javascript實(shí)現(xiàn)圖片左右切換效果
這篇文章主要為大家介紹了基于javascript實(shí)現(xiàn)圖片左右切換效果，感興趣的小伙伴們可以參考一下2016-01-01
javascript axios 實(shí)現(xiàn)進(jìn)度監(jiān)控的示例代碼
在使用axios發(fā)送HTTP請(qǐng)求時(shí),可以通過onUploadProgress和onDownloadProgress來監(jiān)控上傳和下載的進(jìn)度,具有一定的參考價(jià)值,感興趣的可以了解一下2025-01-01
JS小數(shù)轉(zhuǎn)換為整數(shù)的方法分析
這篇文章主要介紹了JS小數(shù)轉(zhuǎn)換為整數(shù)的方法,結(jié)合實(shí)例形式分析了數(shù)值轉(zhuǎn)換的常用方法與使用技巧,需要的朋友可以參考下2017-01-01
js氣泡效果，在項(xiàng)目需求中經(jīng)常遇到。今天小編把大概實(shí)現(xiàn)步驟分享到腳本之家平臺(tái)，感興趣的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了基于Echarts實(shí)現(xiàn)餅圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
JavaScript中map函數(shù)的實(shí)用技巧總結(jié)
map是JavaScript中的一個(gè)高階函數(shù),它被用于遍歷數(shù)組,并對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)由你提供的函數(shù),然后返回一個(gè)新數(shù)組,這篇文章主要給大家介紹了關(guān)于JavaScript中map函數(shù)的實(shí)用技巧,需要的朋友可以參考下2025-05-05
本文重點(diǎn)給大家介紹javascript中的原型鏈知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-06-06
JavaScript懶加載與預(yù)加載原理與實(shí)現(xiàn)詳解
這篇文章主要介紹了JavaScript懶加載與預(yù)加載，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09