zj-es6

作者: 瓩千瓦 | 来源:发表于2019-04-18 18:59 被阅读0次

    babel转换工具:把es6转换成es5

    let块级作用域

        应用场景:let解决循环变量泄露为全局变量

            var a = [];

            for (let i = 0; i < 10; i++) {

                a[i] = ()=> {

                    console.log(i);

                };

            }

            a[6]();    //  6

    const声明的是常量。值不能改变

        应用场景:

            引用第三方库声明的变量,避免重命名出现的bug

            require:nodejs的语法

            const PI = Math.PI;

            PI = 23 ;  //  报错

    箭头函数:-------> 语法糖

        let result = (i) => i + 1;

        console.log(result(4));  //5

        箭头函数带参数  写法

        超级无敌的功能:  箭头函数中的this: 谁定义this是谁

            const result = (x, y) => {    //用变量接收

                return x+y  //要有return 返回值

            }

            console.log(result(3,4));

    bind(this)

        bind会返回一个新函数,新函数在调用时,会采用bind传来的this指向

        应用场景:

            var box = document.getElementById("box");

            function a(){

                console.log(this);

            }

            a();    //window

            a.bind(box)();    //box

    增强的对象字面量:

        不用function关键字,在对象字面量里面定义原型

        应用场景:

            var human = {

                bre(){  console.log(1);} }

            human.bre();

    2、实现继承

    let boy = {

          __proto__: human,

    }

    3、 对象字面量中属性的简写

    return {

      a,

      b

    }

    __proto__ :谁使用__proto__ 函数中的this就指向谁

    class, extends,super(原型、构造函数,继承..)

        class Animal {

            constructor(name){

                this.type = name

            }

            says(say){

                console.log(this.type + ' says ' + say)

            }

        }

        let animal = new Animal('cat');

        animal.says('hello'); //cat says hello

        console.log(animal); //Animal {type: "cat", color: "red"}

        class Cat extends Animal {

        // 原型、cat 继承 为 Animal

            constructor(){

                // constructor内定义的方法和属性是实例对象

                // constructor之外定义的方法和属性是共享的。

                super();// 继承了构造方法和原型

                this.type = 'cat'

            }

        }

        let cat = new Cat();

        // console.log(cat);  //可查看本身属性和原型继承的属性

        cat.says('hello'); //cat says hello

    解构赋值(Destructuring)将值从数组,或属性从对象,提取到不同的变量中

        Stage 1----[a, b] = [10, 20]; 

            //a:  10  //b: 20

        Stage 2-------[a, b, ...rest] = [10, 20, 30, 40, 50]; 

            //展开运算符  //rest 是 [30.40.50]

        Stage 3-----({ a, b } = { a: 10, b: 20 });

            //a 10    //b 20

        Es7-----------提案中的特性

        {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};

            console.log(a); // 10

            console.log(b); // 20

            console.log(rest); // {c: 30, d: 40}

    展开运算符

        解构赋值中展开运算符只能用在最后

    默认参数值和剩余参数

        function animal(type = 'cat'){

            console.log(type) }   

        animal('dog');

        function animals(...types){

            console.log(types.length)

            console.log(types) }

        animals('cat', 'dog', 'fish')  //["cat", "dog", "fish"]

    相关文章

      网友评论

          本文标题:zj-es6

          本文链接:https://www.haomeiwen.com/subject/ebxxgqtx.html