重學ES6之出來混早晚要還的（二）

本系列博客爲ES6基礎語法的使用及總結，若有錯誤，歡迎指正。
重學ES6之出來混早晚要還的（二）主要包括默認參數值、模板字符串、解構賦值、剩餘參數、擴展運算符等、ES6對象加強寫法。

其餘筆記：
重學ES6之出來混早晚要還的（一）
重學ES6之出來混早晚要還的（三）
重學ES6之出來混早晚要還的（四）
重學ES6之出來混早晚要還的（五）
重學ES6之出來混早晚要還的（六）
數據類型的轉換/判斷/比較

默認參數值（Default parameters）

函數默認參數容許在沒有值或undefined被傳入時使用默認形參。

1.語法

function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) { 
    statements 
}

2.使用
2.1 在ES6以前能夠經過邏輯運算符來給形參指定默認值

格式: 條件A || 條件B
若是條件A成立, 那麼就返回條件A
若是條件A不成立, 不管條件B是否成立, 都會返回條件B

function getInfo(a, b) {
    a = a || "今天要少吃，";
    b = b || "明天也要少吃";
    console.log(a, b);
}
getInfo(); //打印默認值 --> 今天要少吃，明天也要少吃
getInfo("mss"); //至關於傳遞了參數a，未傳參數b --> mss 明天也要少吃
getInfo(undefined,"mss"); //表示參數a是未知的，此時採用默認值 --> 今天要少吃, mss
getInfo(123, "abc"); //參數ab都是由外界傳遞的 --> 123 "abc"

2.2 從ES6開始直接經過變量=指定默認值便可給形參指定默認值

function getInfo(a = "今天要少吃", b = ", 明天也要少吃") {
    console.log(a, b);
};
getInfo(); //今天要少吃, 明天也要少吃
getInfo(123, "abc"); //123 "abc"

注意：① 若是隻傳遞了一個參數，則表明第一個參數使用咱們傳遞進來的，其餘參數仍是使用默認值。
② 若是須要給某一個參數指定內容，其餘參數須要傳遞undefined
③ 問：給其餘參數傳遞null能夠嗎？答：別問，問就是不能夠，問就是讓你本身回去試

function multiply(a = 3, b = 5) {
   return a * b;
}
console.log(multiply(5, 2)); // ab均爲傳遞進來的值，爲10
console.log(multiply(5)); // a是5，b是默認值5，結果爲25
console.log(multiply(undefined,10)); //a是默認值3，b是10，結果爲30

function test(a = 1,b = 2, c = 3, d = 4) {
    return a + b + c + d;
}
console.log(test(undefined, undefined, 4, undefined)); //11

2.3 ES6中的默認值還能夠從其它的函數中獲取

function getSum(a = "少吃,", b = getDefault()) {
    console.log(a, b);
}
getSum();
// getSum(123, "abc");
function getDefault() {
    return "零食";
}

模板字符串（Template literals (Template strings)）

模板字面量 是容許嵌入表達式的字符串字面量。你可使用多行字符串和字符串插值功能。
1.語法
將須要插入的內容放在一對反引號``裏面

模板字符串使用反引號來代替普通字符串中的用雙引號和單引號。模板字符串能夠包含特定語法（${expression}）的佔位符。佔位符中的表達式和周圍的文本會一塊兒傳遞給一個默認函數，該函數負責將全部的部分鏈接起來，若是一個模板字符串由表達式開頭，則該字符串被稱爲帶標籤的模板字符串，該表達式一般是一個函數，它會在模板字符串處理後被調用，在輸出最終結果前，你均可以經過該函數來對模板字符串進行操做處理。在模版字符串內使用反引號（`）時，須要在它前面加轉義符（）。

`string text` //單行

`string text line 1
 string text line 2` //多行

`string text ${expression} string text` //包含特定語法（${expression}）的佔位符

tag `string text ${expression} string text` //標籤模板字符串

2.用法
2.1 在ES6以前能夠經過加號實現字符串拼接，但有時建立標籤時不能體現出html標籤的層級結構，比較繁瑣並且容易出錯。

let name = 'ghk';
let age = 22;
let output = name + ' is ' + age;
console.log(output);

2.2 採用模板字符串簡化操做，引入的變量用${}包裹起來，${expression}中的expression的內容能夠是一個變量、對象的屬性、也能夠是一個函數、一個須要建立的標籤

let name = 'ghk';
let age = 22;
let output2 = `${name} is ${age}`;
console.log(output2);

let output3 = `${name} is ${age * 3}`;
console.log(output3);

2.3 模板字符串書寫上能夠自由換行，而不用添加「\」反斜槓轉義空格。模板字符串建立標籤時，有時會保留標籤先後的空格，不須要空格時能夠用.trim()方法去除空格(模板字符串也是個字符串)。

let str = `<div>
    <p><img src="./images.test.jpg" alt=""></p>
</div>`
let str = `
<div>
    <p><img src="./images.test.jpg" alt=""></p>
</div>.trim()`
console.log(str);

2.4 模板字符串裏面可嵌套模板字符串

let person = {
    name: 'mss',
    lists:[
        {task: 'reading'},
        {task: 'sleeping'},
        {task: 'eating'}
    ]
};
let template = `
    <ul>
         ${person.lists.map(list =>`
             <li>
                 ${list.task}
             </li>
         `).join('')}
    </ul>
`;
document.body.innerHTML = template;

標籤模板字符串（Tagged templates）

標籤模板字符串容許經過一個默認的函數對其中的插值進行運算和鏈接。

更高級的形式的模板字符串是帶標籤的模板字符串。標籤使您能夠用函數解析模板字符串。標籤函數的第一個參數包含一個字符串值的數組。其他的參數與表達式相關。最後，你的函數能夠返回處理好的的字符串（或者它能夠返回徹底不一樣的東西）。用於該標籤的函數的名稱能夠被命名爲任何名字。

1.用法
1.1 標籤函數第一個參數(strings)是一個數組，是由字符串的字面量組成的一個數組；後面的參數是不定參數(即變量)，一個參數表明一個表達式的計算結果。

function myTag(strings, ...values) {
   console.log(strings);
   console.log(values);
}
let name = 'ghk';
let task = 'learning English';
let output = myTag`${name} has planned to ${task}`;

!
1.2 固然了，不定參數是能夠分開寫的，可是若是有多個參數的時候建議仍是使用 ...values 來代替

function myTag(strings,name,task) {
   console.log(strings);
   console.log(name);
   console.log(task);
}
let name = 'ghk';
let task = 'learning English';
let output = myTag`${name} has planned to ${task}`;

2.注意點
2.1 當模板字符串是以變量開頭或者結尾的時候，返回的數組前或者後會多一個空字符串

若是此時在模板字符串先後加上一些內容，先後就不會返回空字符串了

function myTag(strings,...values) {
   console.log(strings);
   console.log(values);
}
let name = 'ghk';
let task = 'learning English';
let output = myTag`the boy ${name} has planned to ${task}.`;

2.2 在上述中使用了標籤函數建立的模版字符串，但沒有在標籤函數中return最終值，因此output是undefined。要想有最終結果須要在標籤函數中將字符串字面量數組和表達式運算結果拼接起來返回。

function myTag(strings,...values) {
   //console.log(strings);
   //console.log(values);
   let arr = [];
   for (let i=0;i<strings.length;i++){
       arr.push(strings[i]);
       arr.push(values[i]);
   }
   return arr.join("");
}
let name = 'ghk';
let task = 'learning English';
let output = myTag`the boy ${name} has planned to ${task}.`;
console.log(output); //the boy ghk has planned to learning English.

3.原始字符串
3.1 在標籤函數的第一個參數中，存在一個特殊的屬性raw ，咱們能夠經過它來訪問模板字符串的原始字符串，而不通過特殊字符的替換。
3.2 使用String.raw() 方法建立原始字符串和使用默認模板函數和字符串鏈接建立是同樣的。

let name = 'ghk';
let task = 'learning English';
let str=String.raw`the boy ${name} has planned to ${task}.`;
console.log(str); //the boy ghk has planned to learning English.

解構賦值（Destructuring assignment）

解構賦值語法是一種 Javascript 表達式。經過解構賦值, 能夠將屬性/值從對象/數組中取出, 賦值給其餘變量。
一句話：解構賦值是ES6中新增的一種賦值方式

解構數組（Array destructuring）

1.用法
1.1 解構數組就是在表達式左邊定義了要從原變量中取出什麼變量。若是想要取出非連續變量的值，須要用加上逗號，表示留出跳過的元素的位置。

let arr= [1,2,3,4,5];
let [a,b] = arr;
// 至關於如下兩句
// let a = arr[0];
// let b = arr[1];
console.log(a); //1
console.log(b); //2

let [one,,three,four] = arr;
console.log(one); //1
console.log(three); //3
console.log(four); //4

1.2 在數組的解構賦值中, 還可使用ES6中新增的剩餘參數來打包剩餘的數據；若是使用了剩餘參數, 則只能寫在最後一個變量的前面。

let [a, ...b] = [1, 3, 5];
console.log("a = " + a); //1
console.log("b = " + b);  //[3,5]

//SyntaxError: Rest element must be last element
let [a, ...b,c] = [1, 3, 5];
console.log("a = " + a);
console.log("b = " + b);
console.log("c = " + c);

2.注意點
2.1 在數組的解構賦值中, 等號左邊的格式必須和等號右邊的格式如出一轍, 才能徹底解構。

let [a, b, [c, d]] = [1, 3, [2, 4]]; //徹底解構
console.log("a = " + a); //1
console.log("b = " + b); //2
console.log("c = " + c); //3
console.log("d = " + d); //4

let [a, b, c] = [1, 3, [2, 4]]; //未徹底解構
console.log("a = " + a); //1
console.log("b = " + b); //3
console.log("c = " + c); //2,4

2.2 在數組的解構賦值中, 等號左邊的變量個數能夠和右邊的個數不同，右邊的個數也能夠和左邊的個數不同; 若是右邊的個數和左邊的個數不同, 能夠給左邊指定默認值。

let [a, b] = [1, 3, 5];
console.log("a = " + a); //1
console.log("b = " + b); //3

let [a, b, c] = [1];
console.log("a = " + a); //1
console.log("b = " + b); //undefined
console.log("c = " + c); //undefined

let [a, b = 666] = [1, 3, 5];
console.log("a = " + a); //1
console.log("b = " + b); //3

3.應用場景
能夠用做變量交換，在一個解構表達式中能夠交換兩個變量的值。
沒有解構賦值的狀況下，交換兩個變量須要一個臨時變量

let a = 1;
let b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

解構對象（Object destructuring）

數組解構使用[]，對象解構使用{}，其餘用法差異不大。
1.用法（基本賦值）

let obj = {
   name: 'ghk',
   age: 22,
   gender: 'male'
};

let {name, age,gender} = obj;
// 至關於下面幾句代碼
// let name = obj.name;
// let age = obj.age;
// let gender = obj.gender;
// let {name, age, gender} = {name: 'ghk',age: 22,gender: 'male'};
console.log(name, age, gender);

2.無聲明賦值
一個變量能夠獨立於其聲明進行解構賦值。

在使用對象字面量無聲明解構賦值時,必須在賦值語句周圍加上圓括號 ( ) 。
( ) 表達式以前須要有一個分號，不然它可能會被當成上一行中的函數執行。

//正確用法
let a, b;
({a, b} = {a: 1, b: 2});

//錯誤寫法，運行也會報錯
let a, b;
{a, b} = {a: 1, b: 2};
console.log(a);
console.log(b);

注：{a, b} = {a: 1, b: 2} 不是有效的獨立語法，由於左邊的 {a, b}被認爲是一個塊而不是對象字面量。
({a, b} = {a: 1, b: 2}) 是有效的，至關於var {a, b} = {a: 1, b: 2}

3.注意點
3.1 對象解構只會解構出等號左邊出現過的屬性名，且左邊的變量名稱必須和對象的屬性名稱一致, 才能解構出數據。

let {name} = {name: "ghk",age: 22};
console.log(name); //ghk
let {age} = {name: "ghk",age: 22};
console.log(age); // 34

let {a, b} = {name: 'ghk', age: 22,};
console.log(a, b); // undefined undefined

3.2 左邊屬性名能夠多於右邊，也能夠給左邊指定默認值

let {name, age, gender} = {name: "ghk",age: 22};
console.log(name, age, gender); // gender是undefined

let {name, age, gender = 'male'} = {name: "ghk",age: 22};
console.log(name, age, gender);

4.對象解構是能夠嵌套的

const data = {
    name: 'ghk',
    age: 22,
    skill: {
        language: 'japanese',
        instrument: 'piano',
        hobby: 'hiking',
    }
};
let {language,instrument,hobby} = data.skill;
console.log(language, instrument, hobby);

剩餘參數（rest parameter）

1.用法
剩餘參數 語法容許咱們將一個不定數量的參數表示爲一個數組。
一句話：剩餘參數是把不少參數整合成一個數組

function sum(...numbers) {
    //number是一個真數組，保存了傳進來的全部的變量
    console.log(numbers); 
    //既然返回的是一個數組，那麼就可使用數組的各類方法了
    return numbers.reduce((prev,curr) => prev + curr,0)
}
console.log(sum(1, 2, 3, 4)); //10

2.使用 剩餘參數 和使用 arguments 保存參數的區別？

• 剩餘參數保存參數返回的是一個真數組
• 利用arguments保存參數返回一個類數組對象

function sum2() {
    console.log(arguments); //arguments返回一個類數組對象
}
sum2(1,2,3,4);

3.剩餘參數應用場景
3.1 對函數參數的處理（箭頭函數中使用），後續能夠直接用數組的API處理
3.2 變量的解構，把剩餘參數打包到一個數組中

//箭頭函數中使用
let sum = (...args) => {
    return args.reduce((prevSum,curValue) => prevSum + curValue);
};
console.log(sum(1, 2, 3));

//把分數打包到score數組中
const player = ['ghk',22,5.4,5.6,7.8,9.9,4.4,6.8];
const [name, age, ...score] = player;
console.log(name);
console.log(age);
console.log(score);

擴展運算符（spread operator）

把一個可遍歷對象轉爲一個用逗號分隔的新的參數序列，至關於剩餘參數的逆運算

什麼是可遍歷對象
就是部署了iterator接口，能夠用for of循環的數據類型。包括字符串、數組、arguments對象，DOM、NodeList對象，Generator對象等

1.用法

const arr1 = ['1','1','1','1'];
const arr2 = ['2','2','2'];
//鏈接數組的做用
let list = [...arr1,...arr2];
console.log(list);// ["1", "1", "1", "1", "2", "2", "2"]


//鏈接數組並在相應位置插入元素
let list2 = [...arr1,'separate',...arr2];
console.log(list2); // ["1", "1", "1", "1", "separate", "2", "2", "2"]
let list3 = [...arr1,...arr2,'end'];
console.log(list3);// ["1", "1", "1", "1", "2", "2", "2", "end"]
let list4 = ['start',...arr1,...arr2];
console.log(list4);// ["start", "1", "1", "1", "1", "2", "2", "2"]

2.rest parameter和spread operator的區別

Just as the spread operator allows you to expand an array into its individual elements, the rest parameter lets you bundle elements back into an array.

推薦看這篇，嘻嘻（齜牙笑）
An intro to the spread operator and rest parameter in JavaScript (ES6)

3.擴展運算符能夠用來鏈接數組、克隆數組
下例中newArr複製了arr的元素，修改newArr第一個元素，並不會影響到arr (至關於深拷貝)

let arr1 = ['mary','mark','bob','lily'];
let arr2 = ['tom','eli','jade'];
let arr = [...arr1,...arr2];
console.log(arr); //["mary", "mark", "bob", "lily", "tom", "eli", "jade"]
let newArr = [...arr]; 
console.log(newArr); //["mary", "mark", "bob", "lily", "tom", "eli", "jade"]
newArr[0] = 'rachel';
console.log(newArr); //["rachel", "mark", "bob", "lily", "tom", "eli", "jade"]
console.log(arr); //["mary", "mark", "bob", "lily", "tom", "eli", "jade"]

4.擴展運算符能夠在函數中使用

let fruits = ['banana','apple','orange'];
let newFruits = ['peach','pear'];
fruits.push(...newFruits);
console.log(fruits);

let time = [2019,10,23];
let date = new Date(...time);
console.log(date);

ES6對象加強寫法(Object Literal Upgrades)

1.過去定義一個對象的寫法

const obj = {
  name: 'ghk',
  age: 18,
  gender: 'male',
  greet: function () 
    console.log(hello);
  }
}

2.當一個對象的屬性是從外面獲取的時候，能夠採用下面這種方式

const name = 'ghk';
const age = 18;
const gender = 'man';
  
const obj = {
  name,
  age,
  gender,
  getName(){
    console.log(this.name);
  }
};

3.相關閱讀
https://github.com/wesbos/es6...

---

本文章參考到的連接:
https://developer.mozilla.org...
http://webfront-js.com/artica...
https://www.freecodecamp.org/news/spread-operator-and-rest-parameter-in-javascript-es6-4416a9f47e5e/