扩展运算符的作用及使用场景
(1)对象扩展运算符
对象的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中。
let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
上述方法实际上等价于:
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }
Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。(如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性)。
同样,如果用户自定义的属性,放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉。
let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}}; // {a: 2, b: 4}
利用上述特性就可以很方便的修改对象的部分属性。在redux中的reducer函数规定必须是一个纯函数,reducer中的state对象要求不能直接修改,可以通过扩展运算符把修改路径的对象都复制一遍,然后产生一个新的对象返回。
需要注意:扩展运算符对对象实例的拷贝属于浅拷贝。
(2)数组扩展运算符
数组的扩展运算符可以将一个数组转为用逗号分隔的参数序列,且每次只能展开一层数组。
console.log(...[1, 2, 3])
// 1 2 3
console.log(...[1, [2, 3, 4], 5])
// 1 [2, 3, 4] 5
下面是数组的扩展运算符的应用:
将数组转换为参数序列
function add(x, y) {return x + y;
}
const numbers = [1, 2];
add(...numbers) // 3
复制数组
const arr1 = [1, 2];
const arr2 = [...arr1];
要记住:扩展运算符(…)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中,这里参数对象是个数组,数组里面的所有对象都是基础数据类型,将所有基础数据类型重新拷贝到新的数组中。
合并数组
如果想在数组内合并数组,可以这样:
const arr1 = ['two', 'three'];
const arr2 = ['one', ...arr1, 'four', 'five'];
// ["one", "two", "three", "four", "five"]
扩展运算符与解构赋值结合起来,用于生成数组
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
需要注意:如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。
const [...rest, last] = [1, 2, 3, 4, 5]; // 报错
const [first, ...rest, last] = [1, 2, 3, 4, 5]; // 报错
将字符串转化为正真的数组
[...'hello'] // [ "h", "e", "l", "l", "o" ]
任何 Iterator 接口的对象,都可以用扩展运算符转为真正的数组
比较常见的应用是可以将某些数据结构转为数组:
// arguments对象
function foo() {const args = [...arguments];
}
用于替换es5中的Array.prototype.slice.call(arguments)写法。
使用Math函数获取数组中特定的值
const numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
Math.max(...numbers); // 9
扩展运算符的作用及使用场景相关推荐
- Javascript中扩展运算符的作用及使用场景
扩展运算符(-)是ES6新增的一个运算符,下面来介绍一下它的使用场景及作用 1.作为函数的形参 在作为函数的形参时,通过 -数组名 来表示,也称为rest参数,当函数被调用时传入的实参全部会被放入到这 ...
- ES6——扩展运算符的作用以及使用场景
文章目录 对象扩展运算符 解构赋值 扩展运算符 数组扩展运算符 替代函数的apply() 方法 扩展运算符的应用 复制数组 合并数组 与解构赋值结合 字符串 实现了Iterator接口的对象 对象扩展 ...
- 扩展运算符的作用以及使用场景
扩展运算符 对象的扩展运算符(-)用于取出参数对象中的所有可遍历属性,拷贝到当前对象中 在JS中,扩展运算符(spread)是三个点-,剩余运算符(rest)同为三个点(-) 我们可以把-理解为展开运 ...
- es6之三个点(...) 扩展运算符数组和对象的使用场景及最常见的用法(霸霸看了都说好)
概念 es6之扩展运算符 (-) 简称三个点 数组的扩展运算符应用 复制数组 扩展运算符提供了复制数组的简便写法. const a1 = [1, 2]; // 写法一 const a2 = [...a ...
- Vue中...(三个点)的意思及作用(扩展运算符)
扩展运算符. 对数组和对象而言,就是将运算符后面的变量里东西每一项拆下来. (一)操作数组 // 1.把数组中的元素孤立起来 let iArray = ['1', '2', '3']; console ...
- ES6高级:扩展运算符,箭头函数,class类,iterator迭代器
2. 扩展运算符 ... 2.1 reset参数 reset参数==必须放在最后==,为了替代arguments,在函数形参中使用,==接受剩余参数==,以==数组==的形式去接受 //1. rese ...
- ES6 | let 关键字 + const关键字 + 箭头函数 + rest参数 + 扩展运算符 ... + Symbol + 迭代器 + 生成器 + 变量的解构赋值 + 模板字符串
目录 ECMASript 相关介绍 ECMASript 6 新特性 let 关键字 const关键字 变量的解构赋值 模板字符串 简化对象写法 箭头函数 => 参数默认值 rest参数 扩展运算 ...
- ES6 rest参数,扩展运算符,Symbol数据类型,迭代器和生成器 【详解加案例 】(二)
文章目录 1.ES6 rest 参数 2. ES6 扩展运算符 2.1 ES6 简介 2.2 应用 3. ES6 Symbol 数据类型 3.1 Symbol两种创建方式 3.2 Symbol注意事项 ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
最新文章
- LNMP安装与启动脚本编写
- maven2学习总结(3,maven2在淘宝项目的应用)
- Oracle应用开发手记
- OpenCV使用人脸界标检测进行人脸交换
- 【图论】【最短路】【SPFA】【USACO题库】2.4.4 Bessie Come Home回家(jzoj 1274)
- RTTI: dynamic_cast typeid
- mysql连接代码_MySQL 表连接
- SQL Server数据库事务处理详解(MSDN网上资源)
- 嵌入式 Linux 4.0,嵌入式多媒体中心 OpenELEC 4.0.4
- 谷歌浏览器32位安装包_谷歌团队新作!只需下载3M安装包,就能让你的手机浏览器跟踪眼球运动...
- 【WEB程序设计】web程序设计的一些基本知识
- Unity文件、META文件、Prefab文件
- Unity移动端、WebGL 四边形线框Shader 实现
- CMPP错误码(zzzz)
- Bootstrap3 和 Bootstrap4 的区别
- uni-app修改页面背景色:
- (智能间距换行均满足)Excel中单元格批量调整行间距,行高自动适应内容,且自动换行
- 店铺定位目的,品牌传播,产品、人群、价格定位
- 【Android】实现九宫格展示图片+视频(仿QQ空间、微信朋友圈)
- 计算机网络相关术语概念名词汇总总结集合——摘自《计算机网络--自顶向下》第四章
热门文章
- 答评论:写在员工离职之后
- 【TCP实现文件传输 --文件上传和下载】
- 【渝粤题库】陕西师范大学600009 化学教学论 作业(专升本)
- 介绍photoshop教程中保存历史记录日志的方法
- 《Sibelius 脚本程序设计》连载(二) - 前言
- 如何用计算机计算2的1.5倍,关于1.5倍速观看学习视频的体验报告
- 异地情侣如何安全地传递情书 — 哈希时间锁定机制剖析
- 腾讯 Omi 生态发布
- 关于破解windows开机密码
- chrome插件下载,chrome商店,chrome extension,crx下载