js:for ...of与 for... in

  • for…in遍历对象的属性或数组索引(ES5)

eg1:遍历数组

1
2
3
4
5
var arr=['a','b','c','d'];
for(let index in arr){
console.log(index);// 0 1 2 3
console.log(arr[index]);// a b c d
}

eg2:遍历对象

1
2
3
4
5
6
7
8
9
var obj={
name:"Jin",
age:11,
[Symbol()]:123,
}
for(let index in obj){
console.log(index);//name age
console.log(obj[index]);//Jin 11
}

eg3:遍历对象的顺序

1
2
3
4
5
6
7
8
9
10
var obj={
"49":"A",
"a":"tt",
"5":false,
"1":"ss",
}
for(let index in obj){
console.log(index);//1 5 49 a
console.log(obj[index])//ss false A tt
}

for…in的要点

-不支持IE浏览器(IE9以下的)
-遍历的顺序可能不是实际的内部顺序(先遍历出整数属性,按照升序),然后其他属性按照创建时的顺序遍历出来
-for in会遍历数组所有的可枚举属性,包括原型中存在的属性(object.prototype添加的属性)
-for in一般用于遍历对象属性
-for in无返回值
-Symbol 作为属性名,该属性不会出现在for…in、循环中
  • for…of可遍历数组,Set,Map,类数组对象(eg:arguments,DOM NodeList对象,字符串)(ES6)不能遍历对象

eg1:遍历数组

1
2
3
4
5
var arr=['a','b','c','d'];
for(let key of arr){
console.log(key);// a b c d
console.log(arr[key]); //undefined undefined undefined undefined
}

eg2:遍历对象

1
2
3
4
5
6
7
8
9
var obj={
"49":"A",
"a":"tt",
"5":false,
"1":"ss",
}
for(let key of obj){//报错
console.log(index);
}

eg3:for of与Object.keys()遍历对象

1
2
3
4
5
6
7
8
var obj={
name:"Jin",
age:11,
}
for(let value of Object.keys(obj)){
console.log(value);//name age
console.log(obj[value]);//Jin 11
}

eg4:for of与Object.keys()遍历数组索引

1
2
3
4
5
var arr=['a','b','c'];
for(let value of Object.keys(arr)){
console.log(value);//0 1 2
console.log(arr[value]);// a b c
}

eg4:for of与Object.entries()遍历索引和值

1
2
3
4
5
6
var arr=['a','b','c'];
for(let [index,value] of Object.entries(arr)){
console.log(index);//0 1 2
console.log(value);//a b c
console.log(arr[index]);//a b c
}

eg5:for of与Object.values()遍历属性值

1
2
3
4
5
6
var arr=['a','b','c'];
for(let [index,value] of Object.values(arr)){
console.log(index);//a b c
console.log(value);//undefined undefined undefined
console.log(arr[index]);//undefined undefined undefined
}

for…of的要点:

-for of其实遍历的是对象的Symbol.iterator属性,而对象没有该属性
-不会遍历到对象属性和原型属性
-如果要遍历对象,可与Object.keys()配合使用
-配合Object.entries() 输出数组索引和元素值/对象的属性和属性值,但Symbol()属性会忽略
-配合Object.values() 输出数组元素值/对象属性值,
-一般用于遍历数组或者伪数组
-无返回值
-Symbol 作为属性名,该属性不会出现在for…in、for…of循环中,也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回
  • Iterator(遍历器)与for…of

  • 遍历器(Iterator) 它是一种接口,为各种不同的数据结构(Array,Object,Set,Map)提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。
  • Iterator 的作用
    一是为各种数据结构,提供访问接口;二是使得数据结构的成员能够按某种次序排列;三是 ES6 创造了一种新的遍历命令for…of循环,当使用for…of循环遍历某种数据结构时,该循环会自动去寻找 Iterator 接口。
  • Iterator 的遍历过程
  1. 创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。
  2. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。
  3. 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。
  4. 不断调用指针对象的next方法,直到它指向数据结构的结束位置。每一次调用next方法,都会返回数据结构的当前成员的信息。具体来说,就是返回一个包含value和done两个属性的对象。其中,value属性是当前成员的值,done属性是一个布尔值,表示遍历是否结束。
  • ES6 规定,默认的 Iterator 接口部署在数据结构的Symbol.iterator属性,或者说,一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”Symbol.iterator属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。执行这个函数,就会返回一个遍历器。

  • 原生具备 Iterator 接口的数据结构

  1. Array
  2. Map
  3. Set
  4. String
  5. TypedArray
  6. 函数的 arguments 对象
  7. NodeList 对象
  • 对象(Object)之所以没有默认部署 Iterator 接口,是因为对象的哪个属性先遍历,哪个属性后遍历是不确定的,需要开发者手动指定。
  • 会默认调用 Iterator 接口场合
  1. 解构赋值
  2. 扩展运算符
  3. yield*
  4. for…of
  5. Array.from()
  6. Map()
  7. Set()
  8. WeakMap()
  9. WeakSet()(比如new Map([[‘a’,1],[‘b’,2]]))
  10. Promise.all()
  11. Promise.race()
-------------本文结束感谢您的阅读-------------