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 相关文章推荐
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
JSON格式化输出
Nov 10 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
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更新mysql后获取改变行数的方法
2014/12/25 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
python 连续不等式语法糖实例
2020/04/15 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
办公室文书岗位职责
2013/12/16 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
公务员检讨书
2014/11/01 职场文书
酒店辞职书范文
2015/02/26 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
Python实现8种常用抽样方法
2021/06/27 Python
配置nginx负载均衡
2022/05/06 Servers