JS ES新特性 擴展運算符介紹
一、擴展運算符
擴展運算符是三個點… , 允許將一個表達式原地展開,當需要多個參數(比如函數的調用時) 或者多個值(比如數組)它會將其轉為用逗號分隔的參數序列。
示例代碼如下所示:
// 定義一個數組 let arr = [1, 2, 3, 4, 5, 6] // 使用 ... 擴展運算符展開 console.log(...arr); // 1 2 3 4 5 6 // 定義一個函數 function fun(...item) { console.log(...item); } // 調用函數 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()方法
由於擴展運算符可以展開數組,所以不再需要apply
方法,將數組轉為函數的參數瞭。
示例代碼如下所示:
// 定義一個函數 function fun(a, b, c, d, e) { console.log(a, b, c, d, e); } // 定義一個數組 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
假如我們在實際開發中取出數組中的最大值,采用的方式如下所示:
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
三、擴展運算符的應用
擴展數組的應用主要表現在以下幾個方面
1、復制數組
在ECMAScript 2015
之前中如果僅僅是簡單的將arr1賦值給arr2,修改arr2時,arr1也會進行變化,這就是所謂的淺復制 ,
示例代碼如下所示:
先來理解一下深淺復制的概念:
- 深復制:復制數組中的元素內容
- 淺復制:復制數組元素內容的內存地址
let arr1 = [1, 2, 3, 4, 5] let arr2 = arr1 console.log(arr2); // [ 1, 2, 3, 4, 5 ] // 修改 arr2 的數據內容 arr2[2] = 6; // 兩者都會發生改變 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、合並數組
擴展運算符提供瞭數組合並的新寫法。示例代碼如下所示:
const arr1 = ['a', 'b']; const arr2 = ['c']; const arr3 = ['d', 'e']; // ES5 的合並數組 console.log(arr1.concat(arr2, arr3)); // [ 'a', 'b', 'c', 'd', 'e' ] // ES6 的合並數組 console.log([...arr1, ...arr2, ...arr3]); // [ 'a', 'b', 'c', 'd', 'e' ]
值得註意的是,這兩種方式都是淺復制
3、與解耦賦值結合使用
擴展運算符可以與解構賦值結合起來,用於生成數組(用於取剩餘數據)。
註意 :隻能將擴展運算符放置最後。
示例代碼如下所示:
// 場景分析:取數組中的第一個值和最後一個值 let arr = [1, 2, 3, 4, 5] let first, rest; // ES5 的寫法:借用 Array.slice() 函數 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、將字符串拆分為數組
擴展運算符還可以將字符串轉為真正的數組。示例代碼如下所示:
let str = '狐妖小紅娘' console.log([...str]); // [ '狐', '妖', '小', '紅', '娘' ]
到此這篇關於JS ES新特性 擴展運算符介紹的文章就介紹到這瞭,更多相關ES 擴展運算符介紹內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- ECMAScript 6數組的擴展實例詳解
- JavaScript擴展運算符的學習及應用詳情(ES6)
- 梳理總結25JavaScript數組操作方法實例
- ES6擴展運算符的理解與使用場景
- ECMAscrip新特性函數介紹