专栏首页云瓣JS中遍历语法的比较

JS中遍历语法的比较

for循环

JavaScript 提供多种遍历语法。最原始的写法就是for循环。

let arr = [1,2,3,4,5];

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

缺点:这种写法比较麻烦

forEach

数组提供内置的forEach方法

let arr = [1,2,3,4,5];

arr.forEach((element,index) => {
    console.log(element); // 1 2 3 4 5
});

缺点:这种写法的问题在于,无法中途跳出forEach循环,break命令或return命令都不能奏效。 

for...in

for…in 用于遍历对象所有的可枚举属性,功能类似于Object.keys()。

let obj = {
    name: 'cloud',
    phone: '157xxxx2065'
}
 
for (let prop in obj) {
    console.log(prop); // name phone
}

可能有朋友会问,不可枚举的对象有哪些呢? 比如constructor,数组的length就属于不可枚举属性。

let arr = [10, 20, 30, 40, 50];
 
for (let prop in arr) {
    console.log(prop); // '0' '1' '2' '3' '4'
}

缺点:

  • 数组的键名是数字,但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
  • for...in循环主要是为遍历对象而设计的,不适用于遍历数组

for...of

for…of是ES6新增的遍历方式,它提供了统一的遍历机制。所有实现了[Symbol.iterator]接口的对象都可以被遍历。for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、Generator 对象,以及字符串

优点:

  • 有着同for...in一样的简洁语法,但是没有for...in那些缺点
  • 不同用于forEach方法,它可以与breakcontinuereturn配合使用
  • 提供了遍历所有数据结构的统一操作接口

下面是一个使用break语句,跳出for...of循环的例子。

for (var n of fibonacci) {
  if (n > 1000)
    break;
  console.log(n);
}

上面的例子,会输出斐波纳契数列小于等于1000的项。如果当前项大于1000,就会使用break语句跳出for...of循环。

for...of获取索引
  • entries() 返回一个遍历器对象,用来遍历[键名, 键值]组成的数组。对于数组,键名就是索引值;对于 Set,键名与键值相同。Map 结构的 Iterator 接口,默认就是调用entries方法。
  • keys() 返回一个遍历器对象,用来遍历所有的键名。
  • values() 返回一个遍历器对象,用来遍历所有的键值。
// demo
let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
  console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']
类似数组的对象

类似数组的对象包括好几类。下面是for...of循环用于字符串、DOM NodeList 对象、arguments对象的例子。

// 字符串
let str = "hello";

for (let s of str) {
  console.log(s); // h e l l o
}

// DOM NodeList对象
let paras = document.querySelectorAll("p");

for (let p of paras) {
  p.classList.add("test");
}

// arguments对象
function printArgs() {
  for (let x of arguments) {
    console.log(x);
  }
}
printArgs('a', 'b');
// 'a'
// 'b'

并不是所有类似数组的对象都具有 Iterator 接口,一个简便的解决方法,就是使用Array.from方法将其转为数组。

let arrayLike = { length: 2, 0: 'a', 1: 'b' };

// 报错
for (let x of arrayLike) {
  console.log(x);
}

// 正确
for (let x of Array.from(arrayLike)) {
  console.log(x);  // 'a' // 'b'
}
普通的对象

对于普通的对象,for...of结构不能直接使用,会报错,必须部署了 Iterator 接口后才能使用。

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

for (let e in es6) {
  console.log(e);
}
// edition
// committee
// standard

for (let e of es6) {
  console.log(e);
}
// TypeError: es6 is not iterable

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 走近 Python (类比 JS)

    Python 是一门运用很广泛的语言,自动化脚本、爬虫,甚至在深度学习领域也都有 Python 的身影。作为一名前端开发者,也了解 ES6 中的很多特性借鉴自 ...

    牧云云
  • 尝试造了个工具类库,名为 Diana

    项目地址: diana 文档地址: http://muyunyun.cn/diana/ 造轮子的意义 为啥已经有如此多的前端工具类库还要自己造轮子呢?个人认...

    牧云云
  • 读书笔记-你不知道的JavaScript(上)

    本文首发在我的个人博客:http://muyunyun.cn/ 《你不知道的JavaScript》系列丛书给出了很多颠覆以往对JavaScript认知的点...

    牧云云
  • 【最新】人工智能领域顶会AAAI 2018 Pre-Proceedings 论文列表(附pdf下载链接)

    【导读】人工智能领域顶尖学术会议 AAAI 2018,暨第32届 AAAI 大会将于 2 月 2 日 - 2 月 7 日 在新奥尔良举行。AAAI 是由人工智能...

    WZEARW
  • Go教程:07-控制结构for循环loop

    for循环是编程语言中一种循环语句,而循环语句由循环体及循环的判定条件两部分组成,其表达式为:for(单次表达式;条件表达式;末尾循环体){中间循环体;}. 循...

    mojocn
  • 前端测试题: 关于for...of的简述,说法错误的是?

    ES6 借鉴 C++、Java、C# 和 Python 语言,引入了for...of循环,作为遍历所有数据结构的统一方法。

    舒克
  • Java和Python中for循环的比较

    Java是强类型的语言,而python是弱类型的语言。 先看Java中的for循环使用,如下图:

    py3study
  • Python循环控制之for

    各位小伙伴们 大家周三愉快 今天我们要来共同探讨 另外一个在Python中 (严格的说实在所有语言中) 最重要的语句之一 For()循环控制语句 技术要点: f...

    企鹅号小编
  • HDUOJ --2566

    统计硬币 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java...

    Gxjun
  • 右旋方阵

    lop

扫码关注云+社区

领取腾讯云代金券