Three dots ( … ) in JavaScript

Rest Parameters

使用 rest 參數(shù)，我們可以將任意數(shù)量的參數(shù)收集到一個數(shù)組中，然后用它們做我們想做的事情。 引入了其余參數(shù)以減少由參數(shù)引起的樣板代碼。

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

在 myFunc 的最后一個以 … 為前綴的參數(shù)中，這將導致所有剩余的參數(shù)都放在 javascript 數(shù)組中。

rest 參數(shù)收集所有剩余的參數(shù)，因此在最后一個參數(shù)之前添加 rest 參數(shù)是沒有意義的。 其余參數(shù)必須是最后一個形參。

rest 參數(shù)可以解構（僅限數(shù)組），這意味著它們的數(shù)據(jù)可以解包為不同的變量。

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

展開運算符用于將可迭代對象（如數(shù)組）的元素擴展到可以容納多個元素的位置。

function myFunc(x, y, ...params) { // used rest operator hereconsole.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"]

一直有多種組合數(shù)組的方法，但是擴展運算符提供了一種用于組合數(shù)組的新方法：

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'

使用擴展運算符，現(xiàn)在可以使用比 Object.assign() 更短的語法進行淺克隆（不包括原型）或合并對象。

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 參數(shù)，要么是展開運算符。

有一個簡單的方法來區(qū)分它們：

• 當三個點 (…) 位于函數(shù)參數(shù)的末尾時，它是“rest 參數(shù)”并將參數(shù)列表的其余部分收集到一個數(shù)組中。

• 當三個點 (…) 出現(xiàn)在函數(shù)調(diào)用或類似函數(shù)中時，它被稱為“擴展運算符”并將數(shù)組擴展為 list.

總結

以上是生活随笔為你收集整理的JavaScript 里三个点 ... 的用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。