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 相关文章推荐
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 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
isset和empty的区别
2007/01/15 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
js实现消息滚动效果
2017/01/18 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
浅谈Django REST Framework限速
2017/12/12 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python爬虫实例详解
2018/06/19 Python
python3 线性回归验证方法
2019/07/09 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
python计算无向图节点度的实例代码
2019/11/22 Python
python numpy数组中的复制知识解析
2020/02/03 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
基于Python测试程序是否有错误
2020/05/16 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
村党组织公开承诺书
2015/04/30 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
早安问候语大全
2015/11/10 职场文书