js中for-in的坑

本文转载自https://blog.csdn.net/qq_34035425/article/details/82146166。

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]);//1
  break;
}


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()
//加上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 对象，以及字符串。
原文链接：https://blog.csdn.net/qq_34035425/article/details/82146166