未加星标

Javascript研究 Javascript

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏
这三个方法,都可以用来遍历对象,这非常有用,其中后两个都是es5中新增的方法。
本文会用到一些es5的对象知识,如果你不了解,可以看一下开头提到的文章,首先我们需要一个父对象。
var parent = Object.create(Object.prototype, {
a: {
value: 1,
writable: true,
enumerable: true,
configurable: true
}
});

parent继承自Object.prototype,有一个可枚举的属性a。下面我们在创建一个继承自parent的对象child。

var child = Object.create(parent, {
b: {
value: 2,
writable: true,
enumerable: true,
configurable: true
},
c: {
value: 3,
writable: true,
enumerable: false,
configurable: true
}
});
child有两个属性b和c,其中b为可枚举属性,c为不可枚举属性。
下面我们将用四种方法遍历child对象,来比较四种方法的不同。如下的代码代表程序的输出。
console.log(‘yanhaijing is God’);
// > yanhaijing is God
注:⑤代表es5中新增的方法,你可能需要一款现代浏览器来访问。
for in
for in是es3中就存在,最早用来遍历对象(集合)的方法。
for (var key in child) {
console.log(key);
}
// > b
// > a
从输出可以看出,for in会输出自身以及原型链上可枚举的属性。
注意:不同的浏览器对for in属性输出的顺序可能不同。
如果仅想输出自身的属性可以借助 hasOwnProperty。可以过滤掉原型链上的属性。
for (var key in child) {
if (child.hasOwnProperty(key)) {
console.log(key);
}
}
// > b

上面的代码,仅输出了child自己的可枚举属性b,而没有输出原型parent中的属性。

Object.keys⑤
Object.keys是es5中新增的方法,用来获取对象自身可枚举的属性键。
console.log(Object.keys(child));
// > [“b”]

可以看出Object.keys的效果和for in+hasOwnProperty的效果是一样的。

Object.getOwnPropertyNames⑤
Object.getOwnPropertyNames也是es5中新增的方法,用来获取对象自身的全部属性名。
console.log(Object.getOwnPropertyNames(child));
// > [“b”, “c”]

从输出可以看出其和Object.keys的区别。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: Java浏览器
分页:12
转载请注明
本文标题:Javascript研究 Javascript
本站链接:http://www.codesec.net/view/535033.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(23)