(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

扩展运算符的作用及使用场景相关推荐

  1. Javascript中扩展运算符的作用及使用场景

    扩展运算符(-)是ES6新增的一个运算符,下面来介绍一下它的使用场景及作用 1.作为函数的形参 在作为函数的形参时,通过 -数组名 来表示,也称为rest参数,当函数被调用时传入的实参全部会被放入到这 ...

  2. ES6——扩展运算符的作用以及使用场景

    文章目录 对象扩展运算符 解构赋值 扩展运算符 数组扩展运算符 替代函数的apply() 方法 扩展运算符的应用 复制数组 合并数组 与解构赋值结合 字符串 实现了Iterator接口的对象 对象扩展 ...

  3. 扩展运算符的作用以及使用场景

    扩展运算符 对象的扩展运算符(-)用于取出参数对象中的所有可遍历属性,拷贝到当前对象中 在JS中,扩展运算符(spread)是三个点-,剩余运算符(rest)同为三个点(-) 我们可以把-理解为展开运 ...

  4. es6之三个点(...) 扩展运算符数组和对象的使用场景及最常见的用法(霸霸看了都说好)

    概念 es6之扩展运算符 (-) 简称三个点 数组的扩展运算符应用 复制数组 扩展运算符提供了复制数组的简便写法. const a1 = [1, 2]; // 写法一 const a2 = [...a ...

  5. Vue中...(三个点)的意思及作用(扩展运算符)

    扩展运算符. 对数组和对象而言,就是将运算符后面的变量里东西每一项拆下来. (一)操作数组 // 1.把数组中的元素孤立起来 let iArray = ['1', '2', '3']; console ...

  6. ES6高级:扩展运算符,箭头函数,class类,iterator迭代器

    2. 扩展运算符 ... 2.1 reset参数 reset参数==必须放在最后==,为了替代arguments,在函数形参中使用,==接受剩余参数==,以==数组==的形式去接受 //1. rese ...

  7. ES6 | let 关键字 + const关键字 + 箭头函数 + rest参数 + 扩展运算符 ... + Symbol + 迭代器 + 生成器 + 变量的解构赋值 + 模板字符串

    目录 ECMASript 相关介绍 ECMASript 6 新特性 let 关键字 const关键字 变量的解构赋值 模板字符串 简化对象写法 箭头函数 => 参数默认值 rest参数 扩展运算 ...

  8. ES6 rest参数,扩展运算符,Symbol数据类型,迭代器和生成器 【详解加案例 】(二)

    文章目录 1.ES6 rest 参数 2. ES6 扩展运算符 2.1 ES6 简介 2.2 应用 3. ES6 Symbol 数据类型 3.1 Symbol两种创建方式 3.2 Symbol注意事项 ...

  9. javascript ES6 新特性之 扩展运算符 三个点 ...

    对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...

最新文章

  1. LNMP安装与启动脚本编写
  2. maven2学习总结(3,maven2在淘宝项目的应用)
  3. Oracle应用开发手记
  4. OpenCV使用人脸界标检测进行人脸交换
  5. 【图论】【最短路】【SPFA】【USACO题库】2.4.4 Bessie Come Home回家(jzoj 1274)
  6. RTTI: dynamic_cast typeid
  7. mysql连接代码_MySQL 表连接
  8. SQL Server数据库事务处理详解(MSDN网上资源)
  9. 嵌入式 Linux 4.0,嵌入式多媒体中心 OpenELEC 4.0.4
  10. 谷歌浏览器32位安装包_谷歌团队新作!只需下载3M安装包,就能让你的手机浏览器跟踪眼球运动...
  11. 【WEB程序设计】web程序设计的一些基本知识
  12. Unity文件、META文件、Prefab文件
  13. Unity移动端、WebGL 四边形线框Shader 实现
  14. CMPP错误码(zzzz)
  15. Bootstrap3 和 Bootstrap4 的区别
  16. uni-app修改页面背景色:
  17. (智能间距换行均满足)Excel中单元格批量调整行间距,行高自动适应内容,且自动换行
  18. 店铺定位目的,品牌传播,产品、人群、价格定位
  19. 【Android】实现九宫格展示图片+视频(仿QQ空间、微信朋友圈)
  20. 计算机网络相关术语概念名词汇总总结集合——摘自《计算机网络--自顶向下》第四章

热门文章

  1. 答评论:写在员工离职之后
  2. 【TCP实现文件传输 --文件上传和下载】
  3. 【渝粤题库】陕西师范大学600009 化学教学论 作业(专升本)
  4. 介绍photoshop教程中保存历史记录日志的方法
  5. 《Sibelius 脚本程序设计》连载(二) - 前言
  6. 如何用计算机计算2的1.5倍,关于1.5倍速观看学习视频的体验报告
  7. 异地情侣如何安全地传递情书 — 哈希时间锁定机制剖析
  8. 腾讯 Omi 生态发布
  9. 关于破解windows开机密码
  10. chrome插件下载,chrome商店,chrome extension,crx下载