箭头函数、迭代器和生成器

箭头函数

将function去掉,在小括号后面加上"=>"

 ((a) => {
    console.log(a);
    console.log("我是箭头函数1");
  })
  (123)

  var fun1 = () => {
    console.log("我是箭头函数2");
  }
  fun1()

箭头函数的特点:

    1.参数只有一个,可以省略小括号

let demo= x =>{
    console.log(x);  //1
}
demo(1)

    2.当return只有一条语句时,可以省略小括号

let demo2 = (x,y) =>x
console.log(demo2(4));  //4

    3.箭头函数没有arguments内置对象

let demo3 = function(){
    console.log(arguments);//Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
}
let demo4 = () =>{
    // console.log(arguments);  //guments is not defined
 
}
demo3()
demo4()

    4.箭头函数不能写构造函数

let Per = function(){

}
let p1 = new Per()
console.log(p1);  //Per {}

let Per2 = () => {

}

    5.箭头函数没有prototype属性

 console.log(Per.prototype);  //{constructor: ƒ}
 console.log(Per2.prototype);  //undefined

    6.call和apply能调用箭头函数,但是不能改变this.指向

var obj = {
        name: 'zs'
    }
    let demo6 = function () {
        console.log(this);
    }
    demo6()  //window
    demo6.call(obj)  //{name: 'zs'}
    demo6.apply(obj)  //{name: 'zs'}

    let demo7 = () => {
        console.log(this); //window
    }
    demo7()  //window
    demo7.call(obj)  //window
    demo7.apply(obj)  //window

    7.箭头函数的this指向父作用域.(定义它的地方)

var obj = {
        getName: () => {
            console.log(this);//window
            let demo = () => {
                console.log(this);//window
            }
            demo()
        }
    }
    obj.getName()

symbol数据类型

1.symbol声明的变量都是独一无二的

 console.log(typeof Symbol("a")== Symbol("a"));  //false

2.创建symbol的初衷, 解决对象的属性名重复问题

var x = Symbol("x")

    var y = Symbol("y")

    var obj= {

        x:1,

        y:2,

        [x]:3,

        [y]:4

    }

    console.log(obj);  //{x: 1, y: 2, Symbol(x): 3, Symbol(y): 4}

    console.log(obj.x);  //1

    console.log(obj[x]);  //3

3.for...in 不能获取到Symbol类型的属性名

 for (key in obj){

        console.log(key);  //(x,y)

    }

4.Object.getOwnPropertySymbols函数   只能获取Symbol类型的属性名

console.log(Object.getOwnPropertySymbols(obj));  //[Symbol(x), Symbol(y)]

5.Reflect.ownKeys函数   获取全部类型的属性名

 console.log(Reflect.ownKeys(obj));  //['x', 'y', Symbol(x), Symbol(y)]

6.Object.keys(obj)  不能获取到Symbol类型的属性名

    console.log(Object.keys(obj));  //['x', 'y']

7.Symbol.for函数  在全局中寻找Symbol.for参数名的值,有就返回,没有就创建

 var sy3 = Symbol.for("sy1")

    var sy4 = Symbol.for("sy1")

    console.log(sy3);  //Symbol(sy1)

    console.log(sy4);  //Symbol(sy1)

    console.log(sy3==sy4);  //true

8.Symbol.keyfor函数  在全局中寻找以Symbol.for创建的key值,没有就返回undefined

console.log(Symbol.keyFor(sy3));  //sy1

    console.log(Symbol.keyFor(sy1));  //sy1 is not defined

proxy的作用

代理

var house = { size: 1000, price: 20000, info: "环境优美,价格便宜" }
    var housePro = new Proxy(house, {
        // 第一个参数:代理的属性
        // 第二个参数:打印获取的属性
        // get()   获取
        get(target, pro) {
            if (pro == "size") {
                return "1000平,公摊小"
            }
            return target[pro]
        },
        // set()  设置
        set(target, pro, value) {
            target[pro] == value
        },
        // ownKeys()  拦截过滤Object.Keys()对象的属性遍历
        ownKeys() {
            return ["size", "info"]
        },
        //  has() 拦截key in value 的操作,结果返回一个布尔类型的值
        has(target,pro){
            if(target[pro] == undefined ){
                return false
            }
            return true
        }
    })

Proxy.revocable()  取消代理,返回一个对象,且有proxy属性,就是Proxy的代理实例对象.还有一个revoke属性是一个方法,用于取消代理

var houseRev = Proxy.revocable(house,{
        get(target,pro){
            return target[pro]
        }
    })
    console.log(houseRev);  //{proxy: Proxy(Object), revoke: ƒ}
    console.log(houseRev.proxy.size);  //1000
    houseRev.revoke()
    console.log(houseRev.proxy.size);  //Cannot perform 'get' on a proxy that has been revoked

for...of使用

 1.for...in 代码不简洁

2.forEach  不能跳出循环,

3....扩展运算符  不能拿到索引

4.for...of 代码简洁,key和value可以分开遍历,可以跳出循环可以遍历数组,伪数组,字符串,set,map

Iterator遍历器

对象上没有Symbol.iterator方法所以不鞥被for...of遍历

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

for...of的原理:    当可遍历对象被for...of遍历的时候，[Symbol.iterator]()就会被调用，返回一个iterator对象。这个对象里面有一个next方法,调用next方法返回一个对象，这个对象里面有value done,一直到done为true的时候结束循环。

    var arr = [1, 2, 3, 4]
    var ite = arr[Symbol.iterator]()
    console.log(ite.next());  //{value: 1, done: false}
    console.log(ite.next());  //{value: 2, done: false}
    console.log(ite.next());  //{value: 3, done: false}
    console.log(ite.next());  //{value: 4, done: false}
    console.log(ite.next());  //{value: undefined, done: true}

Generator函数

生成器函数

unction* fn() {
yield ****
}

先返回一个对象,对象里面有一个next()方法.返回一个对象{value:yield后面的数据}

 yield和return的区别

          yield:暂停执行,调用next()方法继续执行

          return:结束执行

 next方法接受参数  next( )方法还可以接受一个参数，它的参数会作为上一个yield的返回值，

在生成器函数里调用生成器函数  yield*