欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js遍历方法比较

程序员文章站 2023-12-24 16:49:33
...
一。最原始的for循环
let myArray = ['a','b','c'];
for(var index = 0; index < myArray.length; index++) {
    console.log(index,myArray[index]);
}  
// 0 "a"
// 1 "b"
// 2 "c"
二。forEach

上面写法较为麻烦,所以数组提供了forEach方法。

myArray.forEach(function (value) {
        console.log(value);
    });
//a
//b
//c

该方法存在一个问题,即不能中途跳出循环。break,return,continue都不能奏效。

三。for...in
for (var index in myArray) {
  console.log(index,myArray[index]);
}
// 0 a
// 1 b
// 2 c

for...in缺点:

for...in遍历数组的键名,数组的键名是数字,其不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。for...in循环主要是为对象的遍历设计的,不适用于数组的遍历。

四。map
arr.map(function () {
});
五。for...of
for (let value of myArray) {
  console.log(index,value);
}
//a
//b
//c

for...of没有for...inforEach的缺点,它可以与breakcontinuereturn配合使用。

for...of不能用于遍历普通的对象,会报错

let obj = {
  edition: 6,
  committee: "TC39",
  standard: "ECMA-262"
};

for (let e in obj) {
  console.log(e);
}
// edition
// committee
// standard  for...in可以遍历对象键名

for (let e of es6) {
  console.log(e);
}
// TypeError: es6[Symbol.iterator] is not a function

解决方案:

(1)使用Object.keys()方法将对象的键名生成一个数组,然后遍历这个数组。

for(var key of Object.keys(obj)) {
    console.log(key + ': ' + obj[key])
}
//edition: 6
//committee: TC39
//standard: ECMA-262

(2) 使用 Generator 函数将对象重新包装一下。

function* entries(obj) {
  for (let key of Object.keys(obj)) {
    yield [key, obj[key]];
  }
}

for (let [key, value] of entries(obj)) {
  console.log(key, '->', value);
}
// a -> 1
// b -> 2
// c -> 3

(3)利用Object.entries()与解构赋值

Object.entries(obj).forEach(([key,value]) => console.log(`${key}:${value}`))

上一篇:

下一篇: