js - 关于 for...in 与 for...of 的个人理解

不知道大家是不是有过被问过 for…in 与 for…of 之间区别，这里就奉上我对 for…in 与 for…of 的理解。

初始数据：

let arr = [ 1 ,2, 3 ];
let obj = {
    code : 1,
    id : 2,
    name : 3
};

for…in

语法本身可遍历数组也可遍历对象。

遍历数组 arr：

for(let i in arr){
    console.log(i)
}
// 0
// 1
// 2

遍历对象 obj：

for(let i in obj){
    console.log(i);
}
// code
// id
// name

由此得出 这个 i 的值应该是 数组/对象 的 键

for…of

语法本身只能遍历数组。

遍历数组 arr：

for(let i of arr){
    console.log(i)
}
// 1
// 2
// 3

输出了所有的值

遍历对象 obj：

for(let i of obj){
    console.log(i);
}
// TypeError: obj is not iterable
//    at Object.<anonymous> (C:\Users\Administrator\Desktop\xxxx\demo.js:22:14)
//    at Module._compile (internal/modules/cjs/loader.js:1063:30)
//    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
//    at Module.load (internal/modules/cjs/loader.js:928:32)
//    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
//    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
//    at internal/main/run_main_module.js:17:47

用 for…of 遍历对象看来是搁浅了。

那为什么有了 for…in 后还要来个 for…of 呢 ？

for…in功能不是很强大么？既能遍历数组又能遍历对象。
其实for…in 有一个不是很友善的缺陷，即：

let obj={
    code:1,
    id:2,
    name:3
};
Object.prototype.__a=11
for(let i in obj){
    console.log(i);
}
// code
// id
// name
// __a

它会把新加入原型上的东西一并拉进来，当然也可以通过hasOwnProperty的方式解决，即：

let obj={
    code:1,
    id:2,
    name:3
};
Object.prototype.__a=11
for(let i in obj){
	if(obj.hasOwnProperty(i)){
	    console.log(i);
	}
}
// code
// id
// name

就是通过 hasOwnProperty 的方法确认 i 是否为原型上的属性，不是时才打印。但是多了一层处理就难受的不行……

for…of就不会有这个问题。但是for…of常规使用无法获取键，就需要如下操作：

for(let [i,v] of arr.entries()){
    console.log(i,v)
}
// 0 1
// 1 2
// 2 3

数组后面加一个 entries() 方法后 前面的参数就是一个个数组。结构后第一个值为项的键，第二个值为值。

但是 for…of 居然不能遍历对象，那岂不是不能完美替换for…in？

接下来有请 Object 的两位扛把子:keys、values:

for(let i of Object.keys(obj)){
    console.log(i)
}
// code
// id
// name
for(let i of Object.values(obj)){
    console.log(i)
}
// 1
// 2
// 3

所以我个人更推荐使用 for…of

如果有更漂亮的写法欢迎来讨论，让我们一起有条不紊的持续进步。
喜欢的话不妨点个小小的赞与关注，您的赞与关注将是我源源不断的前进动力。