如何理解 for of、for in 和可枚举属性、可迭代对象的关系?

479 阅读3分钟

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()