【JavaScript】什麼是擴充套件運算子？

繆宇發表於2019-03-01
JavaScript套件

通過四個例子我們來理解擴充套件運算子.

如何理解它? 它就像鳥兒伸展他的翅膀..（ 圖片來自 unsplash）

它看起來像什麼？ 三個點: ...

它能做什麼? 它允許一個表示式擴充成多個標記/變數/引數。

廢話少說，讓我們通過一些例子來理解到底什麼是擴充套件運算子。

  1. 建立一個陣列 middle

  2. 再建立一個陣列把middle包含進去

  3. 列印出結果

var middle = [3, 4];
var arr = [1, 2, middle, 5, 6];複製程式碼
console.log(arr);
// [1, 2, [3, 4], 5, 6]複製程式碼

上面的程式碼，我們沒有使用擴充套件運算子。展示了，一個陣列包含另一個陣列。

上面程式碼沒有問題，但是我們只想要一個陣列呢？

那我們就可以使用擴充套件運算子了，再提一句，擴充套件運算子允許陣列中的元素分解出來。來看看下面的程式碼，除了我們使用了擴充套件運算子，和上面的程式碼幾乎一樣。

var middle = [3, 4];
var arr = [1, 2, ...middle, 5, 6];複製程式碼
console.log(arr);
// [1, 2, 3, 4, 5, 6]複製程式碼

上面的程式碼展示了擴充套件運算子使用的關鍵，正如你所看到的，當我們創造了arr陣列，對middle資料使用了擴充套件運算子， middle陣列被分解了，裡面的每一個元素都插入到了arr陣列中。這意味它不再是巢狀陣列，而是變成了包含1到6的普通陣列。

複製陣列

slice()是JS陣列的一個方法，它可以複製陣列，類似的方法，我們可以使用擴充套件運算子來複制陣列：

var arr = [`a`, `b`, `c`];
var arr2 = [...arr];複製程式碼
console.log(arr2);
// [`a`, `b`, `c`]複製程式碼

arr陣列被分解成單個字母，然後被分配給arr2陣列。現在我們對arr2陣列做任何改變都不會影響arr源陣列。

具體原因是我們讓arr2的值等於arr,而不是等於arr本身。為了讓這個說法更有說服力，我們試試不用擴充套件運算子。

如果我們僅僅是建立一個陣列然後讓另外一個陣列等於它，那麼程式碼看起來是這樣的：

var arr = [`a`, `b`, `c`];
var arr2 = arr;複製程式碼
console.log(arr2);
// [`a`, `b`, `c`]複製程式碼

現在，你可能會說，它看起來和上面的效果一樣！

它們看起來一樣，但是本質是不一樣的。arr直接賦值給arr2，這意味著，對arr2的任何操作將影響arr源陣列。

arr2.push(`d`);複製程式碼
console.log(arr2);
// [`a`, `b`, `c`, `d`]複製程式碼
console.log(arr);
// [`a`, `b`, `c`, `d`]複製程式碼

正如你所看到的，即使我們沒有明確的將新的值加入到源arr中，我們的新值d仍然加入到了arr陣列中。

連線陣列

我們可以使用擴充套件運算子替代concat()來連線陣列。首先，我們來看看concat()方法是如何實現的。

var arr = [`a`, `b`, `c`];
var arr2 = [`d`, `e`, `f`];

**arr1 = arr.concat(arr2);**
console.log(arr);
// [`a`, `b`, `c`, `d`, `e`, `f`]複製程式碼

使用擴充套件運算子：

var arr = [`a`, `b`, `c`];
var arr2 = [`d`, `e`, `f`];複製程式碼
**arr = [...arr, ...arr2];**
console.log(arr);
// [`a`, `b`, `c`, `d`, `e`, `f`]複製程式碼

完全相同的結果！每一個陣列被分解然後加入到一個新的arr陣列。

Math

我們也可以在使用math函式時結合擴充套件運算子。我們來舉個例子。

Math.max()會返回一堆數字中最大的數。

Math.max();
// -Infinity複製程式碼
Math.max(1, 2, 3);
// 3複製程式碼
Math.max(100, 3, 4);
// 100複製程式碼

如果不使用擴充套件運算子，最簡單的方式是使用.apply()，將一個陣列作為引數傳入Math.max()

var arr = [2, 4, 8, 6, 0];複製程式碼
function max(arr) {
  return Math.max.apply(null, arr);
}複製程式碼
console.log(max(arr));
// 8複製程式碼

這樣做很麻煩。

現在來看一下我們如何使用擴充套件運算子來得到相同的結果的。我們只需要兩行程式碼：

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);複製程式碼
console.log(max);
// 8複製程式碼

字串轉換陣列

使用擴充套件運算子將字串轉換成陣列。

var str = "hello";
var chars = [...str];複製程式碼
console.log(chars); 
// [`h`, `e`,` l`,` l`, `o`]複製程式碼

很酷吧！擴充套件運算子遍歷str字串中的每個字元，然後分配到新的chars陣列中。

感謝閱讀！

原文：codeburst.io/javascript-…

相關文章