es6中的解构赋值、扩展运算符和rest参数使用详解
前言
本文主要给大家介绍了关于es6中解构赋值、扩展运算符和rest参数使用的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
es6中较为常用的书写风格
为了书写的方便，es6中提出了很多比较友好的书写方式，其中最为常见的属于以下几个：
- 字符串模板`abcdef${test}`
- 解构赋值let[a,b,c]=[1,2,3]
- 扩展运算符rest参数...
本文希望能够学习其中的主要的用法，方便书写和简洁性。
字符串模板
在以前的日子，我们经常捡到各种类别的字符串拼接，无论是跳转链接还是请求，很多时候见到这样的代码
leturl=location.protocol+'//baidu.com/query?q='+word+ '&qn='+queryWord;
现在书写的时候不需要这么多的+加好来连接，可以使用字符串模板变成这个样子
leturl=`${location.protocol}//baidu.com/query?q=${word}&qn=${queryWord}`;
写起来还是简便不少，有一个简单的猜想，这个字符串模板会不会具有react、vue那样的效果，动态的绑定数据，也就是说字符串模板的内容会跟着模板中的变量变化而变化
letm='test';
letn=`m+:${m}`;
n//"m+:test"
m//"test"
m+='noTest'//改变字符串模板中的m的值
m//"testnoTest"
n//"m+:test"
所以上面说的假想不会发生，react、vue都是存在虚拟dom来diff数据的不同，来出发数据的重新加载，以达到动态绑定的目的。
字符串模板的一些特性和注意
1、在模板字符串中如果需要使用`字符的话，需要使用反斜杠转译\`;
2、字符串模板可以表示多行字符串，所有的空格和缩进都会被保留在输出之中；
letk=`oneline twoline 3line`; k//输出如下 "oneline twoline 3line"
3、字符串模板的${}里面可以书写JavaScript的表达式，
四则运算
test:${1+1}//"test2"
函数
`TEST:${newDate()}`//"TEST:WedSep27201715:48:53GMT+0800(CST)"
如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法
vartt={a:1,b:2};
`test:${tt}`//"test:[objectObject]"
tt.toString()//"[objectObject]"
如果模板字符串中的变量没有声明，将报错。
模板字符串甚至还能嵌套
解构赋值
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，而且一旦左侧匹配的格式出错和右侧的数据类型不对应的话（右侧是数组或者对象之外的类型）还会报错
使用场景
很多时候使用解构会带来很大的便利：
交换变量
leta=1,b=2; [a,b]=[b,a];
获取接口或者函数返回的数组或者对象的某些部分
functionf(){
return[1,2,3];
}
let[a,,b]=f();
还可以配合正则表达式获取不同的部分内容
//就拿navigator.userAgent来说，想要获取不同的内容，类似如下： "Mozilla/5.0(Macintosh;IntelMacOSX10_12_6)AppleWebKit/537.36(KHTML,likeGecko)Chrome/61.0.3163.100Safari/537.36" letua=/(Mac\s?OS\s?X\s?)([\d_]+).*Chrome\/([\d.]+)/.exec(navigator.userAgent); /*ua=["MacOSX10_12_6)AppleWebKit/537.36(KHTML,likeGecko)Chrome/61.0.3163.100", "MacOSX", "10_12_6", "61.0.3163.100"] */ let[,,macVersion,chromeVersion]=ua;//分别获取mac的系统版本和chrome的版本
扩展运算符...
扩展语法允许一个表达式在期望多个参数（用于函数调用）或多个元素（用于数组字面量）或多个变量（用于解构赋值）的位置扩展
字面量的扩展，
//数组字面量扩展
lettest=[3,4,5],
copyTest=[...test],//copyTest[3,4,5]
extTest=[1,2,...test];//extTest[1,2,3,4,5]
//对象字面量扩展
letobj={a:1,b:2},
copyObj={...obj},//
extObj={...obj,c:3};
函数调用作为实参
functionmyFunction(x,y,z){
returnx+y+z;
}
varargs=[0,1,2];
myFunction(...args);//3
替代apply方法的参数使用数组的形式
Array.prototype.push.apply(arr)//=>//Array.prototype.push(...arr)
合并数组、对象
letarray1=[1,2,3],array2=[4,5,6],array3=[...array1,...array2];
rest剩余参数（restparameter）
剩余参数（restparameter）语法允许我们将一个不定数量的参数表示为一个数组,
functionsortRestArgs(...theArgs){
varsortedArgs=theArgs.sort();
returnsortedArgs;
}
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对象的使用。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。