重學ES6基礎語法（二）

時間 2019-11-08

原文原文鏈接

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

默認參數值（Default parameters）

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

1.語法java

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

2.使用git

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

格式: 條件A || 條件Bgithub

若是條件A成立, 那麼就返回條件A;web

若是條件A不成立, 不管條件B是否成立, 都會返回條件B。express

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"
複製代碼

注意：① 若是隻傳遞了一個參數，則表明第一個參數使用咱們傳遞進來的，其餘參數仍是使用默認值。bash

② 若是須要給某一個參數指定內容，其餘參數須要傳遞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.相關閱讀

github.com/wesbos/es6-…

本文章參考到的連接: developer.mozilla.org/en-US/docs/…

webfront-js.com/articaldeta…

www.freecodecamp.org/news/spread…