ES6/ES7 三点式 —— 扩展运算符与剩余操作符

zgbgx 发布于2019-08-21 16:44 / 874人阅读

摘要：扩展运算符的应用接下来看看扩展运算符的常见应用。会报错方式使用扩展运算符代替方法方式扩展运算符方式剩余操作符另外一种以三个点形式出现的是剩余操作符，与扩展操作符相反，剩余操作符将多个值收集为一个变量，而扩展操作符是将一个数组扩展成多个值。

ES6 标准提供给 JavaScript 开发者许多简化代码的新特性，今天要介绍的扩展运算符就是非常常用的一种。可以使你的代码更加简洁优雅。

扩展运算符

扩展运算符以三个点的形式出现 ... 可以将数组或者对象里面的值展开。

const a = [1, 2, 3]

console.log(a) // 1 2 3

const b = {a: 1, b: 2}

console.log({c: 3, ...b}) // {a: 1, b: 2, c: 3}

扩展运算符的应用

接下来看看扩展运算符的常见应用。

1.复制数组和复制对象

const a = [1, 2, 3]
const b = [...a]

// 相当于 b = a.slice()

console.log(a) // [1, 2, 3]
console.log(b) // [1, 2, 3]
console.log(a === b) // false

const a = {a: 1, b: 2}
const b = {...a}

console.log(a) // {a: 1, b: 2}
console.log(b) // {a: 1, b: 2}
console.log(a === b) // false

// 相当于 const b = Object.assign({}, a)

要注意复制时候只会进行浅复制。

2.合并数组和合并对象

const a = [1, 2, 3]
const b = [4, 5]

console.log([...a, ...b]) // [1, 2, 3, 4, 5]

// 相当于 a.concat(b)

const a = {a: 1, b: 2}
const b = {b: 3, c: 4}

console.log({...a, ...b, c: 5}) // {a: 1, b: 3, c: 5}

// 相当于 Object.assign(a, b, {c: 5})

3.类数组对象数组化

前端开发当中经常会遇到一些类数组对象，如：function 的 arguments，document.querySelectorAll 等，通常会将这些类数组对象转换为数组的形式使其可以利用数组原型对象的方法。

const divs = document.querySelectorAll("divs")

// divs.push 会报错

// slice 方式

divs = [].slice.call(divs)

// 使用扩展运算符

divs = [...divs]

4.代替 apply 方法

function sum(x, y, z) {
  console.log(x + y + z)
}

const args = [1, 2, 3]
// apply 方式

fn.apply(null, args)

// 扩展运算符方式

fn(...args)

剩余操作符

另外一种以三个点 ... 形式出现的是剩余操作符，与扩展操作符相反，剩余操作符将多个值收集为一个变量，而扩展操作符是将一个数组扩展成多个值。

// 配合 ES6 解构的新特性
const [a, ...b] = [1, 2, 3]

console.log(a) // 1
console.log(b) // [2, 3]

最后再看一个例子，在日常开发当中非常常见，而且同时利用到扩展操作符和剩余操作符，在 React 开发当中常常会利用一些组件库，为了业务需要我们会将一些组件库提供的组件封装成业务组件方便开发。

import { Button } from "antd"  // 组件库提供的组件

function MyButton({ isDanger, children, ...others }) {
  return (
    
      {isDanger ? 
         :
        
      }
    
  )
}

本文同步于我的个人博客 http://blog.acwong.org/2017/09/23/es6-destructuring-assignment/

云服务器 GPU云服务器 java运算符操作数 python与运算符运算符与表达式 java中字与运算符

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88667.html

【前端】ES6入门基础知识

摘要：关于的入门了解新增模板字符串为提供了简单的字符串插值功能箭头函数操作符左边为输入的参数，而右边则是进行的操作以及返回的值。将对象纳入规范，提供了原生的对象。增加了和命令，用来声明变量。关于ES6的入门了解新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）、for-o...

philadelphia 2019-08-21 17:21 评论0 收藏0
ES6

摘要：对象可被不定参数和默认参数完美代替。将对象纳入规范，提供了原生的对象。规定，命令和命令声明的全局变量，属于全局对象的属性命令命令命令声明的全局变量，不属于全局对象的属性。。这些函数表达式最适合用于非方法函数，并且它们不能用作构造函数。 ES6的了解新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值In...

snifes 2019-08-22 15:57 评论0 收藏0
《从零构建前后分离的web项目》：前端了解过关了吗？

摘要：前端基础架构和硬核介绍技术栈的选择首先我们构建前端架构需要对前端生态圈有一切了解，并且最好带有一定的技术前瞻性，好的技术架构可能日后会方便的扩展，减少重构的次数，即使重构也不需要大动干戈，我通常选型技术栈会参考以下三点一提出自身业务的需求是 # 前端基础架构和硬核介绍 showImg(https://segmentfault.com/img/remote/146000001626972...

lbool 2019-08-23 11:44 评论0 收藏0
《从零构建前后分离的web项目》：前端了解过关了吗？

摘要：前端基础架构和硬核介绍技术栈的选择首先我们构建前端架构需要对前端生态圈有一切了解，并且最好带有一定的技术前瞻性，好的技术架构可能日后会方便的扩展，减少重构的次数，即使重构也不需要大动干戈，我通常选型技术栈会参考以下三点一提出自身业务的需求是 # 前端基础架构和硬核介绍 showImg(https://segmentfault.com/img/remote/146000001626972...

cgspine 2019-08-19 11:06 评论0 收藏0
ES6、ES7、ES8、ES9、ES10新特性一览

摘要：规范最终由敲定。提案由至少一名成员倡导的正式提案文件，该文件包括事例。箭头函数这是中最令人激动的特性之一。数组拷贝等同于展开语法和行为一致执行的都是浅拷贝只遍历一层。不使用对象中必须包含属性和值，显得非常冗余。 ES全称ECMAScript，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMA-417。关于ECMA的最新资讯可以...

Muninn 2019-05-23 16:24 评论0 收藏0