es6 默认参数rest参数扩展运算符

Posted 2020-10-13 for_tomorrow

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];  

//  报错