資訊專欄INFORMATION COLUMN
摘要：擴(kuò)展運(yùn)算符的應(yīng)用接下來看看擴(kuò)展運(yùn)算符的常見應(yīng)用。會(huì)報(bào)錯(cuò)方式使用擴(kuò)展運(yùn)算符代替方法方式擴(kuò)展運(yùn)算符方式剩余操作符另外一種以三個(gè)點(diǎn)形式出現(xiàn)的是剩余操作符，與擴(kuò)展操作符相反，剩余操作符將多個(gè)值收集為一個(gè)變量，而擴(kuò)展操作符是將一個(gè)數(shù)組擴(kuò)展成多個(gè)值。
ES6 標(biāo)準(zhǔn)提供給 JavaScript 開發(fā)者許多簡化代碼的新特性，今天要介紹的擴(kuò)展運(yùn)算符就是非常常用的一種?？梢允鼓愕拇a更加簡潔優(yōu)雅。
擴(kuò)展運(yùn)算符擴(kuò)展運(yùn)算符以三個(gè)點(diǎn)的形式出現(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}
擴(kuò)展運(yùn)算符的應(yīng)用
接下來看看擴(kuò)展運(yùn)算符的常見應(yīng)用。
1.復(fù)制數(shù)組和復(fù)制對象
const a = [1, 2, 3] const b = [...a] // 相當(dāng)于 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
// 相當(dāng)于 const b = Object.assign({}, a)
要注意復(fù)制時(shí)候只會(huì)進(jìn)行淺復(fù)制。
2.合并數(shù)組和合并對象
const a = [1, 2, 3] const b = [4, 5] console.log([...a, ...b]) // [1, 2, 3, 4, 5] // 相當(dāng)于 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}
// 相當(dāng)于 Object.assign(a, b, {c: 5})
3.類數(shù)組對象數(shù)組化
前端開發(fā)當(dāng)中經(jīng)常會(huì)遇到一些類數(shù)組對象，如：function 的 arguments，document.querySelectorAll 等，通常會(huì)將這些類數(shù)組對象轉(zhuǎn)換為數(shù)組的形式使其可以利用數(shù)組原型對象的方法。
const divs = document.querySelectorAll("divs")
// divs.push 會(huì)報(bào)錯(cuò)
// slice 方式
divs = [].slice.call(divs)
// 使用擴(kuò)展運(yùn)算符
divs = [...divs]
4.代替 apply 方法
function sum(x, y, z) {
console.log(x + y + z)
}
const args = [1, 2, 3]
// apply 方式
fn.apply(null, args)
// 擴(kuò)展運(yùn)算符方式
fn(...args)
剩余操作符
另外一種以三個(gè)點(diǎn) ... 形式出現(xiàn)的是剩余操作符，與擴(kuò)展操作符相反，剩余操作符將多個(gè)值收集為一個(gè)變量，而擴(kuò)展操作符是將一個(gè)數(shù)組擴(kuò)展成多個(gè)值。
// 配合 ES6 解構(gòu)的新特性 const [a, ...b] = [1, 2, 3] console.log(a) // 1 console.log(b) // [2, 3]
最后再看一個(gè)例子，在日常開發(fā)當(dāng)中非常常見，而且同時(shí)利用到擴(kuò)展操作符和剩余操作符，在 React 開發(fā)當(dāng)中常常會(huì)利用一些組件庫，為了業(yè)務(wù)需要我們會(huì)將一些組件庫提供的組件封裝成業(yè)務(wù)組件方便開發(fā)。
import { Button } from "antd" // 組件庫提供的組件
function MyButton({ isDanger, children, ...others }) {
return (
{isDanger ?
:
}
)
}
本文同步于我的個(gè)人博客 http://blog.acwong.org/2017/09/23/es6-destructuring-assignment/
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88667.html
摘要：關(guān)于的入門了解新增模板字符串為提供了簡單的字符串插值功能箭頭函數(shù)操作符左邊為輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值。將對象納入規(guī)范，提供了原生的對象。增加了和命令，用來聲明變量。 關(guān)于ES6的入門了解 新增模板字符串（為JavaScript提供了簡單的字符串插值功能）、箭頭函數(shù)（操作符左邊為輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值Inputs=>outputs。）、for-o...
摘要：前端基礎(chǔ)架構(gòu)和硬核介紹技術(shù)棧的選擇首先我們構(gòu)建前端架構(gòu)需要對前端生態(tài)圈有一切了解，并且最好帶有一定的技術(shù)前瞻性，好的技術(shù)架構(gòu)可能日后會(huì)方便的擴(kuò)展，減少重構(gòu)的次數(shù)，即使重構(gòu)也不需要大動(dòng)干戈，我通常選型技術(shù)棧會(huì)參考以下三點(diǎn)一提出自身業(yè)務(wù)的需求是 # 前端基礎(chǔ)架構(gòu)和硬核介紹 showImg(https://segmentfault.com/img/remote/146000001626972...
摘要：前端基礎(chǔ)架構(gòu)和硬核介紹技術(shù)棧的選擇首先我們構(gòu)建前端架構(gòu)需要對前端生態(tài)圈有一切了解，并且最好帶有一定的技術(shù)前瞻性，好的技術(shù)架構(gòu)可能日后會(huì)方便的擴(kuò)展，減少重構(gòu)的次數(shù)，即使重構(gòu)也不需要大動(dòng)干戈，我通常選型技術(shù)棧會(huì)參考以下三點(diǎn)一提出自身業(yè)務(wù)的需求是 # 前端基礎(chǔ)架構(gòu)和硬核介紹 showImg(https://segmentfault.com/img/remote/146000001626972...
摘要：規(guī)范最終由敲定。提案由至少一名成員倡導(dǎo)的正式提案文件，該文件包括事例。箭頭函數(shù)這是中最令人激動(dòng)的特性之一。數(shù)組拷貝等同于展開語法和行為一致執(zhí)行的都是淺拷貝只遍歷一層。不使用對象中必須包含屬性和值，顯得非常冗余。 ES全稱ECMAScript，ECMAScript是ECMA制定的標(biāo)準(zhǔn)化腳本語言。目前JavaScript使用的ECMAScript版本為ECMA-417。關(guān)于ECMA的最新資訊可以...
閱讀 1012·2023-04-26 02:21
閱讀 2828·2021-09-24 09:47
閱讀 1622·2019-08-30 15:55
閱讀 2176·2019-08-30 14:01
閱讀 2332·2019-08-29 14:01
閱讀 2057·2019-08-29 12:46
閱讀 826·2019-08-26 13:27
閱讀 1950·2019-08-26 12:23
