JavaScript數(shù)組遍歷：for、foreach、for in、for of、$.each、$(

defcon 發(fā)布于2019-08-23 14:07 / 2657人閱讀

摘要：在中引入的循環(huán)，以替代和，并支持新的迭代協(xié)議。允許你遍歷數(shù)組字符串映射集合等可迭代的數(shù)據(jù)結(jié)構(gòu)等。修復(fù)了的的不足不能循環(huán)普通的對象，需要通過和搭配使用。跳出循環(huán)的方式有如下幾種函數(shù)執(zhí)行被終止循環(huán)被終止循環(huán)被跳過。

一、for

Javascript中的for循環(huán)，它用來遍歷數(shù)組

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

九九乘法表：

for ( var x = 1; x <= 9; x++) {
    var str="";
    for ( var y = 1; y <= x; y++) {
    str+=x + "*" + y + " = " + (x * y)+"  ";         
    }
    console.log(str);
}

二、foreach

forEach循環(huán)我們可以直接取到元素，同時也可以取到index值。但是forEach也有一些局限，不能continue跳過或者break終止循環(huán)

let arr = ["a", "b", "c", "d"]
arr.forEach(function (val, index, arr) {
    console.log("index:"+index+","+"val:"+val) // val是當前元素，index當前元素索引，arr數(shù)組
    console.log(arr)
})
//index:0,val:a
//["a", "b", "c", "d"]0: "a"1: "b"2: "c"3: "d"
//index:1,val:b
//["a", "b", "c", "d"]
//index:2,val:c
//["a", "b", "c", "d"]
//index:3,val:d
//["a", "b", "c", "d"]

[].forEach(function(value,index,array){     
　　　　//do something     
　　});          
 等價于：
 $.each([],function(index,value,array){     
　　　//do something     
　})

三、for in

for(var item in arr|obj){} 可以用于遍歷數(shù)組和對象
遍歷數(shù)組時，item表示索引值， arr表示當前索引值對應(yīng)的元素 arr[item]
遍歷對象時，item表示key值，arr表示key值對應(yīng)的value值 obj[item]
for in一般循環(huán)遍歷的都是對象的屬性，遍歷對象本身的所有可枚舉屬性，以及對象從其構(gòu)造函數(shù)原型中繼承的屬性

var obj = {a:1, b:2, c:3};    
for (let item in obj) {
  console.log("obj." + item + " = " + obj[item]);
}
// obj.a = 1
// obj.b = 2
// obj.c = 3
var arr = ["a","b","c"];
for (var item in arr) {
    console.log(item) //0 1 2
    console.log(arr[item]) //a b c
}

四、for of

ES6中新增加的語法 for of 語句創(chuàng)建一個循環(huán)來迭代可迭代的對象。在 ES6 中引入的 for of 循環(huán)，以替代 for in 和 forEach() ，并支持新的迭代協(xié)議。for of 允許你遍歷 Arrays（數(shù)組）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的數(shù)據(jù)結(jié)構(gòu)等。
循環(huán)一個數(shù)組：

let arr = ["A", "B", "C"]
for (let val of arr) {
    console.log(val) 
}
// A B C

循環(huán)一個字符串：

let iterable = "abc";

for (let value of iterable) {
  console.log(value);
}
// "a"
// "b"
// "c"

循環(huán)一個Map:

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);    
for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

循環(huán)一個?Set:

let iterable = new Set([1, 1, 2, 2, 3, 3]);    
for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

循環(huán)一個擁有enumerable屬性的對象
for of循環(huán)并不能直接使用在普通的對象上，但如果我們按對象所擁有的屬性進行循環(huán)，可使用內(nèi)置的Object.keys()方法：

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

循環(huán)一個生成器(generators):

function* fibonacci() { // a generator function
  let [prev, curr] = [0, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

五、jQuery里面的$.each

$.each(arr|obj, function(k, v))
可以用來遍歷數(shù)組和對象，其中k表示索引值或者key值，v表示value值

var arr = ["a","b","c"]
$.each(arr, function(key, val) {
    console.log(key, val);
})
//0 a
//1 b
//2 c

六、jQuery里面的$().each()

$().each()在dom處理上面用的較多,主要是用來遍歷DOMList。如果頁面有多個input標簽類型為checkbox，對于這時用$().each()來處理多個checkbox，例如：

$(“input[name=’checkbox’]”).each(function(i){
if($(this).attr(‘checked’)==true){
//操作代碼
}

結(jié)論：

推薦在循環(huán)對象屬性的時候使用for in,在遍歷數(shù)組的時候的時候使用for of；
for in循環(huán)出的是key，for of循環(huán)出的是value；
for of是ES6新引入的特性。修復(fù)了ES5的for in的不足；
for of不能循環(huán)普通的對象，需要通過和Object.keys()搭配使用。

跳出循環(huán)的方式有如下幾種：
return 函數(shù)執(zhí)行被終止；
break 循環(huán)被終止；
continue 循環(huán)被跳過。

GPU云服務(wù)器云服務(wù)器 for...of for循環(huán)和foreach for-in js js for-in

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/100103.html

發(fā)表評論

登陸后可評論

0條評論

defcon

男|高級講師

我要關(guān)注我要私信

TA的文章

剖析虛幻渲染體系（12）- 移動端專題Part 3（渲染優(yōu)化）

閱讀 1645·2021-11-19 11:38
圖書館選座系統(tǒng)

閱讀 3635·2021-11-15 11:37
美國主要港口之一休斯頓港遭網(wǎng)絡(luò)攻擊運營及系統(tǒng)未受影響

閱讀 873·2021-09-30 09:48
VmShell：國慶期間每日免費抽送虛擬(實體)VISA環(huán)球金卡!免費用戶抽獎/affman免費領(lǐng)

閱讀 1102·2021-09-29 09:46
Unicode? 標準 14.0 版本發(fā)布

閱讀 968·2021-09-23 11:22
一張圖搞懂Flex布局

閱讀 1950·2019-08-30 15:44
connect和next的withRouter共同時候時踩坑

閱讀 3475·2019-08-26 13:58
snabbdom源碼解析（一）準備工作

閱讀 2438·2019-08-26 13:26

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript數(shù)組遍歷：for、foreach、for in、for of、$.each、$(

相關(guān)文章

JavaScript 設(shè)計模式（五）：迭代器模式

javascript的幾種常見遍歷數(shù)據(jù)結(jié)構(gòu)的語法

JavaScript 循環(huán)

JavaScript 的 4 種數(shù)組遍歷方法： for VS forEach() VS for/in