JavaScript擴展運算符的學習及應用詳情(ES6)

前言:

擴展運算符是ES6新增的一種運算符,他可以幫助我們簡化代碼,簡化操作,所以在開發中是非常常用的,下面我將從學習應用兩個方面來帶掘友學習擴展運算符。

學習

我們先來學習一下擴展運算符的使用語法

擴展運算符使用形式為...[1,2,3]...加上數組

其作用可以理解成與rest相反的操作,rest參數是在函數中將參數轉化為數組形式傳進函數內,而擴展運算符是將數組轉換至以逗號相隔的參數序列。

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

上面我聲明瞭一個數組,通過擴展運算符的方式打印,得到一個參數序列,瞭解完語法後來主要學習擴展運算符的應用場景

應用

下面我將從函數應用數組合並解構賦值字符串轉換轉換數組五個方面展開擴展運算符的應用場景。

函數參數

由擴展運算符運算結果的特性,可以將其運用在函數傳入參數時

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

上面我將arr數組搭配擴展運算符傳入函數,分別對應參數xy

值得註意的是在有擴展運算符之前,我們是通過使用apply方法將數組作為參數傳入函數的,它的使用方式如下,拿上面的add函數舉例:

add.apply(null,arr) // 3

因為apply可以改變this指向並傳入參數,借此特性可以將數組作為參數。

數組合並

在ES5中的數組合並是通過concat函數來實現的,又或者使用push來實現

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中通過擴展運算符進行直接合並,這樣的做法可以很好得簡潔代碼,增加代碼的可讀性。

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

解構賦值

在一個數組中,我們想要拿到第一個元素外的所有元素,那麼在ES5中我們可以這麼做:

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

而在ES6中我們可以直接使用解構來分割參數

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

字符串轉換

可以使用使用解構賦值將字符串轉換為數組

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

還可以改造length屬性,因為如果字符串內包含Unicode字符,那麼直接的length會有問題,所以可以使用擴展運算符轉換後拿到正確的length屬性

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

如上代碼所示,使用擴展運算符可以避免Unicode長度識別問題

轉換數組

我們可以通過使用擴展運算符將偽數組轉化為數組,偽數組我們可以理解為類似數組的一個集合,這裡簡單提一下偽數組。

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

這就涉及到一個痛點,大傢在使用DOM的時候如果想使用數組的一些方法,那怎麼辦呢?我們就可以先轉化為數組再去使用這些方法,下面舉一個簡單的操作dom例子。

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

到此這篇關於JavaScript擴展運算符的學習及應用詳情(ES6)的文章就介紹到這瞭,更多相關JS擴展運算符內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: