Javascript 中三个点的三种用法_javascript中poins-CSDN博客

如果你阅读或查看现在的Javascript 程序时，大概率会发现省略号出现在很多的地方，这个省略号(…)是在ES6 中引入的一个功能，它看起来很简单很不起眼是不？但是它在 JavaScript 中，非常有用。

举个简单的例子，我们有个字符串 author :

let author = "Bruce"

那如何把这个字符串转换成包含所有字符组成的数组呢？

在 C 或 C++ 中，我们需要先创建一个数组，然后使用 for 循环遍历所有字符串，一个一个添加到数组中。

在 Javascript 中，我们只需要一行代码：

let authorChar = [...author]

这个省略号瞬间让 Javascript 变得简单许多不是么？

这个例子也只是它能作为的冰山一角，下面来介绍一些它三个主要用途。

1. JavaScript 中的解构赋值

这个特性使得 JavaScript 中的赋值操作更加优雅。一行代码胜千言，咱来看一下代码：

> let leaders={
me: "Bruce",
T: "Elon",
A: "Tim",
MS: "Bill"}> let {me, ...others} = leaders

> console.log(me)
"Bruce"> console.log(others)
{T: "Elon", A: "Tim", MS: "Bill"}

如上所示，let {me, ...others} = leaders 是JavaScript 解构赋值最经典的使用方法。我们将leaders["me"] 的值赋个变量 me, leaders 其他值给 others。

当然，我们并不需要所有的值，可能我就需要 me 和 MS 值，所有可以这样：

let {me,MS} = leaders;

2. 解包可迭代对象

这种用法这三个点也叫做扩展运算符。顾名思义，就是我们可以使用这个解压JavaScript 中可迭代的对象，包括字符串，数组，对象等等。

举一个简单的例子，假如有两个数组：

let l1 = [1,2]
let l2 = [3,4]

如何将l2中的值添加到 l1 中？

使用这个扩展运算符，我们只需要一行代码：

l1.push(...l2)

如上所示，使用这个扩展运算符可以很方便的解压l2，就是因为它的这种特性，使得它在JavaScript 中非常常见。下面举几个更有用例子。

2.1 复制数组

在JavaScript 中我们将一个数组赋值给另一个数组使用 = ，这在赋值的同时，也会传递引用。下面的例子中，如果我们改变了 l2 中的值，l1 中的值也会跟着变化。

> let l1 = [1,2]
> let l2=l1
> l2[0] = 2077
2077
> console.log(l2)
[2077, 2]
> console.log(l1)
[2077, 2]

如果想要只传值，就可以使用 … :

> let l1 = [1,2]
> let l3 = [...l1]
> l3[0]=2077
> console.log(l3)
[2077, 2]
> console.log(l1)
[1, 2]

如上所示通过这三个点复制 l1 中的值到 l3。

2.1 合并多个对象

使用这三个点结构对象可以使 JavaScript用起来更有趣。

下面的例子是合并两个对象：

> let obj1 = {a:1,b:2}
> let obj2 = {c:3,d:4}
> let allObj = {...obj1,...obj2}
> console.log(allObj)
{a: 1, b: 2, c: 3, d: 4}

2.2 使用数学函数更简单

JavaScript 中的一些内置函数挺奇怪，例如我们使用 max或min时需要传递一堆值，而不是一个数组到函数中，如果不这样做就会 NaN 。好在这三个点的结构赋值解决了这个问题：

> let a = [1,2,2077,1]
> Math.max(a)
NaN
> Math.max(...a)
2077

3. 为 JavaScript 函数定义 Rest 参数

如果一个 JavaScript 函数需要接受可变数量的参数，我们就可以使用这三个点来定义一个 rest 参数：

> function sum_arr(...input){
let ret = 0;
for(const i of input){
ret+=i;
}
return ret;
}
> sum_arr(1,2,3,4)
10
> sum_arr(1,2077)
2078

如上所示，这三个点使函数能接收可变量参数，并将它存储在一个数组中。这个特性使得 Javascript 函数更灵活更强大。

这里需要注意的是，rest 参数是收集所有剩余参数，所以它必须是函数的最后一个参数，如果我们把它放在中间，则会引发错误：

> function test(a1,...a2,a3){
//do something
return;
}
Uncaught SyntaxError: Rest parameter must be last formal parameter

总结

很多人都说 Javascript 作为一种开发语言有很多缺陷。这是事实，但它也是不断的改进，变得越来越优雅。这三个点就是很好的例子，可以用更少的代码做更多的事。