JS?ES擴展運算符怎么使用

這篇文章主要介紹“JS ES擴展運算符怎么使用”，在日常操作中，相信很多人在JS ES擴展運算符怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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擴展運算符怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！