JS擴(kuò)展操作符寫法有哪些

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

1. 字符串轉(zhuǎn)數(shù)組

字符串轉(zhuǎn)數(shù)組最普遍的做法是這樣：

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

而使用了擴(kuò)展操作符后可以這樣：

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

2. 將類數(shù)組轉(zhuǎn)換為數(shù)組

在 JS 中有一種數(shù)據(jù)結(jié)構(gòu)叫做 NodeList，它和數(shù)組很相似，也被叫做“類數(shù)組”，類數(shù)組是什么?在 MDN  中是這么定義它的：

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

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

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

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

• Arguments：函數(shù)里的參數(shù)對象;

類數(shù)組沒有數(shù)組的一些方法比如 push、map 等，所以經(jīng)常需要將它們轉(zhuǎn)成數(shù)組，而通常我們是這么轉(zhuǎn)化的：

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

而有了擴(kuò)展操作符可以這么做：

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

3. 向數(shù)組中添加項(xiàng)

往數(shù)組中添加幾項(xiàng)通常這樣操作：

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]

使用擴(kuò)展操作符后：

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

4. 拷貝數(shù)組和對象

通?？截愐粋€數(shù)組，可以這么做：

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]

但是有了擴(kuò)展操作符，拷貝數(shù)組就能寫得很簡單：

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

同樣的，擴(kuò)展操作符還能拷貝對象?？截悓ο蟮耐ǔＷ龇ǎ?/p>

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 }

有了擴(kuò)展操作符，拷貝一個對象就相當(dāng)方便了：

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

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

5. 合并數(shù)組或?qū)ο?/strong>

數(shù)組合并通常是這么做的：

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

使用擴(kuò)展操作符后，可以這么寫：

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

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

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

用擴(kuò)展操作符合并對象：

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

6. 解構(gòu)對象

經(jīng)常我們給對象設(shè)置參數(shù)的時候會這么做：

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

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

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 }

使用擴(kuò)展操作符給對象添加屬性：

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

關(guān)于使用擴(kuò)展操作符給對象添加屬性，這里有 2 個小技巧：

1.給新對象設(shè)置默認(rèn)值：

// 默認(rèn) 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. 設(shè)置對象 Getter

設(shè)置對象 Getter 通常做法是這樣：

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

而有了擴(kuò)展操作符后可以這么寫：

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

9. 將數(shù)組作為函數(shù)參數(shù)展開

如果我們有一個形參是多個參數(shù)的函數(shù)，但是當(dāng)調(diào)用的時候發(fā)現(xiàn)入?yún)s是一個數(shù)組，常規(guī)做法是這樣：

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

使用擴(kuò)展操作符后，就簡單多了：

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

10. 無限參數(shù)的函數(shù)

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

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

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

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

而有了擴(kuò)展操作符，就簡單多了：

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. 擴(kuò)展函數(shù)的剩余參數(shù)

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

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

而使用了擴(kuò)展操作符后，我們就可以按照業(yè)務(wù)把參數(shù)進(jìn)行解構(gòu)，把本該在一個函數(shù)里進(jìn)行初始化的工作拆分成多個，可以這么做：

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

12. 結(jié)合 Math 函數(shù)使用

比如當(dāng)需要對一個數(shù)組求最大值的時候，通常會這么做：

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

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

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

13. 在 new 表達(dá)式中使用

假設(shè)有一個數(shù)組格式的日期，想要通過 Date 構(gòu)造函數(shù)創(chuàng)建一個日期實(shí)例的話，可能會這么做：

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

而有了擴(kuò)展操作符就簡單多了：

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

到此，關(guān)于“JS擴(kuò)展操作符寫法有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！