JS ES新特性 擴(kuò)展運(yùn)算符介紹
一、擴(kuò)展運(yùn)算符
擴(kuò)展運(yùn)算符是三個(gè)點(diǎn)... , 允許將一個(gè)表達(dá)式原地展開(kāi),當(dāng)需要多個(gè)參數(shù)(比如函數(shù)的調(diào)用時(shí)) 或者多個(gè)值(比如數(shù)組)它會(huì)將其轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列。
示例代碼如下所示:
// 定義一個(gè)數(shù)組 let arr = [1, 2, 3, 4, 5, 6] // 使用 ... 擴(kuò)展運(yùn)算符展開(kāi) console.log(...arr); // 1 2 3 4 5 6 // 定義一個(gè)函數(shù) function fun(...item) { console.log(...item); } // 調(diào)用函數(shù) fun(1, 2, 3, 4, 5, 6) // 1 2 3 4 5 6 // 與表達(dá)式配合使用 let x = 10 arr = [ ...(x > 0 ? ['a'] : []), 'b', ]; console.log(...arr); //a b
二、替代apply()方法
由于擴(kuò)展運(yùn)算符可以展開(kāi)數(shù)組,所以不再需要apply
方法,將數(shù)組轉(zhuǎn)為函數(shù)的參數(shù)了。
示例代碼如下所示:
// 定義一個(gè)函數(shù) function fun(a, b, c, d, e) { console.log(a, b, c, d, e); } // 定義一個(gè)數(shù)組 let arr = [1, 2, 3, 4, 5] // ES5 調(diào)用方式 fun.apply(null, arr) //1 2 3 4 5 // ES6 調(diào)用方式 fun(...arr) // 1 2 3 4 5
假如我們?cè)趯?shí)際開(kāi)發(fā)中取出數(shù)組中的最大值,采用的方式如下所示:
let arr = [1, 20, 30, 50, 3, 88, ] // ES5的寫法 let max = Math.max.apply(null, arr) console.log(max); // 88
E的寫法如下所示:
let arr = [1, 20, 30, 50, 3, 88, ] // ES6 的寫法 let max = Math.max(...arr) console.log(max); // 88
三、擴(kuò)展運(yùn)算符的應(yīng)用
擴(kuò)展數(shù)組的應(yīng)用主要表現(xiàn)在以下幾個(gè)方面
1、復(fù)制數(shù)組
在ECMAScript 2015
之前中如果僅僅是簡(jiǎn)單的將arr1賦值給arr2,修改arr2時(shí),arr1也會(huì)進(jìn)行變化,這就是所謂的淺復(fù)制 ,
示例代碼如下所示:
先來(lái)理解一下深淺復(fù)制的概念:
- 深復(fù)制:復(fù)制數(shù)組中的元素內(nèi)容
- 淺復(fù)制:復(fù)制數(shù)組元素內(nèi)容的內(nèi)存地址
let arr1 = [1, 2, 3, 4, 5] let arr2 = arr1 console.log(arr2); // [ 1, 2, 3, 4, 5 ] // 修改 arr2 的數(shù)據(jù)內(nèi)容 arr2[2] = 6; // 兩者都會(huì)發(fā)生改變 console.log(arr1, arr2); // [ 1, 2, 6, 4, 5 ] [ 1, 2, 6, 4, 5 ]
如果想要完成深復(fù)制,示例代碼如下所示:
let arr1 = [1, 2, 3, 4, 5] let arr2 = [] // ES5 寫法 for (let i = 0; i < arr1.length; i++) { arr2[i] = arr1[i]; } arr2[2] = 6; // 僅僅 arr2 改變 console.log(arr1, arr2); // [ 1, 2, 3, 4, 5 ] [ 1, 2, 6, 4, 5 ] // ES6 寫法 arr2 = [...arr1] arr2[2] = 6; // 僅僅 arr2 改變 console.log(arr1, arr2); // [ 1, 2, 3, 4, 5 ] [ 1, 2, 6, 4, 5 ]
2、合并數(shù)組
擴(kuò)展運(yùn)算符提供了數(shù)組合并的新寫法。示例代碼如下所示:
const arr1 = ['a', 'b']; const arr2 = ['c']; const arr3 = ['d', 'e']; // ES5 的合并數(shù)組 console.log(arr1.concat(arr2, arr3)); // [ 'a', 'b', 'c', 'd', 'e' ] // ES6 的合并數(shù)組 console.log([...arr1, ...arr2, ...arr3]); // [ 'a', 'b', 'c', 'd', 'e' ]
值得注意的是,這兩種方式都是淺復(fù)制
3、與解耦賦值結(jié)合使用
擴(kuò)展運(yùn)算符可以與解構(gòu)賦值結(jié)合起來(lái),用于生成數(shù)組(用于取剩余數(shù)據(jù))。
注意 :只能將擴(kuò)展運(yùn)算符放置最后。
示例代碼如下所示:
// 場(chǎng)景分析:取數(shù)組中的第一個(gè)值和最后一個(gè)值 let arr = [1, 2, 3, 4, 5] let first, rest; // ES5 的寫法:借用 Array.slice() 函數(shù) first = arr[0] rest = arr.slice(1) console.log(first, rest); // 1 [ 2, 3, 4, 5 ] // ES6 的寫法 [first, ...rest] = arr console.log(first, rest); // 1 [ 2, 3, 4, 5 ]
4、將字符串拆分為數(shù)組
擴(kuò)展運(yùn)算符還可以將字符串轉(zhuǎn)為真正的數(shù)組。示例代碼如下所示:
let str = '狐妖小紅娘' console.log([...str]); // [ '狐', '妖', '小', '紅', '娘' ]
到此這篇關(guān)于JS ES新特性 擴(kuò)展運(yùn)算符介紹的文章就介紹到這了,更多相關(guān)ES? 擴(kuò)展運(yùn)算符介紹內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解如何在JavaScript中無(wú)縫地集成和使用Python代碼
這篇文章主要目標(biāo)是幫助諸位理解如何在JavaScript中無(wú)縫地集成和使用Python代碼,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-06-06ie9 提示''console'' 未定義問(wèn)題的解決方法
關(guān)掉開(kāi)發(fā)者工具之后,在狀態(tài)欄發(fā)現(xiàn)提示'console' 未定義,為什么之前的運(yùn)行沒(méi)有問(wèn)題,之后的就不行呢2014-03-03JavaScript 高級(jí)篇之閉包、模擬類,繼承(五)
本篇主要分享我對(duì)閉包的理解及使用閉包完成私有屬性、模擬類、繼承等,結(jié)合大量例子,希望大家能快速掌握!首先讓我們先從一些基本的術(shù)語(yǔ)開(kāi)始吧2012-04-04實(shí)用又漂亮的BootstrapValidator表單驗(yàn)證插件
這篇文章主要為大家詳細(xì)介紹了好用又漂亮的BootstrapValidator表單驗(yàn)證插件,感興趣的小伙伴們可以參考一下2016-05-05JavaScript實(shí)現(xiàn)通過(guò)滑塊改變網(wǎng)頁(yè)顏色
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)通過(guò)滑塊改變網(wǎng)頁(yè)顏色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08微信小程序授權(quán)登陸及每次檢查是否授權(quán)實(shí)例代碼
這篇文章主要介紹了關(guān)于微信小程序授權(quán)登陸及每次檢查是否授權(quán),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09JS小數(shù)運(yùn)算出現(xiàn)多為小數(shù)問(wèn)題的解決方法
這篇文章主要介紹了JS小數(shù)運(yùn)算出現(xiàn)多為小數(shù)問(wèn)題的解決方法,需要的朋友可以參考下2016-06-06原生Js實(shí)現(xiàn)按的數(shù)據(jù)源均分時(shí)間點(diǎn)幻燈片效果(已封裝)
騰訊新聞詳情頁(yè)有一個(gè)事件進(jìn)展效果, 覺(jué)得挺有意思. 于是, 就有了本文的效果: 按數(shù)據(jù)源均分時(shí)間點(diǎn)幻燈. 花了三個(gè)多小時(shí)寫的, 當(dāng)然, 包括樣式與調(diào)試. 兼容主流。2010-12-12