JavaScript 擴充套件運算子

yuyurenjie發表於2017-06-01
JavaScript套件

擴充套件運算子格式
擴充套件運算子格式很簡單，就是三個點(...)

擴充套件運算子作用？？？
擴充套件運算子允許一個表示式在期望多個引數（用於函式呼叫）或多個元素（用於陣列字面量）或多個變數（用於解構賦值）的位置擴充套件。

下面開始通過四個例子來深刻理解擴充套件運算子

  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]複製程式碼

在上例中，沒有使用擴充套件運算子。middle作為陣列放入另一個陣列中。

但是如果想讓輸出結果只有一個陣列？？？

這時候就用到擴充套件運算子，看下面例子，除了使用擴充套件運算子其他都與上面例子相同。

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

當建立陣列arr和使用在middle陣列上使用擴充套件運算子時，不是將middle陣列直接插入到arr中，而是將middle陣列擴充套件，然後將元素插入到arr中。

複製陣列

slice()是JavaScript陣列的方法，作用是複製陣列。我們同樣可以使用擴充套件運算子複製陣列。

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

arr陣列中的元素擴充套件成為單獨元素被分配到arr2中。現在可以隨意改變arr2陣列，且都不會對源陣列arr產生影響。

這是因為，arr陣列值被擴充套件後新增到arr2陣列中，我們設定arr2等於arr的值，而不是其本身。我們可以關注沒有擴充套件運算子時發生事情，就能理解了。

如果建立陣列然後設定另一個陣列等於其本身，如下：

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

現在我們將arr2陣列賦值給arr陣列，這意味著只要改變arr2，arr陣列就會發生變化。

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

拼接陣列

使用擴充套件運算子可以代替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']複製程式碼

Math

也可以使用math函式連同擴充套件運算子。如這個例子中，將使用Math.max()

Math.max()將返回一組數最大值。

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

在沒有擴充套件運算子，在陣列上使用Math.max()最容易方法就是使用.apply()。

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']複製程式碼

參考

原文連結

歡迎訂閱掘金專欄和知乎專欄

相關文章