個人es6總結

一. 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

2、 寫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"]
        }

3、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]);
          }
 }

4、類的繼承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);
}

5、模塊化

1.導出exprot,導入import

導出

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

導入

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

6、 尾調用

一個函數執行，執行到最後的時候調用了另外一個函數。
function go(callback){
    console.log(1231313);
    console.log("vvv");
    callback && callback();
}
function tail(){
    console.log(123131313);
}
go(tail);