3、proxy、for...of、iterator遍历器以及原理

一、proxy：

1、proxy的作用：（重点）

代理
解决跨域

2、proxy代理格式：

// target:要代理的对象   property:对象里的方法
let proxy = new Proxy(target, property);

3、代理里面的方法

get(target,property)

创建代理

set(target,property,value)

ownKeys拦截操作

has( )拦截操作：拦截key in object的操作，结果会返回一个布尔值。

proxy.revocable方法

会返回一个对象，对象中含有一个proxy属性，它就是Proxy的代理实例对象；
还有一个revoke属性，它是一个方法，用于取消代理。

let car = {
    price: 100000,
    color: "white",
    power: "v8"
}
//1、创建一个Proxy代理实例------------------------
let proxyCar = new Proxy(car, {
//参数1:要代理的对象 参数2:对象的方法
get(target, property) {
    if (property == "price") {
        return "车是120000，但是可以给你优惠，给你15000的优惠，车就是105000"
    } else {
        return target[property]
    }
},
//2、修改属性的值--------------------------------
//value:需要更改的值
set(target, property, value) {
    target[property] = value
},
// 3、ownKeys拦截操作，拦截过滤拦截过滤Object.keys()对对象的属性遍历-----------
ownKeys() {
    return ['price', 'color']
},
// 4、has( )拦截操作：拦截key in object的操作，结果会返回一个布尔值。
has(target, property) {
    // 输出：{price: 100000, color: 'black', power: 'v8'} 'price'
    if (target[property] === undefined) {
        return false
    }
    return true
}
//输出：车是120000，但是可以给你优惠，给你15000的优惠，车就是105000
console.log(proxyCar.price);//1、get()输出

console.log(proxyCar.color);//white
proxyCar.color = "black"  //2、set()输出
console.log(proxyCar.color);//black
//3、ownKeys()拦截操作-----------
console.log(Object.keys(proxyCar));//['price', 'color'] 
// key in object  判断属性是否存在对象中
console.log('price' in proxyCar);//false
//5、revocable()返回一个对象  包括两个属性-----------------
let carProxy = Proxy.revocable(car, {
    get(target, property) {
        return target[property]
    }
})
console.log(carProxy);//{proxy: Proxy(Object), revoke: ƒ}
console.log(carProxy.proxy.price);//10000
//6、revok()取消代理 会返回一个对象，
carProxy.revoke()------------------
console.log(carProxy.proxy.price);//报错 代理被取消

除了对象类型的变量可以被代理，函数也可以被代理。

如果被代理的变量是一个函数，那么还会支持一个拦截程序：apply调用。

二、for…of

可以跳出当前循环

1、可遍历对象：可以被for…of遍历的对象

数组、字符串、伪数组、Set、Map（不包括对象）

var arr = [1,2,3,4]
for (let [key,value] of arr.entries()) {
	console.log(key,value)//键和值都可以输出
}

for (let key of arr) {//获取索引  
    if (key == 2) {
        continue//索引为2  可以跳出当前循环
    }
    console.log(key);//1 3 4
}

支持字符串的遍历

let word = "我是前端君"
for(let w of word){
	console.log(w)//我 是 前 端 君
}

用for of输出值索引

var arr = [1, 2, 3, 4, 5]
for (let key of arr.keys()) {
    console.log(key);//索引
}
for (let value of arr.values()) {
    console.log(value);//值
}
for (let [key, value] of arr.entries()) {
    console.log(key, value);//输出值和索引
}

2、iterator遍历器

为什么不能遍历对象

因为对象上面没有(Symbol.iterator)方法

console.log(Array.prototype);
console.log(String.prototype);
console.log(Set.prototype);
console.log(Map.prototype);
console.log(Object.prototype);//没有有(Symbol.iterator)方法

iterator原理

当可遍历对象被for…of遍历的时候，[Symbol.iterator]()就会被调用，返回一个iterator对象。

var arr =[1,2,3]
let item = arr[Symbol.iterator]()//唯一值要加【】
console.log(item);//Array Iterator {}

for…of原理

当可遍历对象被for…of遍历的时候，[Symbol.iterator]()就会被调用，返回一个iterator对象。
iterator对象里面有一个next()方法，调用next()方法，返回一个对象，对象里面有value和done属性，一直到done为true的时候结束执行

var arr =[1,2,3]
let item = arr[Symbol.iterator]()//唯一值要加【】
console.log(item);//Array Iterator {}
console.log(item.next());//{value: 1, done: false}
console.log(item.next());//{value: 2, done: false}
console.log(item.next());//{value: 3, done: false}
console.log(item.next());//{value: undefined, done: true}
console.log(item.next());//{value: undefined, done: true}