网站首页 > 技术文章 正文
用for循环遍历对象
var person = {
name: 'tom',
age: 29,
sex: '男'
}
首先有Object.keys()的方法,拿到可迭代(遍历)的私有属性名的集合(数组)
var keys = Object.keys(person);
for (var i = 0; i < keys.length; i++) {
console.log(keys[i] + ":" + person[keys[i]]);
// 输出: name:tom age: 29 sex: '男'
}
但如果直接用 for...in 遍历可能会出现缺陷:
for in 典型的缺陷:
var arr = [1, 2, 3, 4];
正常情况:
for (var i in arr) {
console.log(i);
} //输出 0 1 2 3
正常情况下我们输出的是没问题的;但是
如果你给 Array添加了一个(判断元素是不是存在数组中)的新方法:
Array.prototype.inArray = function () {
for (var i = 0; i < this.length; i++) {
if (this[n] === ele) {
return true;
}
}
return false;
};
然后我们再试试 for...in ,看一看它还好不好使。
for (var i in arr) {
console.log(i);
}//输出 0 1 2 3 inArray
为什么会多了一个inArray呢?因为它也被遍历出来了。
for...in...会遍历到对象中所有可枚举的属性方法,我们给对象添加的方法默认也是可枚举的;
自己添加的方法怎么样才能不被遍历到呢?
于是我们就用到了 Object.defineProperty ()
这个方法。
该方法允许精确地添加或修改对象的属性。通过赋值操作修改,在枚举对象属性时会被枚举到(for...in 或 Object.keys方法),可以改变这些属性的值,也可以删除这些属性。这个方法允许修改默认的额外选项(或配置)。默认情况下,使用 Object.defineProperty() 添加的属性值是不可修改(immutable)的。 (摘自:MDN web docs)
此方法有四个属性:
configurable
当且仅当该属性的 configurable 键值为 true 时,该属性的描述符才能够被改变,同时该属性也能从对应的对象上被删除。 默认为 false。
enumerable
当且仅当该属性的 enumerable 键值为 true 时,该属性才会出现在对象的枚举属性中。 默认为 false。
数据描述符还具有以下可选键值:
value
该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。 默认为 undefined。
writable
当且仅当该属性的 writable 键值为 true 时,属性的值,也就是上面的 value,才能被赋值运算符改变。 默认为 false。
(摘自:MDN web docs)
看了这四个属性,我们就能很开心的解决上面的问题了:
var arr = [1, 2, 3, 4];
Array.prototype.inArray = function() {
for (var i = 0; i < this.length; i++) {
if (this[n] === ele) {
return true;
}
}
return false;
};
//解决问题的代码
Object.defineProperty(Array.prototype, 'inArray', {
enumerable: false //不可枚举(即不可遍历)
})
?
for (var i in arr) {
console.log(i);
} //输出 0 1 2 3
到此为止我们的问题就解决了!希望能帮助到大家!
- 上一篇: html简单教程
- 下一篇: Three.js的学习资料和学习计划,统统安排上
猜你喜欢
- 2024-11-18 再不学HTML5就真的跟不上时代啦
- 2024-11-18 免费学习 Reactjs 的最佳场所
- 2024-11-18 蜜蜂采集器2308版本对HTTP/2和HTTP/3的功能支持
- 2024-11-18 Three.js的学习资料和学习计划,统统安排上
- 2024-11-18 html简单教程
- 2024-11-18 如何学习建网站-建网站需要准备什么呢?
- 2024-11-18 7.HTML超链接
- 2024-11-18 开发人员要点:JavaScript console methods
- 2024-11-18 元素出现在视图中时触发的js
- 2024-11-18 如何理解javascript里的this变量
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-