您的位置:首页> 前端教程> JS教程
文章导航

JavaScript for in 语句

2018-9-3 10:35| 作者: admin| 查看: 2116| 评论: 0|来自: 蚂蚁部落

编程语言中,语法结构的命名通常与其功能存在一定关联。

从for in语句这个名称大致猜测出它的功能,for表示进行循环操作,in表示属性所在的对象。

那么for in合体可以大致猜测,功能是循环遍历指定对象所具有的属性。

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
var antzone={
  webName:"蚂蚁部落",
  webAddress:"青岛市南区",
  age:2
}
for(var prop in antzone){
  console.log(prop);
}

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/03/103555c0dis99439i79jeu.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到使用for in语句可以循环遍历对象中的属性。

[JavaScript] 纯文本查看 复制代码运行代码
Object.prototype.ant="ES2015"; 
let antzone={
  webName:"蚂蚁部落",
  webAddress:"青岛市南区",
  age:2,
}
for(let prop in antzone){
  console.log(prop);
}

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/03/103644y0x6ykqo62yyoybg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

由上面代码的运行结果可以看到,for in不但可以遍历对象的自有属性,也会遍历到来自于原型链的属性。

但是并不是所有原型链上的属性都是可以遍历到的,比如toString方法继承自原型链,很明显它并没有被遍历到。

因为像toString和toValue等内置属性或者方法不会被for in遍历到,所有标准浏览器行为一致。

再来看一段代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
let antzone={
  webName:"蚂蚁部落",
  webAddress:"青岛市南区",
  age:6,
  toString:function(){
    // code
  }
}
for(let prop in antzone){
  console.log(prop);
}

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/03/103733rg8s592jj8fjy5fp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到谷歌浏览器成功的遍历到被重写的toString方法,不止谷歌,所有标准浏览器和IE8+浏览器都可以。

再来看一段代码实例:

[JavaScript] 纯文本查看 复制代码
Object.prototype.toString=function(){
  console.log("JS教程");
}; 
let antzone={
  webName:"蚂蚁部落",
  webAddress:"青岛市南区",
  age:2,
}
antzone.toString()
for(let prop in antzone){
  console.log(prop);
}

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/03/103817lm8rak90v8oppvbp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码也对原型链上的进行了重写,并且从打印结果来看,重写完全正确。

但是for in并没有遍历到被重写的内置方法toString。

这是因为toString方法重写的位置在原型链上。

属性是否可以被枚举:

遍历和枚举是一个意思。

在前面的代码中,貌似只要是自定义属性都可以被for in遍历到。

其实并不是这样,因为自定义属性的enumerable特性默认值是true,也就是可以枚举,当然也可以设置为false。

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
let antzone={
  webName:"蚂蚁部落",
  age:6
}
Object.defineProperty(antzone, "url", {
    value: "http://www.softwhy.com",
    enumerable: false
});
for(var prop in antzone){
  console.log(prop);
}

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/03/103856w3vofz5i38bgx3z3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到属性url并没有被遍历到,因为它被设置为不可枚举。

总结如下:

(1).for in在所有浏览器都可以遍历可枚举的自有属性。

(2).for in在所有浏览器都可以遍历可枚举的原型链上的非内置属性。

(2).for in可以遍历在对象自身上重写的内置属性,所有标准浏览器和IE8+浏览器支持。

2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

最新评论

返回顶部