js中for-in的坑

var arr=[1,2,3]

1.传统for循环

//遍历数组
for(var i=0;i<arr.length;i++){
console.log(typeof i);//"number"console.log(arr[i])//1,2,3
}for(var i=0;i<arr.length;i++){console.log(arr[i]);//1break;
}for(var i=0;i<arr.length;i++){if(i==1){continue;}console.log(arr[i]);//1,3
}for(var i=0;i<arr.length;i++){console.log(arr[i]);return;
}
//报错：Illegal return statement

//函数体里边return可以起作用
function a(){for(var i=0;i<arr.length;i++){console.log(arr[i]);return;}
}
a();//1

标准的for循环中i是number类型的，可以使用break,continue语句

//遍历对象
var obj={name:'cc',aa:10};
var keys=Object.keys(obj);//返回一个表示给定对象的所有可枚举属性的字符串数组  ["name", "aa"]
for(var i=0;i<keys.length;i++)
{console.log('属性：'+keys[i]);console.log('值：'+obj[keys[i]]);
}

缺点：这种方式写法比较麻烦,且不方便于遍历对象

2.for in

for(var i in arr){}

for in

for in这种循环i是string类型的
作用于数组的for-in循环体除了遍历数组元素外，还会自身可枚举属性
如果给对象的原型加上方法，for in这种循环会把数组原型链上的属性都能被访问到。
在某些情况下，这段代码可能按照随机顺序遍历数组元素。
简而言之，for-in是为普通对象设计的，你可以遍历得到字符串类型的键，因此不适用于数组遍历。

//循环数组
Array.prototype.test=function(){}
arr.name='jq'
for(var i in arr){console.log(typeof i);//"string"console.log(i);//"0","1","2","name","test"console.log(arr[i]);//1,2,3,jq,ƒ (){}
}

//循环json
Object.prototype.aa=function(){}
var json={'name':111}
for(var i in json){console.log(i);//"name","aa"console.log(json[i])；//111,ƒ (){}
}

使用for in可能会出现的错误：
1.假设有一天谁不小心自己为了扩展js原生的Array类，或者引入一个外部的js框架也扩展了原生Array。那问题就来了。再此建议两点
2.很可能在无意之间进行字符串算数计算，例如：“2” + 1 == “21”,这给编码过程带来极大的不便。

3.forEach循环

forEach方法对数组的每个元素执行一次提供的函数,是es5操作数组的一种方法。

arr.aa=12;
arr.forEach(function(item,index,arr){console.log(item);//1,2,3
})

//加上return语句不起作用
arr.forEach(function(item,index,arr){return;console.log(item);//1,2,3
})

//函数里边写return语句也不起作用
function a(){arr.forEach(function(item){console.log(item);return 7;})
}
a()//1,2,3

//加上break，continue语句报错
var arr=[1,2,3,4];
arr.forEach(function(item,index,arr){break;//continue;console.log(item);
})
//报VM3387:2 Uncaught SyntaxError: Illegal break statement
//或者Illegal continue statement: no surrounding iteration statement

缺点：无法中途跳出forEach循环，continue、break命令或return命令都不能奏效

ES6 for-of循环

for…of允许遍历获得键值。

for…of循环内部调用的是数据结构的Symbol.iterator方法。

arr.foo='hello'
for (let a of arr) {console.log(a); //1，2，3
}

//for...of里边用return语句报错
for(let i of arr){
console.log(i);
return;
}
//报错：Illegal return statement

//break可以起作用
for(let i of arr){
console.log(i);//1
break;
}

//continue语句可以起作用
for(let i of arr){if(i==1){continue;}console.log(i);//2,3
}

//在函数内return可以起作用
function a(){for(let i of arr){console.log(i);return;}
}
a();//1

优点：- 有着同for...in一样的简洁语法，只返回具有数字索引的属性,没有for...in那些缺点。- 不同用于forEach方法，它可以与break、continue和return配合使用。- 提供了遍历所有数据结构的统一操作接口。- for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。

js中for-in的坑相关推荐

JS中进行字符串的相等比较时用==遇到的坑
场景 JS中使用==来判断两个字符串是否相等. 遇到坑的代码: var select_id = Cookies.get("select_id");if(select_id==und ...
js中toFixed方法的两个坑
js中toFixed方法的两个坑 toFixed返回结果是string,后续使用它计算会错误 toFixed返回结果可能出现负零-0.00 toFixed返回结果是string,后续使用它计算会错误 ...
js中for(i in array)和for(i=0；i＜array.length；i++)之间的坑
前情提要刚刚接触到js写for循环的时候,觉得for(i in array)这种格式简直是非常直观,比三段论的for循环好写得多.直到遇到了一个坑,事情是这样的: 最开始的网页中,鉴于方便,清一色使 ...
原生js中nextSibling和nextElementSibling的坑
作者:拓海老师,公众号:拓海老师一直以来js的随性让初学者蛋疼菊紧,但是真正玩熟了之后,还是非常有意思的! 今天拓海老师跟大家说一下原生js中获取元素的下一个直接兄弟元素的坑! 业务场景:点击当前元 ...
一个 js 中值传递和引用传递的坑。
今天在调试代码时遇到一个问题,刚开始想不明白,然后分析了一下后,才知道其中的问题,这也是一个基础的问题,(所以基础是很重要的) 代码如下: var a = 3; a = a * 2; console. ...
在node.js中，使用基于ORM架构的Sequelize，操作mysql数据库之增删改查
Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...
vue中常碰见的坑_Vue 与 Vuex 的第一次接触遇到的坑
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便 ...
js 拉勾网效果_Node.js 中实践基于 Redis 的分布式锁实现
在一些分布式环境下.多线程并发编程中,如果对同一资源进行读写操作,避免不了的一个就是资源竞争问题,通过引入分布式锁这一概念,可以解决数据一致性问题. 作者简介:五月君,Nodejs Developer ...
js中两个对象的比较
代码取自于underscore.js 1.8.3的isEqual函数. 做了一些小小的修改,主要是Function的比较修改. 自己也加了一些代码解读. <!DOCTYPE html> & ...
js相对路径相关（比如：js中的路径依赖导入该js文件的路径）
问题描述: 前几天调用同事的js接口文件,在他自己的html测试页面ok,在我这边调用时出现问题. debug过程中,将该测试html移到其他位置都不行,放到原html测试页面同层次路径下是OK的. ...