一、for...in循环
let obj = {a: 1, b: 2, c: 3};
for (let key in obj) {
console.log(key); // 输出 'a' 'b' 'c'
console.log(obj[key]); // 输出 1 2 3
}
for...in循环是一种简单的遍历对象属性的方式,它可以遍历对象的所有可枚举属性(包括继承的属性),并且以随机顺序进行遍历。使用for...in循环的关键是要注意该循环遍历的是属性名而不是属性值,因此需要通过对象[key]的方式来获取属性值。
不过需要注意的是,for...in循环并不总是能够准确遍历出对象的所有属性,如果对象的原型链上一个属性是不可枚举的(通过Obejct.defineProperty定义为不可枚举),那么for...in循环遍历的时候就不会出现此属性。
二、Object.keys()
let obj = {a: 1, b: 2, c: 3};
let keys = Object.keys(obj);
console.log(keys); // 输出 ['a', 'b', 'c']
Object.keys()方法接受一个对象作为参数,返回一个由该对象的所有可枚举属性的属性名组成的数组,属性名的顺序与for...in循环遍历的顺序相同。
需要注意的是,Object.keys()只返回对象自身的属性而不包括继承的属性,因此它比for...in循环更可靠。
三、Object.values()
let obj = {a: 1, b: 2, c: 3};
let values = Object.values(obj);
console.log(values); // 输出 [1, 2, 3]
Object.values()方法接受一个对象作为参数,返回一个由该对象的所有可枚举属性的属性值组成的数组,数组中属性值的顺序与Object.keys()返回的属性名的顺序相同。
需要注意的是,Object.values()只返回对象自身的属性值而不包括继承的属性值,因此它比for...in循环更可靠。
四、Object.entries()
let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);
console.log(entries); // 输出 [['a', 1], ['b', 2], ['c', 3]]
Object.entries()方法接受一个对象作为参数,返回一个由该对象的所有可枚举属性的属性名和属性值组成的数组,数组中每个元素是一个由两个元素组成的数组,第一个元素是属性名,第二个元素是属性值,数组中属性名和属性值的顺序与for...in循环遍历的顺序相同。
需要注意的是,Object.entries()只返回对象自身的属性名和属性值而不包括继承的属性名和属性值,因此它比for...in循环更可靠。
五、Symbol.iterator迭代器
let obj = {a: 1, b: 2, c: 3};
obj[Symbol.iterator] = function() {
let keys = Object.keys(this);
let index = 0;
return {
next: () => {
if (index < keys.length) {
return {value: this[keys[index++]], done: false};
} else {
return {done: true};
}
}
};
};
for (let value of obj) {
console.log(value); // 输出 1 2 3
}
Symbol.iterator是ES6新引入的一种机制,可用于定制对象的迭代行为。对象只要部署了Symbol.iterator属性,就可以通过for...of循环遍历其属性值。
对象的Symbol.iterator属性是一个函数,执行该函数将返回一个迭代器对象,该迭代器对象必须包含一个next()方法,执行该方法将返回一个对象,该对象包含两个属性,value和done,value表示属性值,done表示迭代是否结束。
上述代码通过自定义Symbol.iterator属性,实现了遍历对象属性值的功能。
六、Generator函数
let obj = {a: 1, b: 2, c: 3};
obj[Symbol.iterator] = function* () {
let keys = Object.keys(this);
for (let i = 0; i < keys.length; i++) {
yield this[keys[i]];
}
};
for (let value of obj) {
console.log(value); // 输出 1 2 3
}
Generator函数是ES6新引入的一种函数类型,可以用于定义迭代器。Generator函数的特点是能够通过yield关键字,将函数的执行过程暂停,然后再次执行时可以继续从暂停的位置继续执行。
上述代码通过定义一个Generator函数作为Symbol.iterator属性的值,实现了遍历对象属性值的功能。
七、Proxy对象
let obj = {a: 1, b: 2, c: 3};
let proxiedObj = new Proxy(obj, {
ownKeys: function(target) {
return ['a', 'b', 'c'];
},
getOwnPropertyDescriptor: function(target, key) {
return {value: target[key], writable: true, enumerable: true, configurable: true};
}
});
for (let value of proxiedObj) {
console.log(value); // 输出 1 2 3
}
Proxy对象是ES6新引入的一种对象类型,可以用于拦截对象的操作。其中ownKeys和getOwnPropertyDescriptor两个拦截器方法可以用于支持遍历对象属性值的功能。
ownKeys方法接受一个目标对象为参数,返回一个数组,该数组包含了目标对象的所有自身属性名和Symbol类型的属性名。在上述代码中,ownKeys被拦截并且返回了一个包含所有自身属性名的数组。
getOwnPropertyDescriptor方法接受一个目标对象和一个属性名为参数,返回一个对象,该对象包含了指定属性的属性描述符。在上述代码中,getOwnPropertyDescriptor被拦截并且返回了一个包含目标对象属性值和属性描述符的对象。
通过使用Proxy对象可以非常灵活地定制对象遍历行为。