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


Posted in Javascript onSeptember 28, 2017

前言

本文主要给大家介绍了关于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的版本

扩展运算符 ...

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

字面量的扩展,

//数组字面量扩展
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};

函数调用 作为实参

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

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

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

合并数组、对象

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对象的使用。

总结

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

Javascript 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
js单词形式的运算符
May 06 Javascript
js闭包实例汇总
Nov 09 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
vue封装数字翻牌器
Apr 20 Vue.js
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 #Javascript
jquery实现左右轮播图效果
Sep 28 #jQuery
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 #Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 #Javascript
详解Node全局变量global模块
Sep 28 #Javascript
React Native预设占位placeholder的使用
Sep 28 #Javascript
import与export在node.js中的使用详解
Sep 28 #Javascript
You might like
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
python3实现短网址和数字相互转换的方法
2015/04/28 Python
Python中max函数用法实例分析
2015/07/17 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
2013届毕业生求职信范文
2013/11/20 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis