JavaScript展开操作符(Spread operator)详解


Posted in Javascript onJuly 20, 2019

你可以通过展开操作符(Spread operator)...扩展一个数组对象和字符串。展开运算符(spread)是三个点(…),可以将可迭代对象转为用逗号分隔的参数序列。如同rest参数的逆运算。

用于数组

以数组为例,首先创建一个数组,

const a = [1, 2, 3],
     b = [4,5,6];

你可以轻松赋值一个数组:

const c = [...a] // [1,2,3]

你还可以轻松拼接两个数组:

const d = [...a,...b] // [1,2,3,4,5,6]

也可以如下拼接

const d = [...a,4, 5, 6] // [1,2,3,4,5,6]

如果要把一个数组b的元素全部插入到数组a的后面(不生成新数组),可以这样操作:

const a = [1,2,3];
a.push(...b);

如果要把一个数组b的元素全部插入到数组a的前面(不生成新数组),可以这样操作:

const a = [1,2,3];
a. unshift(...b);

类数组对象变成数组

可以通过展开运算符把类数组对象变成真正的数组:

var list=document.getElementsByTagName('a');
var arr=[..list];

用于对象

展开操作符同样可以用于对象。可以通过以下方式clone一个对象:

const newObj = { ...oldObj }

注意: 如果属性值是一个对象,那么只会生成一个指向该对象的引用,而不会深度拷贝。也就是说,展开运算符不会递归地深度拷贝所有属性。并且,只有可枚举属性会被拷贝,原型链不会被拷贝。

还可以用于merge两个对象。

const obj1 = { a: 111, b: 222 };
const obj2 = { c: 333, d: 444 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // -> { a: 111, b: 222, c: 333, d: 444 }

当然也可以适用于以下的情况:

const others = {third: 3, fourth: 4, fifth: 5}
const items = { first:1, second:1, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

如果merge的多个对象有相同属性,则后面的对象的会覆盖前面对象的属性,比如

const obj1 = { a: 111, b: 222 };
const obj2 = { b: 333, d: 444 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // -> { a: 111, b: 333, d: 444 }

const obj1 = {a:111,b:222}
const merged = {a:222,...obj1}; 
console.log(merged); // -> { a: 111, b: 333 }

const obj1 = {a:111,b:222}
const merged = {...obj1,a:222}; 
console.log(merged); // -> { a: 222, b: 333 }

用于字符串

通过展开操作符,可以把一个字符串分解成一个字符数组,相当于

const hey = 'hey'
const arrayized = [...hey] // ['h', 'e', 'y']

以上代码相当于:

const hey = 'hey'
const arrayized = hey.split('') // ['h', 'e', 'y']

用于函数传参

通过展开操作符,可以通过数组给函数传参:

const f = (foo, bar) => {}
const a = [1, 2]
f(...a)

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sum = sum(...numbers)

用于具有 Iterator 接口的对象

具有 Iterator 接口的对象Map 和 Set 结构,Generator 函数,可以使用展开操作符,比如:

var s = new Set();
s.add(1);
s.add(2);
var arr = [...s]// [1,2]


function * gen() {
  yield 1;
  yield 2;
  yield 3;
}

var arr = [...gen()] // 1,2,3

如果是map,会把每个key 和 value 转成一个数组:

var m = new Map();
m.set(1,1)
m.set(2,2)
var arr = [...m] // [[1,1],[2,2]]

注意以下代码会报错,因为obj不是一个Iterator对象:

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

以上就是全部相关知识点,感谢大家的阅读和对三水点靠木的支持。

Javascript 相关文章推荐
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
Javascript的闭包
Dec 31 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
JavaScript实现刮刮乐效果
Nov 01 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 #Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 #Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 #Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 #Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 #Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 #Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 #Javascript
You might like
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
js里的prototype使用示例
2010/11/19 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
Python实现字符串匹配的KMP算法
2019/04/04 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
Python extract及contains方法代码实例
2020/09/11 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
美国时尚在线:Showpo
2017/09/08 全球购物
计算机应用毕业生自荐信
2013/10/23 职场文书
环境工程求职简历的自我评价范文
2013/10/24 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
运动会领导邀请函
2014/02/05 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
改革共识倡议书
2014/08/29 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
学校师德师风整改措施
2014/10/27 职场文书
政风行风整改报告
2014/11/06 职场文书
仙境之桥观后感
2015/06/16 职场文书
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android