文分享自華為云社區(qū)《JavaScript 里三個點 ... 的用法-云社區(qū)-華為云》，作者： Jerry Wang 。

靜止參數(shù)

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

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 的最后一個以 ...為前綴的參數(shù)中，這將導(dǎo)致所有剩余的參數(shù)都放在 javascript 數(shù)組中。

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

rest 參數(shù)可以解構(gòu)（僅限數(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)

點差運算符

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

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"]

一直有多種組合數(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 }

總結(jié)

當(dāng)我們在代碼中看到三個點 （...） 時，它要么是 rest 參數(shù)，要么是展開運算符。

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

• 當(dāng)三個點 （...） 位于函數(shù)參數(shù)的末尾時，它是“rest 參數(shù)”并將參數(shù)列表的其余部分收集到一個數(shù)組中。
• 當(dāng)三個點 （...） 出現(xiàn)在函數(shù)調(diào)用或類似函數(shù)中時，它被稱為“擴展運算符”并將數(shù)組擴展為 list.

點擊下方關(guān)注，第一時間了解華為云新鮮技術(shù)~

華為云博客_大數(shù)據(jù)博客_AI博客_云計算博客_開發(fā)者中心-華為云

個點（...）是擴展運算符，是ES6語法，它可以在函數(shù)調(diào)用/數(shù)組構(gòu)造時，將數(shù)組表達式或者string在語法層面展開；還可以在構(gòu)造字面量對象時將對象表達式按照key-value的方式展開。說白了就是把數(shù)組中大括號（[]）、對象中花括號（{}）去掉！

//數(shù)組
var nums=[1, 2, 3, 4, 5]
console.log(...nums) 
//1 2 3 4 5

//對象
var person={ name: 'A', age: 30 }
console.log({ ...person }) 
// {name:'A',age:30}

它有什么用呢？

• 數(shù)組或?qū)ο蟮膹?fù)制

//數(shù)組的復(fù)制
var arr1=['hello']
var arr2=[...arr1]
console.log(arr2) 
// ['hello']

//對象的復(fù)制
var obj1={ name: 'A' }
var obj2={ ...obj1 }
console.log(obj2) 
// {name:'A'}

• 數(shù)組或?qū)ο蠛喜?/li>

//數(shù)組的合并
var arr1=['hello']
var arr2=['world']
var mergeArr=[...arr1, ...arr2]
console.log(mergeArr)
// ['hello','world']

// 對象合并
var obj1={ name: 'A' }
var obj2={ age: 30 }
var mergeObj={ ...obj1, ...obj2 }
console.log(mergeObj) 
// {name: "A", age: 30}

• 字符轉(zhuǎn)數(shù)組用它