文分享自华为云社区《JavaScript 里三个点 ... 的用法-云社区-华为云》，作者： Jerry Wang 。

静止参数

使用 rest 参数，我们可以将任意数量的参数收集到一个数组中，然后用它们做我们想做的事情。引入了其余参数以减少由参数引起的样板代码。

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 参数可以解构（仅限数组），这意味着它们的数据可以解包为不同的变量。

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)

点差运算符

展开运算符用于将可迭代对象（如数组）的元素扩展到可以容纳多个元素的位置。

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

一直有多种组合数组的方法，但是扩展运算符提供了一种用于组合数组的新方法：

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（） 更短的语法进行浅克隆（不包括原型）或合并对象。

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.

点击下方关注，第一时间了解华为云新鲜技术~

华为云博客_大数据博客_AI博客_云计算博客_开发者中心-华为云

个点（...）是扩展运算符，是ES6语法，它可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；还可以在构造字面量对象时将对象表达式按照key-value的方式展开。说白了就是把数组中大括号（[]）、对象中花括号（{}）去掉！

//数组
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}

它有什么用呢？

• 数组或对象的复制

//数组的复制
var arr1=['hello']
var arr2=[...arr1]
console.log(arr2) 
// ['hello']

//对象的复制
var obj1={ name: 'A' }
var obj2={ ...obj1 }
console.log(obj2) 
// {name:'A'}

• 数组或对象合并

//数组的合并
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}

• 字符转数组用它