ES6/ES7 三點式 —— 擴展運算符與剩余操作符

zgbgx 發布于2019-08-21 16:44 / 897人閱讀

摘要：擴展運算符的應用接下來看看擴展運算符的常見應用。會報錯方式使用擴展運算符代替方法方式擴展運算符方式剩余操作符另外一種以三個點形式出現的是剩余操作符，與擴展操作符相反，剩余操作符將多個值收集為一個變量，而擴展操作符是將一個數組擴展成多個值。

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中字與運算符

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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