JavaScript…延展操作符(Spread operator)

上一篇文章《解决Node.js项目报错SyntaxError: Unexpected token …
》就是因为…操作符导致运行报错了，本文将介绍…操作符和解答上一篇文章中的思考问题。

…操作符英文叫Spread operator，即延展操作符。该操作符从ES6开始支持。ES9中也新增了些特性。

ES6延展操作符(Spread operator)的特性

ES6即ECMAScript 2015规范

延展操作符…，从ES6开始添加的。可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造对象时, 将对象表达式按key-value的方式展开。

语法

函数调用

myFunction(...iterableObj);

数组构造或字符串：

var iterableObj = [0, 1, 2, 3];
[...iterableObj, '4', ...'hello', 6];

应用场景

在函数调用时使用延展操作符

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];

//不使用延展操作符
console.log(sum.apply(null, numbers));// 6

//使用延展操作符
console.log(sum(...numbers));// 6

• ES2015引入了Rest参数和扩展运算符。三个点（…）仅用于数组。Rest参数语法允许我们将一个不定数量的参数表示为一个数组。

function restParam(p1, p2, ...p3) {
  console.log(p1);  
  // p1 = 1
  console.log(p2);
  // p2 = 2
  console.log(p3);
  // p3 = [3, 4, 5]
}

restParam(1, 2, 3, 4, 5);

• 展开操作符以相反的方式工作，将数组转换成可传递给函数的单独参数。例如Math.max()返回给定数字中的最大值：

    /**
      * Returns the larger of a set of supplied numeric expressions.
      * @param values Numeric expressions to be evaluated.
      */
    max(...values: number[]): number;

const values = [99, 100, -1, 48, 16];
console.log( Math.max(...values) ); // 100

构造数组

没有展开语法的时候，只能组合使用 push，splice，concat 等方法，来将已有数组元素变成新数组的一部分。有了展开语法, 构造新数组会变得更简单、更优雅：

和参数列表的展开类似, … 在构造字数组时, 可以在任意位置多次使用。

const stuendts = ['Jine','Tom']; 
const persons = ['Tony',... stuendts,'Aaron','Anna'];
conslog.log(persions)// ["Tony", "Jine", "Tom", "Aaron", "Anna"]

连接多个数组

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];// 将 arr2 中所有元素附加到 arr1 后面并返回
//等同于
var arr4 = arr1.concat(arr2);

数组拷贝

展开语法和 Object.assign() 行为一致, 执行的都是浅拷贝(只遍历一层)。

var arr = [1, 2, 3];
var arr2 = [...arr]; // 等同于 arr.slice()
arr2.push(4); 
console.log(arr2)//[1, 2, 3, 4]

在React中的应用

通常我们在封装一个组件时，会对外公开一些 props 用于实现功能。大部分情况下在外部使用都应显示的传递 props 。但是当传递大量的props时，会非常繁琐，这时我们可以使用 …(延展操作符,用于取出参数对象的所有可遍历属性) 来进行传递。

• 一般情况下我们应该这样写

<CustomComponent name ='Jine' age ={21} />

• 使用 … ，等同于上面的写法

const params = {
	name: 'Jine',
	age: 21
}
<CustomComponent {...params} />

• 配合解构赋值避免传入一些不需要的参数

var params = {
	name: '123',
	title: '456',
	type: 'aaa'
}

var { type, ...other } = params;

<CustomComponent type='normal' number={2} {...other} />
//等同于
<CustomComponent type='normal' number={2} name='123' title='456' />

ES9延展操作符(Spread operator)的特性

ES9即ECMAScript 2018规范
ES9中Spread operator有关联的特性是：

• object spread properties，即延展操作符增加了对对象的支持
• object rest properties，即Rest参数添加了对对象的支持

语法

构造对象时,进行克隆或者属性拷贝

但是这只是一个对象的浅拷贝。因此，如果一个对象A的属性是对象B，那么在克隆后的对象cloneB中，该属性指向对象B。

> let a = 'a'; let b = {...a}
undefined
> b
{ '0': 'a' }

> let array = ['a', 'b', 'c']; let copyArray = {...array}
undefined
> copyArray
{ '0': 'a', '1': 'b', '2': 'c' }

>  let obj = {a: 0, b: 1, c: 2}; let objClone = {...obj};
undefined
> objClone
{ a: 0, b: 1, c: 2 }
> obj == objClone
false
> obj[a] = -1
-1
> obj
{ a: -1, b: 1, c: 2 }
> objClone
{ a: 0, b: 1, c: 2 }

合并对象

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象: { foo: "baz", x: 42, y: 13 }

对象解构

提供了和数组一样的Rest参数（）和展开操作符

const myObject = {
  a: 1,
  b: 2,
  c: 3
};

const { a, ...x } = myObject;
// a = 1
// x = { b: 2, c: 3 }

或者你可以使用它给函数传递参数：

function restParam({ a, ...x }) {
  console.log(a);
  // a = 1
  console.log(x);
  // x = { b: 2, c: 3 }
}

restParam({
  a: 1,
  b: 2,
  c: 3
});

跟数组一样，Rest参数只能在声明的结尾处使用。
此外，它只适用于每个对象的顶层，如果对象中嵌套对象则无法适用。

如何知道node的版本是否支持ES特性

通过node.green这个网站可以查询到ES特性是否支持node版本

例如，我现在用的node版本为v6.9.2，我要判断是否支持object spread properties这个特性？
其实有两个方法

通过node.green查找

通过node.green，找到object spread properties，可以看到只有8.6及以上的版本才支持。

通过代码测试验证

• 在node版本为6.9.2下验证

可以看到let b = {...a}输入回车后，只有三个.，没有任何提示了

• 在node版本为10.16.3下验证

木有问题，测试通过

参考链接

• ES6、ES7、ES8、ES9、ES10新特性一览
  

---

相信你看完本文，已经知道上一篇文章《解决Node.js项目报错SyntaxError: Unexpected token …
》最后留下的思考问题的答案了。

支持🤟

🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟

• 我会持续编写文章，保持每周至少一篇文章。💪
• 有时候编写一篇文章需要大量时间。💪
• 您只需一秒即可完成【点赞👍或关注❤️】。💪
• 您的支持将给与我更大的动力。💪

🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟