本文主要给大家介绍了关于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，而且一旦左侧匹配的格式出错和右侧的数据类型不对应的话（右侧是数组或者对象之外的类型）还会报错
使用场景
很多时候使用解构会带来很大的便利：
交换变量
let a =1, b=2; [a, b] = [b, a];
获取接口或者函数返回的数组或者对象的某些部分
function f() { return [1, 2, 3]; } let [a, , b] = f();
还可以配合正则表达式获取不同的部分内容
//就拿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的版本
扩展运算符 ...
扩展语法允许一个表达式在期望多个参数（用于函数调用）或多个元素（用于数组字面量）或多个变量（用于解构赋值）的位置扩展
字面量的扩展，