for...in 与 for...of 简单对比
| for...in | for...of | |
|---|---|---|
| 数组 | 遍历项为索引（index） | 遍历项为元素值 |
| 对象 | 遍历项为属性名（key） | 不能直接使用 |
一、遍历数组
1.1 for 循环
JavaScript 提供多种遍历数组的语法，最原始的写法就是for循环。
const arr = ["a", "b", "c"];
for(let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
1.2 forEach 循环
for循环写法比较麻烦，因此数组提供内置的forEach方法。
这种写法的问题在于，无法中途跳出forEach循环，break命令或return命令都不能奏效。
arr.forEach((value, index) => {
console.log(index, value);
});
1.3 for...in 循环
for...in循环可以遍历数组的键名(index)，主要是为遍历对象而设计的，不适用于遍历数组。
const arr = ["a", "b", "c"];
for (let index in arr) {
console.log(index, arr[index]);
}
// 输出：
0 a
1 b
2 c
1.4 for...of 循环
for...of循环可以遍历数组的键值（value）。能与break、continue和return配合使用。
const arr = ["a", "b", "c"];
for (let value of arr) {
if (value === "c") {
break; // 跳出循环
}
console.log(value);
}
// 输出：
a
b
1.5 keys()、values() 和 entries()
ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。
注意：区别于对象写法 Object.keys()、Object.values()、Object.entries()
const arr = ["a", "b", "c"];
for (const key of arr.keys()) {
console.log(key);
}
// 输出（索引）：
0
1
2
for (const value of arr.values()) {
console.log(value);
}
// 输出（值）：
a
b
c
for (const [index, value] of arr.entries()) {
console.log(index, value);
}
// 输出（索引 + 值）：
0 a
1 b
2 c
二、遍历对象
2.1 for...in 循环
只能获得对象的键名，不能直接获取键值。
const obj = { a: 3, b: 4, c: 5 };
for(const key in obj) {
console.log(key);
}
// 输出：
a
b
c
2.2 for...of 循环 + Object.keys() | Object.values() | Object.entries()
对于普通的对象，for...of结构不能直接使用，会报错，必须部署了 Iterator 接口后才能使用。
const obj = { a: 1, b: 2, c: 3 };
for (const x of obj) {
console.log(x);
}
// 报错 TypeError: obj is not iterable
ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作为遍历一个对象的补充手段，供for...of循环使用。
let obj = { a: 1, b: 2, c: 3 };
for (let key of Object.keys(obj)) {
console.log(key); // 'a', 'b', 'c'
}
for (let value of Object.values(obj)) {
console.log(value); // 1, 2, 3
}
for (let [key, value] of Object.entries(obj)) {
console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}
2.3 扩展 -- 对象属性的遍历
ES6 一共有 5 种方法可以遍历对象的属性。
（1）for...in
for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。
（2）Object.keys(obj)
Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。
（3）Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。
（4）Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。
（5）Reflect.ownKeys(obj)
Reflect.ownKeys返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。
以上的 5 种方法遍历对象的键名，都遵守同样的属性遍历的次序规则。
- 首先遍历所有数值键，按照数值升序排列。
- 其次遍历所有字符串键，按照加入时间升序排列。
- 最后遍历所有 Symbol 键，按照加入时间升序排列。
