ES6 標準提供給 JavaScript 開發(fā)者許多簡化代碼的新特性，今天要介紹的擴展運算符就是非常常用的一種?？梢允鼓愕拇a更加簡潔優(yōu)雅。

擴展運算符

擴展運算符以三個點的形式出現(xiàn) ... 可以將數(shù)組或者對象里面的值展開。

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.復制數(shù)組和復制對象

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.合并數(shù)組和合并對象

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.類數(shù)組對象數(shù)組化

前端開發(fā)當中經(jīng)常會遇到一些類數(shù)組對象，如：function 的 arguments，document.querySelectorAll 等，通常會將這些類數(shù)組對象轉換為數(shù)組的形式使其可以利用數(shù)組原型對象的方法。

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)

剩余操作符

另外一種以三個點 ... 形式出現(xiàn)的是剩余操作符，與擴展操作符相反，剩余操作符將多個值收集為一個變量，而擴展操作符是將一個數(shù)組擴展成多個值。

// 配合 ES6 解構的新特性

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

console.log(a) // 1

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

最后再看一個例子，在日常開發(fā)當中非常常見，而且同時利用到擴展操作符和剩余操作符，在 React 開發(fā)當中常常會利用一些組件庫，為了業(yè)務需要我們會將一些組件庫提供的組件封裝成業(yè)務組件方便開發(fā)。

import { Button } from 'antd' // 組件庫提供的組件

function MyButton({ isDanger, children, ...others }) {

return (

{isDanger ?

{children} :

{children}

}

)

}

總結

以上是生活随笔為你收集整理的es6 三点运算符_ES6/ES7 三点式 —— 扩展运算符与剩余操作符的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。