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
數組搭配擴展運算符傳入函數,分別對應參數x
與y
值得註意的是在有擴展運算符之前,我們是通過使用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!