es6 默認參數、rest參數、擴展運算符

1、默認值

現在可以在定義函數的時候指定參數的默認值了，而不用像以前那樣通過邏輯或操作符來達到目的了。

function sayHello(name){

    //傳統的指定默認參數的方式

    var name = name||'hubwiz';

    document.write('Hello '+name);

} 

//運用ES6的默認參數

function sayHello2(name='hubwiz'){

    document.write(`Hello ${name}`);

}

sayHello();  //輸出：Hello hubwiz

sayHello('匯智網');  //輸出：Hello 匯智網

sayHello2();  //輸出：Hello hubwiz

sayHello2('匯智網');  //輸出：Hello 匯智網

 

2、rest參數

rest參數（形式為“...變量名”）可以稱為不定參數，用於獲取函數的多余參數，這樣就不需要使用arguments對象了。

rest參數搭配的變量是一個數組，該變量將多余的參數放入數組中。

function add(...values) {

   let sum = 0; 

   for (var val of values) {

      sum += val;

   } 

   return sum;

} 

add(1, 2, 3) // 6

 

不定參數的格式是三個句點后跟代表所有不定參數的變量名。比如以上示例中，...values 代表了所有傳入add函數的參數。

3、擴展運算符

擴展運算符（spread）是三個點（...）。它好比rest參數的逆運算，將一個數組轉為用逗號分隔的參數序列。該運算符主要用於函數調用。

它允許傳遞數組或者類數組直接做為函數的參數而不用通過apply。

var people=['張三','李四','王五']; 

//sayHello函數本來接收三個單獨的參數people1，people2和people3

function sayHello(people1,people2,people3){

    document.write(`Hello ${people1},${people2},${people3}`);

} 

//但是我們將一個數組以拓展參數的形式傳遞，它能很好地映射到每個單獨的參數

sayHello(...people);   //輸出：Hello 張三,李四,王五  

//而在以前，如果需要傳遞數組當參數，我們需要使用函數的apply方法

sayHello.apply(null,people);   //輸出：Hello 張三,李四,王五 

 

 4、擴展運算符的應用(常用)

a、合並數組

擴展運算符提供了數組合並的新寫法。

var arr1 = ['a', 'b'];  

var arr2 = ['c'];  

var arr3 = ['d', 'e'];  

// ES5 的合並數組  

arr1.concat(arr2, arr3);  

// [ 'a', 'b', 'c', 'd', 'e' ]  

// ES6 的合並數組  

[...arr1, ...arr2, ...arr3]  

// [ 'a', 'b', 'c', 'd', 'e' ]  

 

 b、與解構賦值結合

擴展運算符可以與解構賦值結合起來，用於生成數組。

const [first, ...rest] = [1, 2, 3, 4, 5];  

first // 1  

rest // [2, 3, 4, 5]  

 

const [first, ...rest] = [];  

first // undefined  

rest // []:  

 

const [first, ...rest] = ["foo"];  

first // "foo"  

rest // []  

如果將擴展運算符用於數組賦值，只能放在參數的最后一位，否則會報錯。

const [...butLast, last] = [1, 2, 3, 4, 5];  

//  報錯  

const [first, ...middle, last] = [1, 2, 3, 4, 5];  

//  報錯