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

    babel转换工具:把es6转换成es5 let块级作用域 应用场景:let解决循环变量泄露为全局变量 ...

网友评论

      本文标题:zj-es6

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