详解ES6 扩展运算符的使用与注意事项


Posted in Javascript onNovember 12, 2020

扩展运算符 spread syntax 又叫展开语法,写法是 ...,顾名思义,其实是用来展开字符串,数组和对象的一种语法,可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开;还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开。常用的语法如下:

//函数调用:
myFunction(...iterableObj);

//字面量数组构造或字符串:
[...iterableObj, '4', ...'hello', 6];

// 构造字面量对象时,进行克隆或者属性拷贝(ECMAScript 2018规范新增特性):
let objClone = { ...obj };

在函数调用时使用扩展运算符相当于使用 Function.prototype.apply

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

//相当于
function myFunction(x, y, z) {}
var args = [0, 1, 2];
myFunction.apply(null, args);

apply 不同的是,我们不仅可以将全部参数放到一个数组中,还可以只将其中几个参数用扩展运算符展开,并且可以再一次调用中多次使用扩展运算符。

function myFunction(a, b, c, d, e) {
  console.log(a, b, c, d, e); //-1 0 1 2 3
  console.log(arguments); //[Arguments] { '0': -1, '1': 0, '2': 1, '3': 2, '4': 3 }
}
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

使用 new 关键字来调用构造函数时,不能直接使用数组加上 apply 的方式(apply 执行的是调用 [[Call]] , 而不是构造 [[Construct]])。有了展开语法, 将数组展开为构造函数的参数就很简单了:

var dateFields = [1970, 0, 1]; // 1970年1月1日
var d = new Date(...dateFields);

如果想要不使用扩展运算符实现同样的效果,我们必须用一个函数包装构造函数,将这个新的构造函数的 prototype 设为原构造函数的实例,用 Object.create(constructor.prototype)(这里主要是为了新构造函数原型的修改不影响原构造函数的原型,直接用 constructor.prototype 作为新构造函数的原型也可以实现)。

function applyAndNew(constructor, args) {
  function partial() {
    return constructor.apply(this, args);
  }
  if (typeof constructor.prototype === 'object') {
    partial.prototype = Object.create(constructor.prototype);
  }
  return partial;
}

function myConstructor() {
  console.log('arguments.length: ' + arguments.length);
  console.log(arguments);
  this.prop1 = 'val1';
  this.prop2 = 'val2';
}

var myArguments = ['hi', 'how', 'are', 'you', 'mr', null];
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);

console.log(new myConstructorWithArguments());
// (myConstructor构造函数中):      arguments.length: 6
// (myConstructor构造函数中):      ["hi", "how", "are", "you", "mr", null]
// ("new myConstructorWithArguments"中): {prop1: "val1", prop2: "val2"}

当然用的最多的还是在字面量数组上,没有展开语法的时候,只能组合使用 push, splice, concat 等方法,来将已有数组元素变成新数组的一部分。有了展开语法, 通过字面量方式, 构造新数组会变得更简单、更优雅:

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

可以用来实现数组浅拷贝:

var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4);

// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响

连接多个数组:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];

扩展运算符还可以将已有对象的所有可枚举(enumerable)属性拷贝到新构造的对象中。该方法为浅拷贝,可以拷贝 Symbol 属性,但不包含原型上的属性和方法。如果同时拷贝多个对象,后面的对象会覆盖前面对象的同名属性。

var obj1 = { foo: 'bar', x: 42, [Symbol('a')]: 123 };
var obj2 = { foo: 'baz', x: 100, y: 13 };

var clonedObj = { ...obj1 };
console.log(clonedObj); //{ foo: 'bar', x: 42, [Symbol(a)]: 123 }

var mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); //{ foo: 'baz', x: 100, y: 13, [Symbol(a)]: 123 }

该方法的性质和 Object.assign 类似,但是 Object.assign() 函数会触发 setters,而展开语法则不会。

注意事项

  1. 在数组或函数参数中使用展开语法时, 扩展运算符只能用于可迭代对象。
  2. 只有函数调用时,扩展运算符才可以放在圆括号中,否则会报错。
  3. 只能用在函数调用,字面量数组(可以在数组中展开字符串),字面量对象中。
  4. 用于数组的解构赋值的时候,扩展运算符只能处于最后一个。
  5. 展开对象可以是任意可迭代对象。

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。如果函数的最后一个命名参数以 ... 为前缀,则它将成为一个由剩余参数组成的真数组,其中从 0(包括)到 theArgs.length(排除)的元素由传递给函数的实际参数提供。

剩余语法(Rest syntax) 看起来和展开语法完全相同,不同点在于, 剩余参数用于解构数组和对象。从某种意义上说,剩余语法与展开语法是相反的:展开语法将数组展开为其中的各个元素,而剩余语法则是将多个元素收集起来并“凝聚”为单个元素。扩展运算符是用在函数调用,而剩余参数是用在函数声明。

剩余参数和 arguments 对象之间的区别主要有三个:

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

如果剩余参数(包括在解构赋值中)右侧有逗号,会抛出 SyntaxError,因为剩余元素必须是函数的最后一个参数或者数组的最后一个元素。

以上就是详解ES6 扩展运算符的详细内容,更多关于ES6 扩展运算符的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
js function使用心得
May 10 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
在vue中使用image-webpack-loader实例
Nov 12 #Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 #Javascript
JavaScript ES 模块的使用
Nov 12 #Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 #Javascript
vue 解决provide和inject响应的问题
Nov 12 #Javascript
vue的$http的get请求要加上params操作
Nov 12 #Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 #Javascript
You might like
PHP5 面向对象程序设计
2008/02/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
php自定义分页类完整实例
2015/12/25 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
JS产生随机数的几个用法详解
2016/06/22 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
Python中的filter()函数的用法
2015/04/27 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
pandas object格式转float64格式的方法
2018/04/10 Python
python根据url地址下载小文件的实例
2018/12/18 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
Django设置Postgresql的操作
2020/05/14 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
python实现粒子群算法
2020/10/15 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
医生实习工作总结的自我评价
2013/09/27 职场文书
团支书的期末学习总结自我评价
2013/11/01 职场文书
工业学校毕业生自荐信范文
2014/01/03 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
企业晚会策划方案
2014/05/29 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
书法社团活动总结
2015/05/07 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
python中redis包操作数据库的教程
2022/04/19 Python