JS擴展操作符寫法有哪些

這篇文章主要介紹“JS擴展操作符寫法有哪些”，在日常操作中，相信很多人在JS擴展操作符寫法有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS擴展操作符寫法有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1. 字符串轉數組

字符串轉數組最普遍的做法是這樣：

let str = 'hello' let arr = str.split('') console.log(arr)  // ['h', 'e', 'l', 'l', 'o']

而使用了擴展操作符后可以這樣：

let str = 'hello' let arr = [...str] console.log(arr)  // ['h', 'e', 'l', 'l', 'o']

2. 將類數組轉換為數組

在 JS 中有一種數據結構叫做 NodeList，它和數組很相似，也被叫做“類數組”，類數組是什么?在 MDN  中是這么定義它的：

• “類數組：擁有一個 length 屬性和若干索引屬性的任意對象。

類數組有哪些呢?以下這些可以看成是類數組：

• NodeList：document.querySelectorAll() 返回的對象;

• HTMLCollection：document.getElementsByTagName() 返回的對象;

• Arguments：函數里的參數對象;

類數組沒有數組的一些方法比如 push、map 等，所以經常需要將它們轉成數組，而通常我們是這么轉化的：

let nodeList = document.querySelectorAll('div') console.log(nodeList instanceof NodeList)  // true  let arr = Array.apply(null, nodeList) console.log(arr instanceof Array)  // true  // 或者 let arr2 = [].slice.call(nodeList) console.log(arr2 instanceof Array)  // true  // 又或者 let arr3 = Array.from(nodeList) console.log(arr3 instanceof Array)  // true

而有了擴展操作符可以這么做：

let nodeList = document.querySelectorAll('div') let arr = [...nodeList] console.log(arr instanceof Array)  // true

3. 向數組中添加項

往數組中添加幾項通常這樣操作：

let arr = [5]  // 從頭部添加 arr.unshift(1, 2) console.log(arr)  // [1, 2, 5]  // 從尾部添加 arr.push(6, 7) console.log(arr)  // [1，2, 5, 6, 7]  // 從任意位置添加 arr.splice(2, 0, 3, 4) console.log(arr)  // [1，2, 3, 4, 5, 6, 7]

使用擴展操作符后：

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

4. 拷貝數組和對象

通常拷貝一個數組，可以這么做：

let arr = [1, 3, 5, 7] let arr2 = arr.concat()  // 或者 let arr3 = arr.slice() arr[0] = 2 console.log(arr)   // [2, 3, 5, 7] console.log(arr2)  // [1, 3, 5, 7] console.log(arr3)  // [1, 3, 5, 7]

但是有了擴展操作符，拷貝數組就能寫得很簡單：

let arr = [1, 3, 5, 7] let arr2 = [...arr] arr[0] = 2 console.log(arr2)  // [1, 3, 5, 7]

同樣的，擴展操作符還能拷貝對象。拷貝對象的通常做法：

let person = { name: '布蘭', age: 12} let p2 = Object.assign({}, person) person.age = 20 console.log(person)  // { name: '布蘭', age: 20 } console.log(p2)      // { name: '布蘭', age: 12 }

有了擴展操作符，拷貝一個對象就相當方便了：

let person = { name: '布蘭', age: 12 } let p2 = {...person} person.age = 20 console.log(person)  // { name: '布蘭', age: 20 } console.log(p2)      // { name: '布蘭', age: 12 }  // 甚至還可以這么寫 let {...p3} = person

• “注意：擴展操作符只能深拷貝結構為一層的對象，如果對象是兩層的結構，那么使用擴展操作符拷貝會是淺拷貝。

5. 合并數組或對象

數組合并通常是這么做的：

let arr1 = [1, 3, 5] let arr2 = [2, 4, 6] let arr3 = arr1.concat( arr2 ) console.log(arr3)  // [1, 3, 5, 2, 4, 6]

使用擴展操作符后，可以這么寫：

let arr1 = [1, 3, 5] let arr2 = [2, 4, 6] let arr3 = [...arr1, ...arr2] console.log(arr3)  // [1, 3, 5, 2, 4, 6]

對了，它除了能合并數組外還能合并對象呢。合并對象，通常的做法是：

let p1 = { name: '布蘭' } let p2 = { age: 12 } let p3 = Object.assign({}, p1, p2) console.log(p3)  // { name: '布蘭', age: 12}

用擴展操作符合并對象：

let p1 = { name: '布蘭' } let p2 = { age: 12 } let p3 = { ...p1, ...p2 } console.log(p3)  // { name: '布蘭', age: 12}

6. 解構對象

經常我們給對象設置參數的時候會這么做：

let person = {     name: '布蘭',     age: 12,     sex: 'male' } let name = person.name let age = person.age let sex = person.sex

而有了擴展操作符，我們就可以這么寫，不過其實如下這種寫法并不是擴展操作符的寫法?，而是剩余操作符的寫法，雖然寫出來后看起來差不多，但就在操作對象這一點上，基本上可以認為它和擴展操作符是相反的操作，擴展操作符是用來展開對象的屬性到多個變量上，而剩余操作符是用來把多個參數凝聚到一個變量上。

let person = {     name: '布蘭',     age: 12,     sex: 'male' } let { name, ...reset } = person console.log(name)   // '布蘭' console.log(reset)  // { age: 12, sex: 'male' }

7. 給對象添加屬性

給對象加屬性通常這樣加：

let person = { name: '布蘭' } person.age = 12 console.log(person)  // { name: '布蘭', age: 12 }

使用擴展操作符給對象添加屬性：

let person = { name: '布蘭' } person = {...person, age: 12} console.log(person)  // { name: '布蘭', age: 12 }

關于使用擴展操作符給對象添加屬性，這里有 2 個小技巧：

1.給新對象設置默認值：

// 默認 person 對象的 age 屬性值 為 12 let person = {age: 12, ...{ name: '布蘭' } } console.log(person)  // { age: 12, name: '布蘭' }

2.重寫對象屬性

let person = { name: '布蘭', age: 12 }  // person 對象的 age 屬性被重寫為 20 person = {...person, age: 20 } console.log(person)  // { name: '布蘭', age: 20 }

8. 設置對象 Getter

設置對象 Getter 通常做法是這樣：

let person = { name: '布蘭' } Object.defineProperty(person, 'age', {     get() { return 12 },     enumerable: true,     configurable: true }) console.log(person.age)  // 12

而有了擴展操作符后可以這么寫：

let person = { name: '布蘭' } person = {     ...person,      get age() { return 12 } } console.log(person.age)  // 12

9. 將數組作為函數參數展開

如果我們有一個形參是多個參數的函數，但是當調用的時候發現入參卻是一個數組，常規做法是這樣：

let arr = [1, 3, 5] function fn(a, b, c) { }  fn.apply(null, arr)

使用擴展操作符后，就簡單多了：

let arr = [1, 3, 5] function fn(a, b, c) { }  fn(...arr)

10. 無限參數的函數

如果有這么一個累加函數，他會把所有傳遞進來的參數都加起來，普通做法是把參數都整合到數組里，然后這樣做：

function doSum(arr) {     return arr.reduce((acc, cur) => acc + cur) } console.log( doSum([1, 3]) )     // 4 console.log( doSum([1, 3, 5]) )  // 9

如果參數不是數組，而是需要一個個傳遞，相當于函數必須支持無限參數，那可能會這么做：

function doSum() {     let sum = 0     for(let i = 0, l = arguments.length; i < l; i++){         sum += arguments[i]     }     return sum          // 或者     // let args = [].slice.call(arguments)      // return args.reduce((acc, cur) => acc + cur) } console.log( doSum(1, 3) )        // 4 console.log( doSum(1, 3, 5) )     // 9 console.log( doSum(1, 3, 5, 7) )  // 16

而有了擴展操作符，就簡單多了：

function doSum(...arr) {     return arr.reduce((acc, cur) => acc + cur) } console.log( doSum(1, 3) )        // 4 console.log( doSum(1, 3, 5) )     // 9 console.log( doSum(1, 3, 5, 7) )  // 16

11. 擴展函數的剩余參數

有的時候一個函數需要傳遞很多的參數，比如小程序頁面(WePY)的 onLoad  生命周期函數里就可能有很多別的頁面傳遞過來的參數，然后還需要在函數里進行一些數據初始化工作，這樣一來就會顯得很臃腫不美觀，比如：

function init(a, b, x, y) {     // 進行一系列初始化數據工作 }

而使用了擴展操作符后，我們就可以按照業務把參數進行解構，把本該在一個函數里進行初始化的工作拆分成多個，可以這么做：

function other( x, y ) {} function init(a, b, ...restConfig) {     // 使用 a 和 b 參數進行操作     // 其余參數傳給原始函數     return other( ...restConfig ) }

12. 結合 Math 函數使用

比如當需要對一個數組求最大值的時候，通常會這么做：

let arr = [3, 1, 8, 5, 4] function max(arr) {     return [].concat(arr).sort((a, b) => b - a) } console.log(max(arr)[0])  // 8  // 或者 arr.reduce((acc, cur) => Math.max(acc, cur))  // 8  // 又或者 Math.max.apply(null, arr)  // 8

但是使用擴展操作符后，能夠把給數組求最大值寫得更加簡潔：

let arr = [3, 1, 8, 5, 4] let max = Math.max(...arr) console.log(max)  // 8

13. 在 new 表達式中使用

假設有一個數組格式的日期，想要通過 Date 構造函數創建一個日期實例的話，可能會這么做：

let arr = [2021, 1, 1] let date = new Date([].toString.call(arr)) console.log(date)  // 'Mon Feb 01 2021 00:00:00 GMT+0800 (中國標準時間)'  // 或者 let date2 = new (Function.prototype.bind.apply(     Date,      [null].concat(arr) )) console.log(date2)  // 'Mon Feb 01 2021 00:00:00 GMT+0800 (中國標準時間)'

而有了擴展操作符就簡單多了：

let arr = [2021, 1, 1] let date = new Date(...arr) console.log(date)  // 'Mon Feb 01 2021 00:00:00 GMT+0800 (中國標準時間)'

到此，關于“JS擴展操作符寫法有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！