for...in与for...of
1 for…in
for...in 语句主要用于遍历对象，遍历出对象的属性名，所有可枚举的属性（包括继承的可枚举属性）。
语法：
for (propertyName in object){
......
}
// propertyName 在每次迭代时，会被赋值为不同的属性名
// object 非Symbol类型的可枚举属性被迭代的对象
1.1 遍历 Object
for…in 输出的是对象的key，for…of 不能遍历对象。
const obj = {
a:1, b:2, c:3};
for (const key in obj) {
console.log(key); // 遍历出该对象的属性名，即key
}
// Output:
// a
// b
// c
// for...of 不能遍历对象，会报错：TypeError: obj is not iterable
for (const key of obj) {
...
}
如果只考虑对象本身的属性，而不是它的原型，可以使用 hasOwnProperty() 来判断某属性是否是对象本身的属性。
var triangle = {
a: 1, b: 2, c: 3};
function ColoredTriangle() {
this.color = 'red';
}
ColoredTriangle.prototype = triangle;
var obj = new ColoredTriangle();
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
console.log('自身属性',prop);// 继承的属性不进入
}
console.log('所有属性', prop);
}
// Output:
// 自身属性 color
// 所有属性 color
// 所有属性 a
// 所有属性 b
// 所有属性 c
备注： for...in不应该用于迭代一个关注索引顺序的 Array。for...in 是为了遍历对象而构建的，不建议与数组一起使用。
1.2 遍历 Array
for…in 输出的数组的index下标，for…of 输出的数组的每一项的值。
const arr = ['a', 'b', 'c', 'd'];
// for...in 输出的数组的下标
for (const key in arr) {
console.log(key); // 0, 1, 2, 3
}
// for...of 输出的数组的每一项的值
for (const key of arr) {
console.log(key); // a, b, c, d
}
2 for…of
for...of 语句可遍历Array、String、Map、Set等等。
2.1 遍历 Array
const arr = [10, 20, 30];
for (const value of arr) {
console.log(value);
}
// Output
// 10
// 20
// 30
2.2 遍历 String
const str = "boo";
for (let value of str) {
console.log(value);
}
// Output
// "b"
// "o"
// "o"
2.3 遍历 Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]
for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3
2.4 遍历 Set
let iterable = new Set([1, 1, 2, 2, 3, 3]);
for (let value of iterable) {
console.log(value);
}
// 1
// 2
// 3
2.5 遍历 TypedArray
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
console.log(value);
}
// 0
// 255
2.6 遍历 arguments 对象
(function() {
for (let argument of arguments) {
console.log(argument);
}
})(1, 2, 3);
// 1
// 2
// 3
3 for…of与for…in的区别
for…in 是ES5新增，for…of 是ES6新增，两个语句都是迭代一些东西，主要区别在于它们的迭代方式。
（1）都可以循环数组，for…in 输出的是数组的index下标，而for…of 输出的是数组的每一项的值。
（2）for…in 遍历对象，输出对象的key，而 for...of 不能遍历对象。
（3）for…in 语句以任意顺序迭代对象的可枚举属性。for…of 语句遍历可迭代对象的value。