Demystifying Three Dot (...) Syntax(理解“三点”语法)

[H2rmone]

Demystifying Three Dot (...) Syntax

“三点”语法，这是个渗透在现代 Javascript 项目中特别常见的用法。在最近的面试中，还是有许多同学存在一些理解上的误区，所以有了此文。

TL;DR

• 它 不是 仅仅一种语法， 而是 可以归纳为两种类型的多种语法
• 它 不是 深拷贝， 而是 浅拷贝
• 常见的对象展开语法和对象剩余属性语法 不是 在 ES 6 就有的， 而是 在 ES 9 才进入标准，期间一直是实验性语法
• 作为对象展开语法时和 Object.assign 是有区别的

到底是什么语法呢？

我们经常看到的Spread Syntax（展开语法）和Rest Syntax（剩余语法）是“三点”语法的两大类

Spread Elements of an Iterable Collection（元素展开语法）

const combinedArray = [...array, ...anthorArray]
const singleLetterArray = [...'react']

Spread Properties for Object Literals（对象的属性展开语法）

const copy = {...obj}

Spread Elements of Arguments in Function Call（函数调用中的参数展开语法）

thisIsAFunction(param1, ...rest)

Rest Parameters（剩余参数语法）

function (first, ...rest) {}

Rest Elements in Destructuring Assignment（剩余元素语法）

const [, ...rest] = [1, 2, 3]

Rest Properties in Destructuring Assignment（剩余属性语法）

const { a, ...rest } = this.props