1.前端技術(shù)棧與后端技術(shù)棧的類(lèi)比

image.png

2.ES6是什么

ECMAScript 6.0（以下簡(jiǎn)稱(chēng) ES6）是 JavaScript 語(yǔ)言的下一代標(biāo)準(zhǔn)虱颗，已經(jīng)在 2015 年 6 月正式發(fā)布了沥匈。它的目標(biāo)，是使得 JavaScript 語(yǔ)言可以用來(lái)編寫(xiě)復(fù)雜的大型應(yīng)用程序忘渔，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言高帖。
由于一些歷史原因，ES6 既是一個(gè)歷史名詞畦粮，也是一個(gè)泛指散址，含義是 5.1 版以后的 JavaScript 的下一代標(biāo)準(zhǔn)乖阵，涵蓋了 ES2015、ES2016预麸、ES2017 等等瞪浸，而 ES2015 則是正式名稱(chēng)，特指該年發(fā)布的正式版本的語(yǔ)言標(biāo)準(zhǔn)吏祸。
ECMAScript是瀏覽器腳本語(yǔ)言的規(guī)范对蒲，而各種js語(yǔ)言，如JavaScript則是規(guī)范的具體實(shí)現(xiàn)贡翘，類(lèi)似于JDBC是標(biāo)準(zhǔn)蹈矮，各種驅(qū)動(dòng)如mysql則是實(shí)現(xiàn)
ES6文檔

3. ES6新特性

3.1 let聲明變量與var的區(qū)別

-var 聲明的變量往往會(huì)越域
-let聲明的變量有嚴(yán)格的局部作用域

{
var a = 1;
let b = 2;
}
console.log(a); // 1
console.log(b);//Uncaught ReferenceError: b is not defined

-var可以聲明多次
-let只能聲明一次

var m = 1;
        var m = 2;
        let n = 3;
        let n = 4;

        console.log(m);//2
        console.log(n);//Uncaught SyntaxError: Identifier 'n' has already been declared

-var 會(huì)變量提升
-let 不存在變量提升

        console.log(x);//undefined
        var x = 10;
        console.log(y);//Uncaught ReferenceError: Cannot access 'y' before initialization
        let y = 20;

3.2 const聲明常量（只讀變量）

        const a = 1;
        a = 0;//Uncaught TypeError: Assignment to constant variable.

3.3 結(jié)構(gòu)表達(dá)式

數(shù)組結(jié)構(gòu)

        //數(shù)組結(jié)構(gòu)
        let arr = [1,2,3];
        // 傳統(tǒng)賦值方式
        let a = arr[0];
        let b = arr[1];
        let c = arr[2];

        // es6
        let [a,b,c] = arr;

        console.log(a,b,c);

對(duì)象結(jié)構(gòu)

const person = {
            name: "abc",
            age:21,
            language: ["java","js","css"]
        }
        //傳統(tǒng)方式
        const name = person.name;
        const age = person.age;
        const language = person.language;
        //es6新特性
        const {name,age,language} = person
// 給name重命名
const {name:abc,age,language} = person
        console.log(name,age,language);

3.4 字符串?dāng)U展

A. 擴(kuò)展幾個(gè)API

image.png

B. 字符串模板

image.png

image.png

3.5 函數(shù)

A. 給參數(shù)設(shè)置默認(rèn)值

        //es6以前鸣驱，無(wú)法給一個(gè)函數(shù)參數(shù)設(shè)置默認(rèn)值含滴，只能采用變通寫(xiě)法
        function add(a,b){
            b = b ||1;
            return a+b;
        }
        //只傳一個(gè)參數(shù)
        console.log(add(10));// 11

        //es6的寫(xiě)法，直接給參數(shù)寫(xiě)上默認(rèn)值丐巫，沒(méi)傳就會(huì)自動(dòng)使用默認(rèn)值
        function add2(a,b=1){
            return a+b;
        }

        console.log(add2(20));// 21

B. 給函數(shù)設(shè)置不定參數(shù)

// 不定參數(shù)
        function fun(...values){
            console.log(values.length);
        }

        console.log(fun(1,2));//2
        console.log(fun(1,2,3));//3

C. 箭頭函數(shù)

 //箭頭函數(shù)
        //es6以前的聲明方法
        var print = function (obj){
            console.log(obj);
        }
        // es6 
        var print = obj => console.log(obj);

        print("hello");
       //------------------------------
        // 多參數(shù)
         //es6以前
        var sum = function(a,b){
            return a+b;
        }
        //es6
        var sum2 = (a,b) => a+b;

        console.log(sum2(1,2));

        //es6以前
        var sum3 = function(a,b){
            c = a+b;
            return a+c;
        }

        //es6
        var sum4 = (a,b) => {
            c = a+b;
            return a+c;
        };

        console.log(sum4(1,2));

D. 箭頭函數(shù)+解構(gòu)

        // 箭頭函數(shù)+解構(gòu)
        const person = {
            name: "abc",
            age:21,
            language: ["java","js","css"]
        }
        // 常規(guī)方式
        var fun1 = (param) => console.log("hello,"+param.name);
        // 箭頭函數(shù)+解構(gòu)方式
        var fun2 = ({name}) => console.log("hello,"+name);

        fun1(person);
        fun2(person);

3.6 對(duì)象優(yōu)化

A. 新增許多新方法

image.png

B. 聲明對(duì)象簡(jiǎn)寫(xiě)

const age = 23;
        const name = "zhangshan";
        //傳統(tǒng)聲明對(duì)象方式
        const person = {name:name,age:age}
        //es6
        const person1 = {name,age}

C. 對(duì)象的函數(shù)屬性簡(jiǎn)介

image.png

D.對(duì)象擴(kuò)展運(yùn)算符

image.png

3.7 map、reduce方法

A. map方法

image.png

B. reduce方法

image.png

image.png

3.8 Promise

image.png

image.png

使用Promise優(yōu)化

image.png

image.png

3.9模塊化

image.png

B. import導(dǎo)入

image.png

image.png