我的es6總結

JerryWangSAP 發布于2019-08-29 12:57 / 2255人閱讀

摘要：補充普通方法是實例化出來的對象，靜態方法屬于類，亦可以被繼承。類的基本定義生成實例構造函數。默認值小王的時候自動執行構造函數。構造函數和實例繼承繼承上一級，可以調用父類的構造函數。

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

GPU云服務器云服務器 ES6 es6-系列 ES6入門 es6 js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112264.html

我的es6總結

摘要：補充普通方法是實例化出來的對象，靜態方法屬于類，亦可以被繼承。類的基本定義生成實例構造函數。默認值小王的時候自動執行構造函數。構造函數和實例繼承繼承上一級，可以調用父類的構造函數。一. es6編譯環境搭建 1 . 初始化 npm 創建package.json文件 npm init 2. 安裝webpack cnpm install webpack -D 3. 安...

maybe_009 2019-08-20 18:06 評論0 收藏0
我的es6總結

摘要：補充普通方法是實例化出來的對象，靜態方法屬于類，亦可以被繼承。類的基本定義生成實例構造函數。默認值小王的時候自動執行構造函數。構造函數和實例繼承繼承上一級，可以調用父類的構造函數。一. es6編譯環境搭建 1 . 初始化 npm 創建package.json文件 npm init 2. 安裝webpack cnpm install webpack -D 3. 安...

104828720 2019-08-01 17:11 評論0 收藏0
ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
前端模塊化——技術選型

摘要：前言前端模塊化，主要是解決兩個問題命名空間沖突，文件依賴管理。目前解決的方法是模塊化命名空間各個模塊的命名空間獨立。模塊化構建工具，等是用來組織前端模塊的構建工具加載器。前言前端模塊化，主要是解決兩個問題——命名空間沖突，文件依賴管理。坑___命名空間沖突我自己測試好的代碼和大家合并后怎么起沖突了？頁面腳本的變量或函數覆蓋了公有腳本的。坑___文件依賴管理明明項目需...

Doyle 2019-08-20 11:10 評論0 收藏0
ES6—字符串模板引擎（4）

摘要：字符串模板引擎中的字符串缺乏多行字符串字符串格式化轉義等特性。字符串中嵌入變量模板字面量看上去僅僅是普通字符串的升級版，但二者之間真正的區別在于模板字面量的變量占位符。黑子在上面的代碼中，就是模板標簽。字符串模板引擎 ES5中的字符串缺乏多行字符串、字符串格式化、HTML轉義等特性。而ES6通過模板字面量的方式進行了填補，模板字面量試著跳出JS已有的字符串體系，通過一些全新的方法來...

cnio 2019-08-23 17:17 評論0 收藏0