14 微服務電商【黑馬樂優商城】：day04-ES6語法入門

day01-springboot（理論篇） ；day01-springboot（實踐篇）

day02-springcloud（理論篇一)  ；day02-springcloud(理論篇二)  ；day02-springcloud(理論篇三) ；day02-springcloud(理論篇四) ；

day03-springcloud(Hystix，Feign)  ；day03-springcloud(Zuul網關） ；  day04-ES6語法入門

day04-項目搭建（一） ； day04-項目搭建（二） ；

14  微服務電商【黑馬樂優商城】：day04-ES6語法入門

 

---

 

0.學習目標

• 瞭解樂優商城項目結構
• 能獨立搭建項目基本框架
• 能參考使用ES6的新語法 

 

---

 

四、ES6 語法指南 

後端項目搭建完畢，接下來就是前端頁面了。不過在這以前須要一些準備工做。咱們須要學習ES6的語法標準。

什麼是ES6？就是ECMAScript第6版標準。

4.1.什麼是ECMAScript？

因此，ECMAScript是瀏覽器腳本語言的規範，而各類咱們熟知的js語言，如JavaScript則是規範的具體實現。

4.2.ECMAScript的快速發展

然後，ECMAScript就進入了快速發展期。

2015年6月，ECMAScript 6，也就是 ECMAScript 2015 發佈了。 而且從 ECMAScript 6 開始，開始採用年號來作版本。即 ECMAScript 2015，就是ECMAScript6。

4.3.ES5和6的一些新特性

咱們這裏只把一些經常使用的進行學習，更詳細的你們參考：阮一峯的ES6教程

4.3.1.let 和 const 命令

var

以前，js定義變量只有一個關鍵字：var

var有一個問題，就是定義的變量有時會莫名奇妙的成爲全局變量。

例如這樣的一段代碼：

for(var i = 0; i < 5; i++){
    console.log(i);
}
console.log("循環外：" + i)

你猜下打印的結果是什麼？

 

let

let所聲明的變量，只在let命令所在的代碼塊內有效。

咱們把剛纔的var改爲let試試：

for(let i = 0; i < 5; i++){
    console.log(i);
}
console.log("循環外：" + i)

結果：

 

const

const聲明的變量是常量，不能被修改

 

4.3.2.字符串擴展

新的API

ES6爲字符串擴展了幾個新的API：

• includes()：返回布爾值，表示是否找到了參數字符串。
• startsWith()：返回布爾值，表示參數字符串是否在原字符串的頭部。
• endsWith()：返回布爾值，表示參數字符串是否在原字符串的尾部。

實驗一下：

 

字符串模板

ES6中提供了`來做爲字符串模板標記。咱們能夠這麼玩：

 

 在兩個`之間的部分都會被做爲字符串的值，無論你任意換行，甚至加入js腳本

` 鍵盤位置是在：的1的左側，tab的上側，esc的正下方

4.3.3.解構表達式

數組解構

好比有一個數組：

let arr = [1,2,3]

我想獲取其中的值，之前只能經過角標。ES6能夠這樣：

const [x,y,z] = arr;// x，y，z將與arr中的每一個位置對應來取值
// 而後打印
console.log(x,y,z);

結果：

 

 

json對象解構

例若有個person對象： 

const person = {
    name:"jack",
    age:21,
    language: ['java','js','css']
}

咱們能夠這麼作：

// 解構表達式獲取值
const {name,age,language} = person;
// 瀏覽器控制檯打印
console.log(name);
console.log(age);
console.log(language);

結果：

 如過想要用其它變量接收，須要用:額外指定別名：

 

//定義一個json對象
const person = {
    name:"jack",
    age:21,
    language: ['java','js','css']
}
//ES6的解構表達式
const{ language:langu } = person;

console.log(langu);

• {name:n}：name是person中的屬性名，冒號後面的n是解構後要賦值給的變量。  

---

 

4.3.4.函數優化

函數參數可預設默認值

在ES6之前，咱們沒法給一個函數參數設置默認值，只能採用變通寫法：

    function add(a , b) {
        // 判斷b是否爲空，爲空就給默認值1
        b = b || 1;
        return a + b;
    }
    // 傳一個參數
    console.log(add(10));

 

如今能夠這麼寫：

箭頭函數  Lambda表達式

ES6中定義函數的簡寫方式：

一個參數時：

var print = function (obj) {
    console.log(obj);
} // 簡寫爲：
var print2 = obj => console.log(obj);

 

多個參數：

// 兩個參數的狀況：
var sum = function (a , b) {
    return a + b;
}
// 簡寫爲：
var sum2 = (a,b) => a+b;

代碼不止一行，能夠用{}括起來

var sum3 = (a,b) => {
    return a + b;
}

對象的函數屬性簡寫

好比一個Person對象，裏面有eat方法：

let person = {
    name: "jack",
    // 之前：
    eat: function (food) {
        console.log(this.name + "在吃" + food);
    },
    // 箭頭函數版：
    eat2: food => console.log(person.name + "在吃" + food),// 這裏拿不到this
    // 簡寫版：
    eat3(food){
        console.log(this.name + "在吃" + food);
    }
}

 

箭頭函數結合解構表達式

好比有一個函數：

const person = {
    name:"jack",
    age:21,
    language: ['java','js','css']
}

function hello(person) {
    console.log("hello," + person.name)
}

若是用箭頭函數和解構表達式

var hi = ({name}) =>  console.log("hello," + name);

 

 

---

 

4.3.5.map和reduce

數組中新增了map和reduce方法。

map

map()：接收一個函數，將原數組中的全部元素用這個函數處理後放入新數組返回。

舉例：有一個字符串數組，咱們但願轉爲int數組

let arr = ['1','20','-5','3'];
console.log(arr)

let arr2 = arr.map(s => parseInt(s));

console.log(arr2)

 

reduce

reduce()：接收一個函數（必須）和一個初始值（可選），該函數接收兩個參數：

• 第一個參數是上一次reduce處理的結果
• 第二個參數是數組中要處理的下一個元素

reduce()會從左到右依次把數組中的元素用reduce處理，並把處理的結果做爲下次reduce的第一個參數。若是是第一次，會把前兩個元素做爲計算參數，或者把用戶指定的初始值做爲起始參數。

舉例：

const arr = [1,20,-5,3]

沒有初始值：

 

 指定初始值：

 

---

 

4.3.6.promise

所謂Promise，簡單說就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法上說，Promise 是一個對象，從它能夠獲取異步操做的消息。Promise 提供統一的 API，各類異步操做均可以用一樣的方法進行處理。

感受跟java的Future類很像啊，有木有！

咱們能夠經過Promise的構造函數來建立Promise對象，並在內部封裝一個異步執行的結果。

語法：

const promise = new Promise(function(resolve, reject) {
  // ... 執行異步操做

  if (/* 異步操做成功 */){
    resolve(value);// 調用resolve，表明Promise將返回成功的結果
  } else {
    reject(error);// 調用reject，表明Promise會返回失敗結果
  }
});

這樣，在promise中就封裝了一段異步執行的結果。

若是咱們想要等待異步執行完成，作一些事情，咱們能夠經過promise的then方法來實現,語法：

promise.then(function(value){
    // 異步執行成功後的回調
});

若是想要處理promise異步執行失敗的事件，還能夠跟上catch：

promise.then(function(value){
    // 異步執行成功後的回調
}).catch(function(error){
    // 異步執行失敗後的回調
})

示例：

const p = new Promise(function (resolve, reject) {
    // 這裏咱們用定時任務模擬異步
    setTimeout(() => {
        const num = Math.random();
        // 隨機返回成功或失敗
        if (num < 0.5) {
            resolve("成功！num:" + num)
        } else {
            reject("出錯了！num:" + num)
        }
    }, 300)
})

// 調用promise
p.then(function (msg) {
    console.log(msg);
}).catch(function (msg) {
    console.log(msg);
})

結果：

 

 

 

 

 

4.3.7.set和map（瞭解）

ES6提供了Set和Map的數據結構。

Set，本質與數組相似。不一樣在於Set中只能保存不一樣元素，若是元素相同會被忽略。跟java很像吧。

構造函數：

// Set構造函數能夠接收一個數組或空
let set = new Set();
set.add(1);// [1]
// 接收數組
let set2 = new Set([2,3,4,5,5]);// 獲得[2,3,4,5]

普通方法：

set.add(1);// 添加
set.clear();// 清空
set.delete(2);// 刪除指定元素
set.has(2); // 判斷是否存在
set.keys();// 返回全部key
set.values();// 返回全部值
set.entries();// 返回鍵值對集合
// 由於set沒有鍵值對，全部其keys、values、entries方法返回值同樣的。
set.size; // 元素個數。是屬性，不是方法。

 

map，本質是與Object相似的結構。不一樣在於，Object強制規定key只能是字符串。而Map結構的key能夠是任意對象。即：

• object是 <string,object>集合
• map是<object,object>集合

構造函數：

// map接收一個數組，數組中的元素是鍵值對數組
const map = new Map([
    ['key1','value1'],
    ['key2','value2'],
])
// 或者接收一個set
const set = new Set([
    ['key1','value1'],
    ['key2','value2'],
])
const map2 = new Map(set)
// 或者其它map
const map3 = new Map(map);

方法：

 

 

---

4.3.8.模塊化

4.3.8.1.什麼是模塊化

模塊化就是把代碼進行拆分，方便重複利用。相似java中的導包：要使用一個包，必須先導包。

而JS中沒有包的概念，換來的是 模塊。

模塊功能主要由兩個命令構成：export和import。

• export命令用於規定模塊的對外接口，
• import命令用於導入其餘模塊提供的功能。

4.3.8.2.export

好比我定義一個js文件:hello.js，裏面有一個對象：

const util = {
    sum(a,b){
        return a + b;
    }
}

我可使用export將這個對象導出：

const util = {
    sum(a,b){
        return a + b;
    }
}
export util;

固然，也能夠簡寫爲：

export const util = {
    sum(a,b){
        return a + b;
    }
}

export不只能夠導出對象，一切JS變量均可以導出。好比：基本類型變量、函數、數組、對象。

當要導出多個值時，還能夠簡寫。好比我有一個文件：user.js：

var name = "jack"
var age = 21
export {name,age}

省略名稱

上面的導出代碼中，都明確指定了導出的變量名，這樣其它人在導入使用時就必須準確寫出變量名，不然就會出錯。

所以js提供了default關鍵字，能夠對導出的變量名進行省略

例如：

// 無需聲明對象的名字
export default {
    sum(a,b){
        return a + b;
    }
}

這樣，當使用者導入時，能夠任意起名字。

4.3.8.3.import

使用export命令定義了模塊的對外接口之後，其餘 JS 文件就能夠經過import命令加載這個模塊。

例如我要使用上面導出的util：

// 導入util
import util from 'hello.js'
// 調用util中的屬性
util.sum(1,2)

要批量導入前面導出的name和age：

import {name, age} from 'user.js'

console.log(name + " , 今年"+ age +"歲了")

可是上面的代碼暫時沒法測試，由於瀏覽器目前還不支持ES6 的導入和導出功能。除非藉助於工具，把ES6 的語法進行編譯降級到ES5，好比Babel-cli工具

咱們暫時不作測試，你們瞭解便可。

4.3.9.對象擴展

ES6給Object拓展了許多新的方法，如：

• keys(obj)：獲取對象的全部key造成的數組
• values(obj)：獲取對象的全部value造成的數組
• entries(obj)：獲取對象的全部key和value造成的二維數組。格式：[[k1,v1],[k2,v2],...]

• assian(dest, ...src) ：將多個src對象的值 拷貝到 dest中（淺拷貝）。

 

4.3.10.數組擴展

ES6給數組新增了許多方法：

• find(callback)：把數組中的元素逐個傳遞給函數callback執行，若是返回true，則返回該元素
• findIndex(callback)：與find相似，不過返回的是品牌到的元素的索引
• includes（callback）：與find相似，若是匹配到元素，則返回true，表明找到了。

=============================================

參考資料：

 

end