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

一、proxy：

1、proxy的作用：（重点）

• 代理
• 解决跨域

2、proxy代理格式：

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

3、代理里面的方法

• get(target, { } }) 创建代理 拦截对象的读操作

• target:要代理的目标对象
• 参数也是一个对象，用来制定拦截行为

var person = {
    name: "张三",
    age: 20,
    sex: "男",
}
//创建一个代理 proxy，代理person对象
//第一个参数：要代理的对象
//第二个参数：对象的方法
var proxy = new Proxy(person, {
    get(target, property) {
    //target：所要拦截的目标对象 
    //property:属性  参数也是一个对象，用来定制拦截行为
        if (property == "age") {
            return 18
        }
    }
})
    console.log(proxy.age);//18

• set(target,property,value) 拦截对象的写操作

• value：需要修改的值

let car = {
    price: 10000,
    color: "white",
    power: "v8"
}
//创建一个代理  代理car
var proxCar = new Proxy(car, {
    //value:需要更改的值
    set(target, property, value) {
        target[property] = value//对象的属性 = 要修改的属性
    }
})
proxCar.color = "black" //修改属性的值
console.log(proxCar.color);//black

• ownKeys()拦截操作

• 拦截过滤Object.keys()对对象的属性遍历。

let person = {
    name: "老王",
    age: "40",
    height: 1.8
}
//创建一个代理对象person
let proxy = new Proxy(person, {
    //ownKeys拦截操作，拦截过滤Object.keys()对对象的属性遍历。
    ownKeys(target) {
        return ["name", "age"]
    }
})
console.log(Object.keys(person));//['name', 'age', 'height']
console.log(Object.keys(proxy));//['name', 'age']

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

var person = {
    name: "张三",
    age: 20
}
var person = new Proxy(person, {
// has( )拦截操作：拦截key in object的操作，结果会返回一个布尔值。
//has( )方法用于是判断是否含有指定的键值对，有，就返回true。否则返回false
    has(target, prop) {
        if (target[prop] === undefined) {
            return false
        } else {
            return true
        }
    }
})
// key in object  判断属性是否存在对象中
console.log("name" in Proxy);//true
console.log("aaa" in Proxy);//false

• apply()

• 除了对象类型的变量可以被代理，函数也可以被代理。
  被代理的变量是一个函数，那么还会支持一个拦截程序：apply调用。

// let fn = function () { }
let fn = () => {
    console.log(11111);
}
//创建一个代理实例，代理函数fn
let proxy = new Proxy(fn, {
    apply() {
        console.log("我是代理函数");
    }
})
proxy()//我是代理函数

• proxy.revocable方法 取消代理

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

// proxy.revocable方法
let person = {
    name: "李四",
    age: 20,
    sex: "男"
}
//revocable()返回一个对象  包括两个属性
let arr = Proxy.revocable(person, {
    get(target, property) {
        return target[property]
    }
})
//属性1：代理  属性2：取消代理
console.log(arr);//{proxy: Proxy(Object), revoke: ƒ}
console.log(arr.proxy.name);//李四
//6、revok()取消代理 会返回一个对象，
arr.revoke()
console.log(arr.proxy.name);//报错 代理被取消

二、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}

3、编码实现for…of遍历对象

var obj = {
    name: "张三",
    age: 18,
    sex: "男"
}
for (let [key,value] of Object.entries(obj)) {
    console.log(key,value);
}