一、基礎(chǔ)用法
ES6中的for...in循環(huán)與ES5中的for...in有所區(qū)別。在ES5中，使用for...in循環(huán)來迭代對象的屬性，在迭代時，可以遍歷對象的自有屬性和繼承屬性。在ES6中，使用for...in循環(huán)遍歷對象的屬性時，只遍歷對象的自有屬性，不會遍歷繼承屬性。
const 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循環(huán)遍歷了對象obj中的屬性，并打印出了屬性名和屬性值。需要注意的是，在循環(huán)中使用let聲明變量key避免了全局變量的問題。
二、迭代順序
在ES6中，對象中的屬性是有序的，按照從添加到對象中的順序排序。使用for...in循環(huán)會按照這個順序迭代對象的屬性。但是需要注意的是，如果對象的key是字符串，那么它們的遍歷順序是不確定的。
const obj = {a: 1, b: 2, c: 3};
console.log(Object.getOwnPropertyNames(obj)); // ['a', 'b', 'c']
const arr = ['a', 'b', 'c'];
for (let key in arr) {
console.log(key); // '0' '1' '2'
console.log(arr[key]); // 'a' 'b' 'c'
}
在上面的例子中，第一個例子打印了對象的屬性名數(shù)組，按照添加的順序打印了a、b和c。第二個例子循環(huán)遍歷了一個數(shù)組，輸出了數(shù)組的下標和對應(yīng)的元素。
三、遍歷Map和Set
在ES6中，Set和Map是常用的數(shù)據(jù)結(jié)構(gòu)。使用for...in循環(huán)可以迭代它們的值，其遍歷順序與插入順序相同。
const set = new Set(['a', 'b', 'c']);
for (let val of set) {
console.log(val); // 'a' 'b' 'c'
}
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (let key of map.keys()) {
console.log(key); // 'a' 'b' 'c'
}
for (let val of map.values()) {
console.log(val); // 1 2 3
}
for (let entry of map.entries()) {
console.log(entry); // ['a', 1] ['b', 2] ['c', 3]
console.log(entry[0]); // 'a' 'b' 'c'
console.log(entry[1]); // 1 2 3
}
在上面的例子中，第一個循環(huán)遍歷了一個Set對象，輸出了Set中的元素。第二個循環(huán)遍歷了一個Map對象的key，第三個循環(huán)遍歷了一個Map對象的value，而第四個循環(huán)遍歷了一個Map對象的每一項entry，然后輸出了entry的key和value。
四、使用Symbol.iterator方法
可以在自定義對象上使用Symbol.iterator方法來使其能夠被for...of循環(huán)遍歷。
const iterableObject = {
values: [1, 2, 3],
[Symbol.iterator]() {
let index = -1;
return {
next: () => ({ value: this.values[++index], done: !(index in this.values) })
};
}
};
for (let val of iterableObject) {
console.log(val); // 1 2 3
}
在上面的例子中，自定義對象iterableObject中定義了一個values數(shù)組和一個Symbol.iterator方法。在Symbol.iterator方法中返回一個包含next()方法的迭代器對象，每次調(diào)用next()函數(shù)遍歷values數(shù)組中的值。
五、結(jié)語
通過本篇文章，我們深入探究了ES6中for...in循環(huán)的使用方法和注意事項，包括基礎(chǔ)用法、迭代順序、遍歷Set和Map以及使用Symbol.iterator方法。在實際應(yīng)用中，我們可以根據(jù)具體場景靈活使用for...in循環(huán)，提高代碼的效率和可維護性。
京公網(wǎng)安備 11010802030320號