es6的解构赋值、扩展运算符、rest参数使用

es6中较为常用的书写风格

为了书写的方便，es6中提出了很多比较友好的书写方式，其中最为常见的属于以下几个：

• 字符串模板 `abcdef${test}`
• 解构赋值 let [a, b, c] = [1, 2, 3]
• 扩展运算符 rest参数 ...

本文希望能够学习其中的主要的用法，方便书写和简洁性。

字符串模板

在以前的日子，我们经常捡到各种类别的字符串拼接，无论是跳转链接还是请求，很多时候见到这样的代码

let url = location.protocol + '//baidu.com/query?q=' + word +
            '&qn=' + queryWord;

现在书写的时候不需要这么多的+加好来连接，可以使用字符串模板变成这个样子

let url = `${location.protocol}//baidu.com/query?q=${word}&qn=${queryWord}`;

写起来还是简便不少，有一个简单的猜想，这个字符串模板会不会具有react、vue那样的效果，动态的绑定数据，也就是说字符串模板的内容会跟着模板中的变量变化而变化

let m = 'test';
let n = `m+:${m}`;
n  //"m+:test"
m //"test"
m += 'noTest' //改变字符串模板中的 m 的值
m //"testnoTest"
n //"m+:test"  

所以上面说的假想不会发生，react、vue都是存在虚拟dom来diff数据的不同，来出发数据的重新加载，以达到动态绑定的目的。

字符串模板的一些特性和注意

1. 在模板字符串中如果需要使用 ` 字符的话，需要使用反斜杠转译 \`;

2. 字符串模板可以表示多行字符串，所有的空格和缩进都会被保留在输出之中；

   let k = `one line
       two line
       3 line`;
   k  //输出如下
   "one line
   two line
   3 line"

3. 字符串模板的 ${} 里面可以书写JavaScript的表达式，

   • 四则运算
     test:${1+1} //"test2"

   • 函数

       `TEST:${new Date()}` //"TEST:Wed Sep 27 2017 15:48:53 GMT+0800 (CST)"

   • 如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法

     var tt = {a:1,b:2};
     `test:${tt}` //"test:[object Object]"
     tt.toString()  //"[object Object]"

   • 如果模板字符串中的变量没有声明，将报错。
   • 模板字符串甚至还能嵌套

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构运算可以算是一种很优雅的书写方式，只要赋值表达式=的两边的模式相同的时候，左边的变量就会被赋予右边数组或者对象对应的值，直接看代码：

// 完全匹配模式
let [g, h, l] = ['gg', 'hh', 'll'];
g //"gg"
h //"hh"
l //"ll"

//部分匹配、设置初始值 【初始值需要对象或者数组的成员值严格等于undefined才会生效】
let [v, , x, z='zzz'] = ['vv', 'bb', 'xxxx'];
v //"vv"
x //"xxxx"
z // "zzz"

//对象解构 【注意对象解构时冒号 : 前面的是模式，用来和对象的键名匹配，不是变量】
let {a:aaa,b,c=9,d:ddd=9,e:eee=9,f} = {a:1,b:2,c:3,d:4}
aaa // 1
b //2
c //3
ddd //4
eee //9
f // undefined
//字面量的对象解构需要加上括号
({a, b} = {a:1, b:2})
({a, b, ...rest} = {a:1, b:2, c:3, d:4});

除了数组、对象之外，其实字符串、数字、布尔值都可以解构，不过并不是很实用，所以不过多的说明。
需要注意：解构不成功的，数组可能是长度不够完全匹配，对象可能是没有匹配的键名，那么返回的值都是undefined，而且一旦左侧匹配的格式出错和右侧的数据类型不对应的话（右侧是数组或者对象之外的类型）还会报错

使用场景

很多时候使用解构会带来很大的便利：

1. 交换变量

   let a =1, b=2;
   [a, b] = [b, a];

2. 获取接口或者函数返回的数组或者对象的某些部分

   function f() {
     return [1, 2, 3];
   }
   
   let [a, , b] = f();

3. 还可以配合正则表达式获取不同的部分内容

   //就拿navigator.userAgent来说，想要获取不同的内容，类似如下：
   "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36"
   
   let ua = /(Mac\s?OS\s?X\s?)([\d_]+).*Chrome\/([\d.]+)/.exec(navigator.userAgent);
   /* ua = ["Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100",
           "Mac OS X ",
           "10_12_6",
           "61.0.3163.100"]
   
   */
   let [ , ,macVersion, chromeVersion] = ua; //分别获取mac的系统版本和chrome的版本

扩展运算符 ...

扩展语法允许一个表达式在期望多个参数（用于函数调用）或多个元素（用于数组字面量）或多个变量（用于解构赋值）的位置扩展

1. 字面量的扩展，

   //数组字面量扩展
   let test = [3,4,5],
       copyTest = [...test], // copyTest [3,4,5]
       extTest = [1,2,...test]; //extTest [1,2,3,4,5]
   //对象字面量扩展
   let obj = {a: 1, b: 2},
       copyObj = {...obj}, //
       extObj = {...obj, c: 3};

2. 函数调用 作为实参

   function myFunction(x, y, z) {
       return x+y+z;
    }
   var args = [0, 1, 2];
   myFunction(...args); //3

3. 替代apply方法的参数使用数组的形式

   Array.prototype.push.apply(arr) //=>// Array.prototype.push(...arr)

4. 合并数组、对象

   let array1 = [1,2,3], array2 = [4,5,6],array3 = [...array1, ...array2];
   

rest剩余参数（rest parameter）

剩余参数（rest parameter）语法允许我们将一个不定数量的参数表示为一个数组,

function sortRestArgs(...theArgs) {
  var sortedArgs = theArgs.sort();
  return sortedArgs;
}
 
alert(sortRestArgs(5,3,7,1)); // 弹出 1,3,5,7

听起来感觉和arguments他有点相似：

• 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
• arguments 对象不是一个真实的数组,而剩余参数是真实的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach，pop。
• arguments 对象对象还有一些附加的属性 (比如callee属性)。

还可以和结构赋值一起使用

var [a, ...rest] = [1, 2, 3, 4];
console.log(a);//1
console.log(rest);//[2, 3, 4]

扩展运算和rest参数注意

对于三个点号...，三点放在形参或者等号左边为rest运算符; 放在实参或者等号右边为spread运算符，或者说，放在被赋值一方为rest运算符，放在赋值一方为扩展运算符。
注意

• 在等号赋值或for循环中，如果需要从数组或对象中取值，尽量使用解构。
• 在自己定义函数的时候，如果调用者传来的是数组或对象，形参尽量使用解构方式，优先使用对象解构，其次是数组解构。代码可读性会很好。
• 在调用第三方函数的时候，如果该函数接受多个参数，并且你要传入的实参为数组，则使用扩展运算符。可以避免使用下标形式传入参数。也可以避免很多人习惯的使用apply方法传入数组。
• rest运算符使用场景应该稍少一些，主要是处理不定数量参数，可以避免arguments对象的使用。