详解JS中遍历语法的比较


Posted in Javascript onApril 07, 2017

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'
}

缺点:

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

 for...of

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

优点:

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

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

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

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

 for...of获取索引

  1. entries() 返回一个遍历器对象,用来遍历[键名, 键值]组成的数组。对于数组,键名就是索引值;对于 Set,键名与键值相同。Map 结构的 Iterator 接口,默认就是调用entries方法。
  2. keys() 返回一个遍历器对象,用来遍历所有的键名。
  3. 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]);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
js制作提示框插件
Dec 24 Javascript
微信小程序实现聊天室功能
Jun 14 Javascript
JavaScript原生数组Array常用方法
Apr 06 #Javascript
微信小程序 图片宽度自适应的实现
Apr 06 #Javascript
微信小程序 下拉菜单的实现
Apr 06 #Javascript
微信小程序五星评分效果实现代码
Apr 06 #Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 #Javascript
jQuery实现文章图片弹出放大效果
Apr 06 #jQuery
vue.js指令和组件详细介绍及实例
Apr 06 #Javascript
You might like
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
利用 window_onload 实现select默认选择
2006/10/09 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
js常见表单应用技巧
2008/01/09 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
js实现星星打分效果
2020/07/05 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
Python中使用PIPE操作Linux管道
2015/02/04 Python
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
实例Python处理XML文件的方法
2015/08/31 Python
Python验证码识别处理实例
2015/12/28 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
祖国在我心中演讲稿300字
2014/05/04 职场文书
课外活动实习计划
2015/01/19 职场文书
会计人员岗位职责
2015/02/03 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
小学运动会前导词
2015/07/20 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python