详解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 相关文章推荐
js模仿hover的具体实现代码
Dec 30 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
js+h5 canvas实现图片验证码
Oct 11 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
php5.3 废弃函数小结
2010/05/16 PHP
一个PHP分页类的代码
2011/05/18 PHP
解析php入库和出库
2013/06/25 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
Python 正则表达式入门(初级篇)
2016/12/07 Python
Python OpenCV获取视频的方法
2018/02/28 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
python和opencv实现抠图
2018/07/18 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
本科生求职信
2014/06/17 职场文书
心得体会的写法
2014/09/05 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
2016新年感言
2015/08/03 职场文书
Python实现排序方法常见的四种
2021/07/15 Python