[Three dots ( … ) in JavaScript](https://dev.to/sagar/three-dots---in-javascript-26ci)

# Rest Parameters

使用 rest 引數，我們可以將任意數量的引數收集到一個陣列中，然後用它們做我們想做的事情。 引入了其餘引數以減少由引數引起的樣板程式碼。

```javascript
function myFunc(a, b, ...args) {
 console.log(a); // 22
 console.log(b); // 98
 console.log(args); // [43, 3, 26]
};
myFunc(22, 98, 43, 3, 26);
```

在 myFunc 的最後一個以 ... 為字首的引數中，這將導致所有剩餘的引數都放在 javascript 陣列中。

rest 引數收集所有剩餘的引數，因此在最後一個引數之前新增 rest 引數是沒有意義的。 其餘引數必須是最後一個形參。

rest 引數可以解構（僅限陣列），這意味著它們的資料可以解包為不同的變數。

```javascript
function myFunc(...[x, y, z]) {
  return x * y* z;
}

myFunc(1)          // NaN
myFunc(1, 2, 3)    // 6
myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured)
```

# Spread Operators

展開運算子用於將可迭代物件（如陣列）的元素擴充套件到可以容納多個元素的位置。

```javascript
function myFunc(x, y, ...params) { // used rest operator here
  console.log(x);
  console.log(y);
  console.log(params);
}

var inputs = ["a", "b", "c", "d", "e", "f"];
myFunc(...inputs); // used spread operator here
// "a"
// "b"
// ["c", "d", "e", "f"]
```

一直有多種組合陣列的方法，但是擴充套件運算子提供了一種用於組合陣列的新方法：

```javascript
const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian'];
const specialty = ['Meatzza', 'Spicy Mama', 'Margherita'];

const pizzas = [...featured, 'veg pizza', ...specialty];

console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita'
```

使用擴充套件運算子，現在可以使用比 Object.assign() 更短的語法進行淺克隆（不包括原型）或合併物件。

```javascript
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }
```

# 總結

當我們在程式碼中看到三個點 (...) 時，它要麼是 rest 引數，要麼是展開運算子。

有一個簡單的方法來區分它們：

* 當三個點 (...) 位於函式引數的末尾時，它是“rest 引數”並將引數列表的其餘部分收集到一個陣列中。

* 當三個點 (...) 出現在函式呼叫或類似函式中時，它被稱為“擴充套件運算子”並將陣列擴充套件為 list.

JavaScript 裡三個點 ... 的用法

相關文章