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

前言

本文主要给大家介绍了关于es6中解构赋值、扩展运算符和rest参数使用的相关内容分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

es6中较为常用的书写风格

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

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

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

字符串模板

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

rush:js;"> let url = location.protocol + '//baidu.com/query?q=' + word + '&qn=' + queryWord;

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

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

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

rush:js;"> 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、字符串模板可以表示多行字符串,所有的空格和缩进都会被保留在输出之中;

rush:js;"> let k = `one line two line 3 line`; k //输出如下 "one line two line 3 line"

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

四则运算

rush:js;"> test:${1+1} //"test2"

函数

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

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

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

如果模板字符串中的变量没有声明,将报错。

模板字符串甚至还能嵌套

解构赋值

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

rush:js;"> // 完全匹配模式 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,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,...rest} = {a:1,d:4});

除了数组、对象之外,其实字符串、数字、布尔值都可以解构,不过并不是很实用,所以不过多的说明。

需要注意:解构不成功的,数组可能是长度不够完全匹配,对象可能是没有匹配的键名,那么返回的值都是undefined,而且一旦左侧匹配的格式出错和右侧的数据类型不对应的话(右侧是数组或者对象之外的类型)还会报错

使用场景

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

交换变量

rush:js;"> let a =1,b=2; [a,b] = [b,a];

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

rush:js;"> function f() { return [1,3]; }

let [a,b] = f();

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

rush:js;"> //就拿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的版本

扩展运算符 ...

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

字面量的扩展,

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

函数调用 作为实参

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

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

// Array.prototype.push(...arr)

合并数组、对象

rush:js;"> let array1 = [1,3],array2 = [4,5,6],array3 = [...array1,...array2];

rest剩余参数(rest parameter)

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

rush:js;"> function sortRestArgs(...theArgs) { var sortedArgs = theArgs.sort(); return sortedArgs; }

alert(sortRestArgs(5,7,1)); // 弹出 1,7

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

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

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

rush:js;"> var [a,...rest] = [1,4]; console.log(a);//1 console.log(rest);//[2,4]

扩展运算和rest参数注意

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

注意

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...