不同点:
时间点不同:for in 在js出现之初就有,for of出现在ES6之后
遍历的内容不同:for in用于遍历对象的可枚举属性(包括原型链上的可枚举属性),for of用于遍历可迭代对象的值
看个例子
// for in
const arr = ['a','b','c','d']
for(const index in arr) {console.log(index)
}
// 打印结果:'0' '1' '2' '3',可以发现打印的是数组的下标,数组是特殊的对象,下标是数组对象身上的可枚举属性,打印的就是这个可枚举属性// for of
for(const item of arr) {console.log(item)
}
// 打印结果:'a' 'b' 'c' 'd',for of打印的就是数组里的每一项元素的值
可枚举属性
通过Object.getOwnPropertyDescriptor(obj, property),可以拿到属性描述符
// 还是以数组为例,获取数组的属性'0'
console.log(Object.getOwnPropertyDescriptor(['a'],'0'))
/*** {* configurable: true,* enumerable: true,* value: "a",* writable: true* }*/
/* 可以看到返回了一个对象,这个对象就是属性描述符,属性描述符的属性一般被称为特性,可以看到,第二个特性enumerable就代表属性是否可枚举可枚举的属性就可以通过for in与Object.keys遍历,数组身上有一个length属性,但上面我们用for in 循环的时候并没有打印length,说明length属性是一个不可枚举属性,我们来看一下length属性的属性描述符:
*/
console.log(Object.getOwnPropertyDescriptor(['a'],'length'))
/*** {* configurable: false,* enumerable: false,* value: 1,* writable: true* }*/
// 可以看到数组身上的length属性的属性描述符里,enumerable为false,它是一个不可枚举属性,属性描述符还有其他的特性,此处就不展开描述了,感兴趣可以自行查阅
可迭代对象
实现了[Symbol.iterator]方法的对象,就被称为可迭代对象
对象进行for…of循环时,会调用Symbol.iterator方法,返回该对象的默认遍历器
ES6 规定,默认的 Iterator 接口部署在数据结构的Symbol.iterator属性,或者说,一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”(iterable)
链接: link
const obj = {[Symbol.iterator] : function () {return {next: function () {return {value: 1,done: true};}};}
};
上面的代码中,对象obj是可遍历的(iterable),因为具有Symbol.iterator属性。执行这个属性,会返回一个遍历器对象。该对象的根本特征就是具有next方法。每次调用next方法,都会返回一个代表当前成员的信息对象,具有value和done两个属性
所以,对象只要实现了[Symbol.iterator]方法,就是可迭代的,即可使用for…of遍历
原生具备 Iterator 接口的数据结构如下
Array
Map
Set
String
TypedArray
函数的 arguments 对象
NodeList 对象
案例:数组的Symbol.iterator属性
let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }
实现[Symbol.iterator]方法好麻烦,怎么这么复杂,于是有Generator 函数
Generator函数可以直接返回一个遍历器对象
由于 Generator 函数就是遍历器生成函数,因此可以把 Generator 赋值给对象的Symbol.iterator属性,从而使得该对象具有 Iterator 接口
var myIterable = {};
myIterable[Symbol.iterator] = function* () {yield 1;yield 2;yield 3;
};[...myIterable] // [1, 2, 3]
for(const item of myIterable){console.log(item)} //1,2,3
上面代码中,Generator 函数赋值给Symbol.iterator属性,从而使得myIterable对象具有了 Iterator 接口,可以被…运算符和for…in遍历了
async await,async await就是生成器函数的语法糖,配合promise,用生成器函数加yield也可以实现async await同样的效果
参考:链接: link
链接: link