ES6/ES7 三點式 —— 擴展運算符與剩餘操做符

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 (
    <div>
      {isDanger ? 
        <Button {...others} size="large" type="danger">{children}</Button> :
        <Button {...others} size="small" type="primary">{children}</Button>
      }
    </div>
  )
}

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