Javascript学习之路：如何理解 for of、for in 和可枚举属性、可迭代对象的关系？

for in 和 for of 的区别

• for in 用于获取键名，可以通过对普通对象，遍历其可枚举属性包括原型，获取键名，也可以应用于数组循环返回的是数组的下标、数组的属性、原型上的方法和属性，但是会出现一下问题： 1.index索引为字符串型数字,不能直接进行几何运算 2.遍历顺序有可能不是按照实际数组的内部顺序 3.使用for in会遍历数组所有的可枚举属性,包括原型。
• for of用于获取键值, 可以对"可迭代对象(iterable)"循环迭代，获取其键值

示例：
const obj={a:1}
for(var val of obj){
  console.log(val)
}
for of 对obj遍历会报错（obj is not iterable）

什么是可枚举属性?

属性描述符的enumerable这个属性值为true

示例：
const obj={a:1,b:2}
Object.defineProperty(obj,"a",{
	 enumerable:false  //a设置为不可枚举属性
})
for(var key in obj){
  console.log(val)
}

可迭代对象

什么是可迭代对象？

一个可迭代对象必须实现iterator这个方法，并且还需要一个next方法，在迭代器内部会不断的调用next方法，直到返回结果是done这个属性，这个属性的值为true才会停止。

可迭代对象有哪些？

Array Map Set String

Array 数组 创建数组的三种方式

//方法1
var myArr=new Array()
myArr[0]="saab"
myArr[1]="volvo"
myArr[2]="bmw"
//方法2
var myArr=new Array('saab','volvo','bmw')
//方法3
var myArr=["saab",'volvo','bmw']

Set 集合

• ES6提供了新的数据结构，内部成员的值唯一
• Set本身是一个构造函数，用来生成Set数据结构
• Set函数 可以接受一个数组(或者具有iterable接口的其他数据结构)作为参数，用来初始化。
  let set=new Set()
  add(value) 添加某个值 返回set结构本身

set.add('huwenhao').add('zhangqian').add('zhangmingyu').add('wuxuan')

size 返回成员总数

console.log(set.size) //4

内部成员值唯一

console.log(set.add('huwenhao'))//‘huwenhao’ 被添加两次
console.log(set.size) //4

delete(value) 返回布尔值

console.log(set.delete('huwenhao')) //true
console.log(set.size) //3

has(value) 返回布尔值 表示是否有该值

console.log(set.has('huwenhao')) //false

clear()清除所有成员 没有返回值

console.log(set.clear())
console.log(set)

拓展

// Array.from 可以将所有的可迭代对象和类数组都变成数组  不改变原set
var set1=Array.from(set)
console.log(set)

map

1. ES6提供的新的数据结构
2. 它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 结构提供了“值—值”的对应。
   
   const map=new Map()
   set(key value)
   set方法设置键名key对应的键值为value，然后返回整个Map结构，如果key已经有值，则键值会被更新，否则就新生成该键，返回的是当前的Map对象。(链式写法)

map.set('foo',true)
map.set('bar',false)

map.size

console.log(map.size)

get(key)
get方法读取key对应的键值，如果找不到key，返回undefined。

console.log(map.get(262))   // true
console.log(map.get('262')) // undefined

has(key)
返回一个布尔值，表示某个键是否在当前 Map 对象之中。

console.log(map.has(277)) //false
console.log(map.has(262))  //true

delete(key)
删除某个键，返回true。如果删除失败，返回false

map.delete(262)

clear()
clear方法清除所有成员，没有返回值。

map.clear()