随时记|for of 和 for in的区别

for of 和 for in的区别

数组

for of 打印数组内的元素
for in 打印数组元素的index （string） 再用index去索引得到元素，相比于for of有种多次一举的感觉

const arr = [1,2,3,4];

for (let i in arr) {
    console.log('i',i);   // 0 1 2 3
    console.log(arr[i]);  // 1 2 3 4
};

for (let j of arr) {
    console.log('j', j);   // 1 2 3 4
};

for in 还有一个缺点，我们看下面这个例子：

Array.prototype.fn = function(){};   // 我们给数组的原型上绑定一个fn函数
const arr = [1,2,3,4];

for (let i in arr) {
    console.log(arr[i]);  // 1 2 3 4 [Function (anonymous)]
};

不难看出，for in会把原型链上的函数给遍历出来
其实我在另一篇博文（随时记|生疏的前端知识点_JS（二））中提到过：解决遍历对象时，把原型上的属性遍历出来了怎么办？使用hasOwnProperty进行判断，于是，我们可以这样写：

for (let i in arr) {
    if (arr.hasOwnProperty(i)) {
        console.log(arr[i]);   // 1 2 3 4
    }
};

// 也可以简写：
for (let i in arr) {
    arr.hasOwnProperty(i) && console.log(arr[i]);
};

但是for in真的那么鸡肋吗？我们继续看下面的例子：

对象

const obj = {
    name: 'Katrina',
    age:18,
    gender: 'female',
};


for (let i in obj) {
    console.log(i);   // name age gender
}

for (let i of obj) {
    console.log(i)  // TypeError: obj is not iterable 
}

说明：for of 对于遍历obj是无效的，正确写法应该如下：

for (let i of Object.keys(obj)) {
    console.log(i)  // nam age gender
}

for (let i of Object.values(obj)) {
    console.log(i) // Katrina 18 female
}

总结

1. 遍历数组：for of 遍历对象：for in
2. 遍历数组时：for of直接得到数组内的元素 for in 得到数组内元素的索引
3. 遍历对象时： for in 直接得到对象的key，而直接使用for of则会报错，应该使用for of Object.keys(obj) 或者for of Object.values(obj)