Javascript 中三个点的三种用法

如果你阅读或查看现在的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 作为一种开发语言有很多缺陷。这是事实,但它也是不断的改进,变得越来越优雅。这三个点就是很好的例子,可以用更少的代码做更多的事。

 

你可能感兴趣的:(javascript,开发语言,ecmascript)