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 相关文章推荐
二级域名转向类
Nov 09 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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中常用编辑器推荐
2007/01/02 PHP
php date()日期时间函数详解
2010/05/16 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
PHP实现简易图形计算器
2020/08/28 PHP
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
js实现音乐播放控制条
2017/09/09 Javascript
vue实现登录拦截
2020/06/29 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
Python continue语句用法实例
2014/03/11 Python
使用python实现rsa算法代码
2016/02/17 Python
Python数组定义方法
2016/04/13 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
入党申请人的自我鉴定
2013/12/01 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
个人总结与自我评价
2015/02/14 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA