我的es6总结

Posted 2020-11-25 jlfw

一. es6编译环境搭建

1 . 初始化 npm 创建package.json文件

    npm init

2. 安装webpack

    cnpm install webpack -D

3. 安装babel相关包来编译es6 语法

    cnpm install babel-loader babel-core babel-preset-es2015 -D

二、 写webpack.config.js配置文件，配置编译es6

1. loader相关配置

        module.exports = {
            entry:‘./entry.js‘,
            output:{
                filename:‘./bundle.js‘
            },
            module:{
                loaders:[
                    {
                        test:/.js$/,
                        loader:‘babel-loader‘,
                        exclude:/node_modules/
                    }
                ]
            }
        }

2. 创建.babelrc配置文件

        {
            "presets": ["es2015"]
        }

三、es6的遍厉和...替代anguments

1 遍厉对象和替代anguments

{
     function test3(...arg){
         for(let v of arg){
             console.log("rest",v);
         }
     }
     test3(1,2,3,4,5,"a");
 }

2. es6的遍厉对象，Object.entries

 {
     let test ={x:1,y:456};
          for(let [key,value] of Object.entries(test)){
              console.log([key,value]);
          }
 }

四、类的继承class。

补充：普通方法是实例化出来的对象，静态方法属于类，亦可以被继承。

1.类的基本定义生成实例

{
    class Person{
        //构造函数。
        constructor(name = "laozhou"){ //默认值：laozhou
            this.name = name;
        }
    }
    let p1 = new Person("小王"); //new的时候自动执行构造函数。
    console.log("构造函数和实例",p1);
}

2.继承

extends 继承
super   上一级，可以调用父类的构造函数。
{
    class Father {
        constructor(name="侯瑞强",sex="男") {
            this.name = name;
            this.sex = sex;
        }
    }
    class Child extends Father {
        constructor(name="child",sex) { //把父类的本事拿了过来。
            super(name,sex);     //调用父类的构造函数。super必须在第一行，否则报错。
            this.age = 10;
        }
    }
    console.log("子类覆盖父类属性的实例",new Child());
}

3.静态属性

{
    class Person {
        constructor(name="默认") {
            this.name = name;
        }
    }
    //静态属性的定义，是直接给类下的属性赋值，该属性就是静态属性,类名点什么直接定义
    Person.type = "text"; //type就是静态属性。
    console.log(Person.type);
}

五、模块化

1.导出exprot,导入import

导出

export default{
    a:1,
    b:2,
    say(){
        console.log("i can say");
    }
}

导入

import Model2 from "./module2.js";
console.log(Model2);

六、 尾调用

一个函数执行，执行到最后的时候调用了另一个函数。
function go(callback){
    console.log(1231313);
    console.log("vvv");
    callback && callback();
}
function tail(){
    console.log(123131313);
}
go(tail);