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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
js GridView 实现自动计算操作代码
Mar 25 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
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
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
JS解析XML的实现代码
2009/11/12 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
python实现电子书翻页小程序
2019/07/23 Python
python实现车牌识别的示例代码
2019/08/05 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
pytorch 求网络模型参数实例
2019/12/30 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
python中pdb模块实例用法
2021/01/15 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
Python使用openpyxl复制整张sheet
2021/03/24 Python
团员的自我评价
2013/12/01 职场文书
迎国庆横幅标语
2014/10/08 职场文书
大学军训口号大全
2015/12/24 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
详解Python内置模块Collections
2022/03/22 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python