首頁 > web前端 > js教程 > JavaScript陣列遍歷的6種方法比較

JavaScript陣列遍歷的6種方法比較

青灯夜游
發布: 2021-01-26 19:00:18
轉載
2541 人瀏覽過

本篇文章跟大家比較一下6種JS陣列遍歷方法:for、foreach、for in、for of、. each、 ().each,介紹一下它們的差異。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

JavaScript陣列遍歷的6種方法比較

6種JS陣列遍歷方法

一、for

Javascript中的for循環,它用來遍歷數組

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迴圈我們可以直接取到元素,同時也可以取到index值。但是forEach也有一些局限,不能continue跳過或break終止循環

#

let arr = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;d&#39;]
arr.forEach(function (val, index, arr) {
    console.log(&#39;index:&#39;+index+&#39;,&#39;+&#39;val:&#39;+val) // val是当前元素,index当前元素索引,arr数组
    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){} 可以用來遍歷陣列和物件

遍歷陣列時,item表示索引值, arr表示目前索引值對應的元素arr[item]
遍歷物件時,item表示key值,arr表示key值對應的value值obj[item]
for in一般迴圈遍歷的都是物件的屬性,遍歷物件本身的所有可枚舉屬性,以及物件從其建構子原型中繼承的屬性

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 = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;];
for (var item in arr) {
    console.log(item) //0 1 2
    console.log(arr[item]) //a b c
}
登入後複製

四、for of

ES6中新增加的語法for of 語句會建立一個迴圈來迭代可迭代的物件。在 ES6 中引入的 for of 循環,以取代 for in 和 forEach() ,並支援新的迭代協定。 for of 允許你遍歷 Arrays(陣列), Strings(字串), Maps(映射), Sets(集合)等可迭代的資料結構等。


循環一個陣列:

let arr = [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;]
for (let val of arr) {
    console.log(val) 
}
// A B C
登入後複製

循環一個字串:

#

let iterable = "abc";

for (let value of iterable) {
  console.log(value);
}
// "a"
// "b"
// "c"
登入後複製

循環一個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]
登入後複製

循环一个 Set:

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

循环一个拥有enumerable属性的对象
for of循环并不能直接使用在普通的对象上,但如果我们按对象所拥有的属性进行循环,可使用内置的Object.keys()方法:

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

循环一个生成器(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))
可以用来遍历数组和对象,其中k表示索引值或者key值,v表示value值

var arr = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;]
$.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){
//操作代码
}
登入後複製

结论:

推荐在循环对象属性的时候使用for in,在遍历数组的时候的时候使用for of
for in循环出的是key,for of循环出的是value;
for of是ES6新引入的特性。修复了ES5的for in的不足;
for of不能循环普通的对象,需要通过和Object.keys()搭配使用。

跳出循环的方式有如下几种:
return 函数执行被终止;
break 循环被终止;
continue 循环被跳过。

更多编程相关知识,请访问:编程视频!!

以上是JavaScript陣列遍歷的6種方法比較的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板