前言：

擴(kuò)展運(yùn)算符是ES6新增的一種運(yùn)算符，他可以幫助我們簡化代碼，簡化操作，所以在開發(fā)中是非常常用的，下面我將從學(xué)習(xí)與應(yīng)用兩個方面來帶掘友學(xué)習(xí)擴(kuò)展運(yùn)算符。

學(xué)習(xí)

我們先來學(xué)習(xí)一下擴(kuò)展運(yùn)算符的使用語法

擴(kuò)展運(yùn)算符使用形式為...[1,2,3]，...加上數(shù)組

其作用可以理解成與rest相反的操作，rest參數(shù)是在函數(shù)中將參數(shù)轉(zhuǎn)化為數(shù)組形式傳進(jìn)函數(shù)內(nèi)，而擴(kuò)展運(yùn)算符是將數(shù)組轉(zhuǎn)換至以逗號相隔的參數(shù)序列。

let arr = ["a", "b"];
console.log(...arr); // a b

上面我聲明了一個數(shù)組，通過擴(kuò)展運(yùn)算符的方式打印，得到一個參數(shù)序列，了解完語法后來主要學(xué)習(xí)擴(kuò)展運(yùn)算符的應(yīng)用場景

應(yīng)用

下面我將從函數(shù)應(yīng)用，數(shù)組合并，解構(gòu)賦值，字符串轉(zhuǎn)換與轉(zhuǎn)換數(shù)組五個方面展開擴(kuò)展運(yùn)算符的應(yīng)用場景。

函數(shù)參數(shù)

由擴(kuò)展運(yùn)算符運(yùn)算結(jié)果的特性，可以將其運(yùn)用在函數(shù)傳入?yún)?shù)時

function add(x, y) {
 ?return x + y;
}
let arr = [1, 2];
add(...arr); // 3

上面我將arr數(shù)組搭配擴(kuò)展運(yùn)算符傳入函數(shù)，分別對應(yīng)參數(shù)x與y

值得注意的是在有擴(kuò)展運(yùn)算符之前，我們是通過使用apply方法將數(shù)組作為參數(shù)傳入函數(shù)的，它的使用方式如下，拿上面的add函數(shù)舉例：

add.apply(null,arr) // 3

因為apply可以改變this指向并傳入?yún)?shù)，借此特性可以將數(shù)組作為參數(shù)。

數(shù)組合并

在ES5中的數(shù)組合并是通過concat函數(shù)來實現(xiàn)的，又或者使用push來實現(xiàn)

let arr_1 = [1, 2, 3];
let arr_2 = [4, 5, 6];
console.log(arr_1.concat(arr_2)); // [ 1, 2, 3, 4, 5, 6 ]

而在ES6中通過擴(kuò)展運(yùn)算符進(jìn)行直接合并，這樣的做法可以很好得簡潔代碼，增加代碼的可讀性。

console.log([...arr_1,...arr_2]) // [ 1, 2, 3, 4, 5, 6 ]

解構(gòu)賦值

在一個數(shù)組中，我們想要拿到第一個元素外的所有元素，那么在ES5中我們可以這么做：

let arr = [1,2,3,4]
let node = arr[0];
let rest = arr.slice(1)
console.log(rest) // [ 2, 3, 4 ]

而在ES6中我們可以直接使用解構(gòu)來分割參數(shù)

let arr = [1,2,3,4]
let [a,...b] = arr
console.log(a,b) // 1 [ 2 , 3 , 4 ]

字符串轉(zhuǎn)換

可以使用使用解構(gòu)賦值將字符串轉(zhuǎn)換為數(shù)組

console.log([...'豬痞惡霸']) // ['豬', '痞', '惡', '霸']

還可以改造length屬性，因為如果字符串內(nèi)包含Unicode字符，那么直接的length會有問題，所以可以使用擴(kuò)展運(yùn)算符轉(zhuǎn)換后拿到正確的length屬性

function length(str) {
 ? ?return [...str].length
}
console.log(length("\uD83D\uDE80")) // 1
console.log("\uD83D\uDE80".length) // 2

如上代碼所示，使用擴(kuò)展運(yùn)算符可以避免Unicode長度識別問題

轉(zhuǎn)換數(shù)組

我們可以通過使用擴(kuò)展運(yùn)算符將偽數(shù)組轉(zhuǎn)化為數(shù)組，偽數(shù)組我們可以理解為類似數(shù)組的一個集合，這里簡單提一下偽數(shù)組。

我們常見的有倆種偽數(shù)組，一個是arguments還有一個是DOM的children屬性，獲取回來的子節(jié)點(diǎn)集合。偽數(shù)組與數(shù)組的區(qū)別就是它們的_proto_區(qū)別，而普通數(shù)組有很多數(shù)組的方法，比如說push，shift，map等等，而偽數(shù)組卻無法使用這些方法。

這就涉及到一個痛點(diǎn)，大家在使用DOM的時候如果想使用數(shù)組的一些方法，那怎么辦呢？我們就可以先轉(zhuǎn)化為數(shù)組再去使用這些方法，下面舉一個簡單的操作dom例子。

const divs = document.querySelectorAll('div')
const divArr = [...divs]
console.log(divArr)

到此這篇關(guān)于JavaScript擴(kuò)展運(yùn)算符的學(xué)習(xí)及應(yīng)用詳情(ES6)的文章就介紹到這了,更多相關(guān)JS擴(kuò)展運(yùn)算符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論