JS中for...in循环陷阱及遍历数组的方式对比
JavaScript中有很多遍历数组的方式,比较常见的是for(var i=0;i<arr.length;i++){},以及for...in...循环等,这些遍历都有各自的优缺点,下面来看看各种JS的遍历对比:
1.for...in...
1).index索引为字符串型数字,不能直接进行几何运算。
2).遍历顺序有可能不是按照实际数组的内部顺序。
3).使用for in会遍历数组所有的可枚举属性,包括原型。例如上栗的原型方法method和name属性。
Array.prototype.myfun=function(){
alert('myfun');
}
var arr = [0,1,2,3]; for(var i in arr){
console.log(arr[i]);
} console.log(Array.prototype)
运行结果:
上面的例子很好的反映了for...in...循环的缺点,原本只想循环取出该数组的数据,但是由于之前给数组添加了原型函数,导致循环的结果多了一个函数。这种场景我在使用lodop打印控件写打印功能时遇到过,打印的内容我用for...in...循环打印了,结果打印的结果莫名其妙多了一串代码,排查了很久才发现原来是lodop.js将Array数组的原型添加了方法,导致循环的时候将该方法也遍历到了,所以for...in...循环最好使用在遍历对象上,不要用来遍历数组。
2.普通for循环
let arr = [1,2,3,4,5]; for (var index = 0; index < arr.length; index++) {
console.log(arr[index]);
}
这是最原始的写法,也是应用比较多的循环方式,但写法较为麻烦,性能有优化空间。
3.优化for循环
var arr = [0,1,2,3]; for(j=0,len=arr.length;j<len;j++){
console.log(arr[j]);
}
使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。这种方法基本上是所有循环遍历方法中性能最高的一种,所以推荐使用这种循环。
4.forEach循环
let arr = [1,2,3,4,5];
arr.forEach((element,index) => {
console.log(element);
});
forEach循环是数组自带的方法,这种方式循环十分方便,不需要获取数组长度即可循环,但是有一个问题,在循环的中途无法跳出forEach
循环,break
命令或return
命令都不能奏效,也就是说一循环必然会执行完毕,不能灵活运用于多种情况。
5.for...of...循环
for…of是ES6新增的遍历方式,它提供了统一的遍历机制。所有实现了[Symbol.iterator]接口的对象都可以被遍历。for...of
循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments
对象、DOM NodeList 对象)、Generator 对象,以及字符串。
优点:
- 有着同
for...in
一样的简洁语法,但是没有for...in
那些缺点 - 不同用于
forEach
方法,它可以与break
、continue
和return
配合使用 - 提供了遍历所有数据结构的统一操作接口
下面是一个使用break语句,跳出for...of
循环的例子。
for (var n of arr) {
if (n > 2) break;console.log(n);
}
上面的例子,会输出斐波纳契数列小于等于2的项。如果当前项大于2,就会使用break
语句跳出for...of
循环。
for...of获取索引
entries
返回一个遍历器对象,用来遍历[键名, 键值]
组成的数组。对于数组,键名就是索引值;对于 Set,键名与键值相同。Map 结构的 Iterator 接口,默认就是调用entries
方法。keys
返回一个遍历器对象,用来遍历所有的键名。values
返回一个遍历器对象,用来遍历所有的键值。
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
方法将对象的键名生成一个数组,然后遍历这个数组。
let es6 = {
edition: 6,
committee: "TC39",
standard: "ECMA-262"
};
for (var key of Object.keys(es6)) {
console.log(key + ': ' + es6[key]);
}
JS中for...in循环陷阱及遍历数组的方式对比的更多相关文章
- js事件、Js中的for循环和事件的关系、this
一.js事件 1.事件 用户在网页中所触发的行为 鼠标滑动种类很多,键盘.表单特列: 点击:onclick 鼠标进入:onmouseenter 鼠标离开:onmouseleave 鼠标悬浮:onmo ...
- php中的for循环和js中的for循环
php中的for循环 循环100个0 for ($i=0;$i<=100;$i++){ $pnums.='0'.","; } js中的for循环,循环31个相同的数.循环日期 ...
- 原生js使用forEach()与jquery使用each遍历数组,return false 的区别
原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...
- JS中如何判断对象是对象还是数组
JS中如何判断对象是对象还是数组 一.总结 一句话总结:typeof Array.isArray === "function",Array.isArray(value)和Objec ...
- js中构造函数的原型添加成员的两种方式
首先,js中给原型对象添加属性和方法. 方式一:对象的动态特效 给原型对象添加成员 语法:构造函数.prototype.方法名=function (){ } 方式二:替换原型对象(不是覆盖,而是替换, ...
- js中的for-of循环遍历数组
遍历数组要怎么做,可能你首先想到的会是for循环,当然for循环在JavaScript 刚萌生的时候就出现了,想到它也是理所当然的 var a=[[1,2],[3,4],5] for(var i=0; ...
- js 中常用的循环
参考文章: 1.js几种数组遍历方式以及性能分析对比 2.javaScript遍历对象.数组总结 首先是数组中可以使用的 1.for 循环 for (let i = 0; i < xxx.len ...
- JavaScript中for..in循环陷阱介绍
for...in循环中的循环计数器是字符串,而不是数字它包含当前属性的名称或当前数组元素的索引,下面有个不错的示例大家可以参考下 大家都知道在JavaScript中提供了两种方式迭代对象: (1) ...
- 【nodejs原理&源码赏析(7)】【译】Node.js中的事件循环,定时器和process.nextTick
[摘要] 官网博文翻译,nodejs中的定时器 示例代码托管在:http://www.github.com/dashnowords/blogs 原文地址:https://nodejs.org/en/d ...
随机推荐
- python 批量生成xml标记文件(连通域坐标分割)
#!/usr/bin/python # -*- coding=utf-8 -*- # author : Manuel # date: 2019-05-15 from xml.etree import ...
- codeforces -1214 E
题目https://codeforces.com/problemset/problem/1214/E 就是得知奇数之间不产生影响,先造出一条链,再用偶数往里插就行.链要di从大到小排个序呀!! #in ...
- 基于 HTML5 WebGL 与 WebVR 3D 虚实现实的可视化培训系统
前言 2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中,信息的分享与虚实的结合已经成为大势所趋,5G 是新一代信息通信技术升级的重要方向,工业互联网是制造业转型升级 ...
- 「洛谷P1196」「NOI2002」银河英雄传说 解题报告
P1196 [NOI2002]银河英雄传说 题目描述 公元五八○一年,地球居民迁至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银河系的 ...
- 1078 字符串压缩与解压 (20分)C语言
文本压缩有很多种方法,这里我们只考虑最简单的一种:把由相同字符组成的一个连续的片段用这个字符和片段中含有这个字符的个数来表示.例如 ccccc 就用 5c 来表示.如果字符没有重复,就原样输出.例如 ...
- Java 中级 学习笔记 1 JVM的理解以及新生代GC处理流程
写在最前 从毕业到现在已经过去了差不多一年的时间,工作还算顺利,但总是离不开CRUD ,我觉得这样下去肯定是不行的,温水煮青蛙,势必有一天,会昏昏沉沉的迷失在温水里.所以,需要将之前学习JAVA 当中 ...
- 轻量级开源小程序SDK发车啦
Magicodes.WxMiniProgram.Sdk 轻量级微信小程序SDK,支持.NET Framework以及.NET Core.目前已提供Abp模块的封装,支持开箱即用. Nuget 新的包 ...
- spring boot集成spring-boot-starter-mail邮件功能
前情提要 以目前IT系统功能来看,邮件功能是非常重要的一个功能.例如:找回密码.邮箱验证,邮件动态码.忘记密码,邮件营销等,都需要用到邮件功能.结合当下最流行的spring boot微服务,推出了sp ...
- centos7 安装jdk8和maven3
centos7 安装jdk8和maven3 标签(空格分隔): java,linux jdk 第一种安装: yum install java-1.8.0-openjdk /usr/lib/jvm/ 默 ...
- [论文翻译]Practical Diversified Recommendations on YouTube with Determinantal Point Processes
目录 ABSTRACT(摘要) 1 INTRODUCTION(简介) 2 RELATED WORK 2.1 Diversification to Facilitate Exploration(对应多样 ...