JS ES新特性 擴展運算符介紹
更新時間：2021年12月02日 11:09:52 作者：一碗周
這篇文章主要介紹了JS ES新特性 擴展運算符，下面文章圍繞ES新特性 擴展運算符的相關資料展開詳細內容,需要的朋友可以參考一下，希望對大家有所幫助
一、擴展運算符
擴展運算符是三個點... , 允許將一個表達式原地展開，當需要多個參數(shù)(比如函數(shù)的調用時) 或者多個值(比如數(shù)組)它會將其轉為用逗號分隔的參數(shù)序列。
示例代碼如下所示：
// 定義一個數(shù)組
let arr = [1, 2, 3, 4, 5, 6]
// 使用 ... 擴展運算符展開
console.log(...arr); // 1 2 3 4 5 6
// 定義一個函數(shù)
function fun(...item) {
console.log(...item);
}
// 調用函數(shù)
fun(1, 2, 3, 4, 5, 6) // 1 2 3 4 5 6
// 與表達式配合使用
let x = 10
arr = [
...(x > 0 ? ['a'] : []),
'b',
];
console.log(...arr); //a b
二、替代apply()方法
由于擴展運算符可以展開數(shù)組，所以不再需要apply方法，將數(shù)組轉為函數(shù)的參數(shù)了。
示例代碼如下所示：
// 定義一個函數(shù)
function fun(a, b, c, d, e) {
console.log(a, b, c, d, e);
}
// 定義一個數(shù)組
let arr = [1, 2, 3, 4, 5]
// ES5 調用方式
fun.apply(null, arr) //1 2 3 4 5
// ES6 調用方式
fun(...arr) // 1 2 3 4 5
假如我們在實際開發(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
三、擴展運算符的應用
擴展數(shù)組的應用主要表現(xiàn)在以下幾個方面
1、復制數(shù)組
在ECMAScript 2015之前中如果僅僅是簡單的將arr1賦值給arr2，修改arr2時，arr1也會進行變化，這就是所謂的淺復制 ，
示例代碼如下所示：
先來理解一下深淺復制的概念：
- 深復制：復制數(shù)組中的元素內容
- 淺復制：復制數(shù)組元素內容的內存地址
let arr1 = [1, 2, 3, 4, 5] let arr2 = arr1 console.log(arr2); // [ 1, 2, 3, 4, 5 ] // 修改 arr2 的數(shù)據(jù)內容 arr2[2] = 6; // 兩者都會發(fā)生改變 console.log(arr1, arr2); // [ 1, 2, 6, 4, 5 ] [ 1, 2, 6, 4, 5 ]
如果想要完成深復制，示例代碼如下所示：
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ù)組
擴展運算符提供了數(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' ]
值得注意的是，這兩種方式都是淺復制
3、與解耦賦值結合使用
擴展運算符可以與解構賦值結合起來，用于生成數(shù)組(用于取剩余數(shù)據(jù))。
注意 ：只能將擴展運算符放置最后。
示例代碼如下所示：
// 場景分析：取數(shù)組中的第一個值和最后一個值 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ù)組
擴展運算符還可以將字符串轉為真正的數(shù)組。示例代碼如下所示：
let str = '狐妖小紅娘' console.log([...str]); // [ '狐', '妖', '小', '紅', '娘' ]
到此這篇關于JS ES新特性 擴展運算符介紹的文章就介紹到這了,更多相關ES? 擴展運算符介紹內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了快速使用Bootstrap搭建傳送帶的相關資料,非常具有參考借鑒價值，需要的朋友可以參考下2016-05-05
JS如何設置cookie有效期為當天24點并彈出歡迎登陸界面
這篇文章主要介紹了JS如何設置cookie有效期為當天24點并彈出歡迎登陸界面的代碼，代碼比較簡單，好理解，需要的朋友可以參考下2016-08-08
本篇文章主要介紹了webpack的配置文件entry與output，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
下面小編就為大家?guī)硪黄獪\談js函數(shù)的多種定義方法與區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
一個JS翻頁效果...2007-07-07
這篇文章主要介紹了js實現(xiàn)鼠標點擊左上角滑動菜單效果代碼,涉及JavaScript基于鼠標事件動態(tài)變換頁面元素樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
網(wǎng)絡請求是現(xiàn)代Web應用中的常見操作,很多時候需要獲取服務器上的數(shù)據(jù),在進行網(wǎng)絡請求時,為了減輕服務器的壓力,緩存策略常被用來避免對同一數(shù)據(jù)的重復請求,本文將探討如何使用Promise結合緩存來高效處理網(wǎng)絡請求,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了JS實現(xiàn)在線ps功能詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
JS實現(xiàn)動態(tài)添加外部js、css到head標簽的方法
這篇文章主要介紹了JS實現(xiàn)動態(tài)添加外部js、css到head標簽的方法,涉及javascript針對頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-06-06
Bootstrap3 多個模態(tài)對話框無法顯示的解決方案
這篇文章主要介紹了Bootstrap3 多個模態(tài)對話框無法顯示的解決方案,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02