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编程起步(第七课)
Feb 27 Javascript
JavaScript中Math对象使用说明
Jan 16 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
原生JS实现音乐播放器
Jan 26 Javascript
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
十天学会php之第五天
2006/10/09 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
Ext面向对象开发实践(续)
2008/11/18 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
node app 打包工具pkg的具体使用
2019/01/17 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
python创建和删除目录的方法
2015/04/29 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
详解python itertools功能
2020/02/07 Python
Python使用进程Process模块管理资源
2020/03/05 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
工会主席岗位责任制
2014/02/11 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
特种设备安全管理制度
2015/08/06 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang