for...of 和 for...in 循环

for of 循环

循环一个数组

let arr = ['China', 'America', 'Korea']
for (let o of arr) {
    console.log(o) //China, America, Korea
}

循环一个普通对象（报错）

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of obj) {
    console.log(o)   //Uncaught TypeError: obj[Symbol.iterator] is not a function
}

一个数据结构只有部署了 Symbol.iterator 属性, 才具有 iterator接口可以使用 for of循环。例子中的obj对象没有Symbol.iterator属性 所以会报错。
哪些数据结构部署了 Symbol.iteratoer属性了呢?

• 数组 Array
• 数组 Array
• Map
• Set
• String
• arguments对象
• Nodelist对象, 就是获取的dom列表集合

如果想让对象可以使用 for of循环怎么办?使用 Object.keys() 获取对象的 key值集合后,再使用 for of

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.keys(obj)) {
    console.log(o) // a,b,c,d
}

或者使用内置的Object.values()方法获取对象的value值集合再使用for of

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.values(obj)) {
    console.log(o) // 1,2,3,4
}

循环一个字符串

let str = 'love'
for (let o of str) {
    console.log(o) // l,o,v,e
}

循环一个Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

循环一个Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

for of 循环获取index值

entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。
迭代对象中数组的索引值作为 key， 数组元素作为 value。

for (let [index,value] of radioList.entries()) {
	console.log(value);
	console.log(index);
}

for in 循环

循环遍历的值都是数据结构的键值

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o in obj) {
    console.log(o)    //遍历的实际上是对象的属性名称 a,b,c,d
    console.log(obj[o])  //这个才是属性对应的值1，2，3，4
}