for ... in 与for ... of 区别
for ... of 的出现是因为ES6的Map,Set类型无法使用下标进行遍历,为了统一集合类型,ES6标准引入了新的iterable
类型,Array
、Map
和Set
都属于iterable
类型,具有iterable
类型的集合可以通过新的for ... of
循环来遍历。
举个栗子:
var a = ['A', 'B', 'C']; var s = new Set(['A', 'B', 'C']); var m = new Map([[1, 'A'], [2, 'B'], [3, 'C']]); for (var x of a) { // 遍历Array console.log('数组中每个元素', x); } for (var x of s) { // 遍历Set console.log('set中每个元素', x); } for (var x of m) { // 遍历Map console.log('key', x[0], ' value', x[1]); } 结果: 数组中每个元素 A 数组中每个元素 B 数组中每个元素 C Set中每个元素 A Set中每个元素 B Set中每个元素 C key 1 value A key 2 value B key 3 value C
那么,for ... in 与 for ... of 的区别在哪里呢
其实,for ... in 实际上遍历的是对象的属性,遍历数组的时候把数组的索引当作了属性名,但是我们手动给数组新增一个属性的时候
举个栗子:
var a = ['A', 'B', 'C']; a.type = 'array'; for (var x in a) { console.log('数组中每个元素', x); } 结果: 数组中每个元素 0 数组中每个元素 1 数组中每个元素 2 数组中每个元素 type
显然,这样的结果不是我们想要的,因为for ... in包含了type却没有包含length属性
for ... of修复了for ... in的遗留问题,for ... of只会遍历数组本身的元素
举个栗子:
var a = ['A', 'B', 'C']; a.type = 'array'; for (var x of a) { console.log('数组中每个元素', x); } 结果: 数组中每个元素 A 数组中每个元素 B 数组中每个元素 C