一、基礎(chǔ)用法
ES6中的for...in循環(huán)與ES5中的for...in有所區(qū)別。在ES5中，使用for...in循環(huán)來(lái)迭代對(duì)象的屬性，在迭代時(shí)，可以遍歷對(duì)象的自有屬性和繼承屬性。在ES6中，使用for...in循環(huán)遍歷對(duì)象的屬性時(shí)，只遍歷對(duì)象的自有屬性，不會(huì)遍歷繼承屬性。
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)遍歷了對(duì)象obj中的屬性，并打印出了屬性名和屬性值。需要注意的是，在循環(huán)中使用let聲明變量key避免了全局變量的問(wèn)題。
二、迭代順序
在ES6中，對(duì)象中的屬性是有序的，按照從添加到對(duì)象中的順序排序。使用for...in循環(huán)會(huì)按照這個(gè)順序迭代對(duì)象的屬性。但是需要注意的是，如果對(duì)象的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'
}
在上面的例子中，第一個(gè)例子打印了對(duì)象的屬性名數(shù)組，按照添加的順序打印了a、b和c。第二個(gè)例子循環(huán)遍歷了一個(gè)數(shù)組，輸出了數(shù)組的下標(biāo)和對(duì)應(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
}
在上面的例子中，第一個(gè)循環(huán)遍歷了一個(gè)Set對(duì)象，輸出了Set中的元素。第二個(gè)循環(huán)遍歷了一個(gè)Map對(duì)象的key，第三個(gè)循環(huán)遍歷了一個(gè)Map對(duì)象的value，而第四個(gè)循環(huán)遍歷了一個(gè)Map對(duì)象的每一項(xiàng)entry，然后輸出了entry的key和value。
四、使用Symbol.iterator方法
可以在自定義對(duì)象上使用Symbol.iterator方法來(lái)使其能夠被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
}
在上面的例子中，自定義對(duì)象iterableObject中定義了一個(gè)values數(shù)組和一個(gè)Symbol.iterator方法。在Symbol.iterator方法中返回一個(gè)包含next()方法的迭代器對(duì)象，每次調(diào)用next()函數(shù)遍歷values數(shù)組中的值。
五、結(jié)語(yǔ)
通過(guò)本篇文章，我們深入探究了ES6中for...in循環(huán)的使用方法和注意事項(xiàng)，包括基礎(chǔ)用法、迭代順序、遍歷Set和Map以及使用Symbol.iterator方法。在實(shí)際應(yīng)用中，我們可以根據(jù)具體場(chǎng)景靈活使用for...in循環(huán)，提高代碼的效率和可維護(hù)性。
京公網(wǎng)安備 11010802030320號(hào)