ES6基础之展开语法(Spread syntax)


Posted in Javascript onFebruary 21, 2019

展开语法用"..."进行表示,展开语法将可迭代的对象拆分成独立的值(语法层面展开)。扩展语法通常用于将可迭代的对象的值传递到函数的参数中。今天小编将从以下方面进行介绍:

  • 函数传参中的应用
  • 数组的相关应用
  • 剩余参数的应用
  • 函数传参中的应用

ES6之前,如果我们希望将数组作为参数分别传递给函数中的参数,我们可以使用Function的apply()方法。如下段代码所示:

function myFunction(a, b) {
 return a + b;
}
var data = [1, 4];
var result = myFunction.apply(null, data);
console.log(result); //Output "5”

从上述代码,apply方法接受一个数组,将它们分拆成单独参数传递函数进行调用。

ES6的展开语法能让我们以更简洁的方式进行调用,如下段代码所示:

function myFunction(a, b) {
  return a + b; 
}
let data = [1, 4];
let result = myFunction(...data);
console.log(result); //Output "5”

代码运行期间,JavaScript解释器调用myFunction之前,将会用1,4表达式替换...运算符:

let result = myFunction(...data);

上述代码将会进行如下转换:

let result = myFunction(1,4);

替换后,函数中的代码将会继续执行。

数组的相关应用

数组的合并

展开语法可将数组添加到另外一个数组中,成为其中的一部分。

let array1 = [2,3,4];
let array2 = [1, ...array1, 5, 6, 7];
console.log(array2); //Output "1, 2, 3, 4, 5, 6, 7”

代码运行期间,如下代码:

let array2 = [1, ...array1, 5, 6, 7];

上述代码将会替换成如下代码:

let array2 = [1, 2, 3, 4, 5, 6, 7];

在push方法中的运用

有时候,我们需要将一个数组的内容追加到另一个数组中,ES6之前我们可以这么做,如下段代码所示:

var array1 = [2,3,4];
var array2 = [1];
Array.prototype.push.apply(array2, array1);
console.log(array2); //Output "1, 2, 3, 4”

ES6的展开语法能以更简洁的形式实现,如下段代码所示:

let array1 = [2,3,4];
let array2=[1];
array2.push(...array1);
console.log(array2); //Output "1, 2, 3, 4”

代码运行期间,如下代码:

array2.push(...array1);

上述代码将会替换成如下代码:

array2.push(2, 3, 4);

传递多个数组参数

我们可以使用展开语法传递多个数组进行参数传递,如下段代码所示:

let array1 = [1];
let array2 = [2];
let array3 = [...array1, ...array2, ...[3, 4]];//multi arrayspread
let array4 = [5];
function myFunction(a, b, c, d, e) {
 return a+b+c+d+e;
}
let result = myFunction(...array3, ...array4); //multi array spread
console.log(result); //Output "15”

剩余参数的应用

我们知道JS函数内部有个arguments对象,可以拿到全部实参。现在ES6给我们带来了一个新的对象,可以拿到除开始参数外的参数,即剩余参数,我们可以使用展开语法...进行获取。

ES6之前,我们可以这样获取剩余参数,如下段代码所示:

function myFunction(a, b) {
  const args = Array.prototype.slice.call(arguments, myFunction.length);
  console.log(args);
}
myFunction(1, 2, 3, 4, 5); //Output "3, 4, 5”

ES6中,上述代码我们可以这样改下,如下段代码所示:

function myFunction(a, b, ...args) {
  console.log(args); //Output "3, 4, 5"
}
myFunction(1, 2, 3, 4, 5);

是不是很简单,有个我们需要注意的事,一旦函数中的参数第一个参数使用剩余参数,就不能声明第二个非剩余参数,否则将会抛出错误。例如下段代码所示:

function fn(...rest,foo) {} 
//Output "SyntaxError: Rest parameter must be last formal parameter"

小节

今天的内容就到这里,展开语法是不是特别的酷啊,在日后的开发中,我们尽量使用新的语法糖替代旧的写法。让我们代码看起来更加干净、整洁、易懂。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
js实现简单的随机点名器
Sep 17 Javascript
JavaScript代码实现简单计算器
Dec 27 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
ES6基础之默认参数值
Feb 21 #Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 #Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
Feb 21 #Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 #Javascript
详解Puppeteer前端自动化测试实践
Feb 21 #Javascript
javascript中join方法实例讲解
Feb 21 #Javascript
React 组件渲染和更新的实现代码示例
Feb 21 #Javascript
You might like
德生H-501的评价与改造
2021/03/02 无线电
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
Python单例模式实例分析
2015/01/14 Python
Python 中的 else详解
2016/04/23 Python
Python科学计算之Pandas详解
2017/01/15 Python
Python递归函数实例讲解
2019/02/27 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
运动会广播稿500字
2014/01/28 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
安全协议书范本
2014/04/21 职场文书