for of 与 for in的区别
发布在javascript2017年11月27日view:393
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

for in

我们先看一个例子

Array.prototype.method=function() {
  console.log(this.length);
}
var myArray=[1,2,4,5,6,7]
myArray.name="数组"
for (var index in myArray) {
  console.log(myArray[index]);
}

打印出来的结果是:1 2 4 5 6 7 数组 ƒ (){console.log(this.length);}

使用for in 也可以遍历数组,但是会存在以下问题:

  1. index索引为字符串型数字,不能直接进行几何运算
  2. 遍历顺序有可能不是按照实际数组的内部顺序
  3. 使用for in会遍历数组所有的可枚举属性,包括原型。例如上面的原型方法method和name属性

所以for in更适合遍历对象,不要使用for in遍历数组。


for of

除了使用for循环,如何更简单的遍历数组达到我们的期望呢(即不遍历method和name),ES6中的for of更胜一筹。依旧先来看个例子

Array.prototype.method=function(){
  console.log(this.length);
}
var myArray=[1,2,4,5,6,7]
myArray.name="数组";
for (var value of myArray) {
  console.log(value);
}

这次打印出的结果是: 1 2 4 5 6 7

for of遍历的只是数组内的元素,而不包括数组的原型属性method和索引name

for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。


补充

聊for in的时候,说for in更适合遍历对象,看下例子

Object.prototype.method=function(){
  console.log(this);
}
var myObject={
  a:1,
  b:2,
  c:3
}
for (var key in myObject) {
  console.log(key);
}

打印的结果是: a b c method

for in 可以遍历到 myObject 的原型方法 method ,如果不想遍历原型方法和属性的话,可以在循环内部判断一下, hasOwnPropery 方法可以判断某属性是否是该对象的实例属性。如下:

for (var key in myObject) {
  if(myObject.hasOwnProperty(key)){
    console.log(key);
  }
}

同样可以通过ES5的Object.keys(myObject)获取对象的实例属性组成的数组,不包括原型方法和属性。

  Object.prototype.method=function(){
    console.log(this);
  }
  var myObject={
    a:1,
    b:2,
    c:3
  }
  Object.keys(myObject).forEach(function(key,index){
    console.log(key, ': ',myObject[key])
  })

打印出的结果:a:1 b:2 c:3

评论
发表评论
暂无评论
WRITTEN BY
娜娜娜娜
本人已懒到爆……
TA的新浪微博
PUBLISHED IN
javascript

javascript基础技术知识点

我的收藏