操作符(Spread operator)"/>
JavaScript…延展操作符(Spread operator)
上一篇文章《解决Node.js项目报错SyntaxError: Unexpected token …
》就是因为…操作符导致运行报错了,本文将介绍…操作符和解答上一篇文章中的思考问题。
…操作符英文叫Spread operator,即延展操作符。该操作符从ES6开始支持。ES9中也新增了些特性。
目录
- ES6延展操作符(Spread operator)的特性
- 语法
- 函数调用
- 数组构造或字符串:
- 应用场景
- 在函数调用时使用延展操作符
- 构造数组
- 数组拷贝
- 在React中的应用
- ES9延展操作符(Spread operator)的特性
- 语法
- 构造对象时,进行克隆或者属性拷贝
- 合并对象
- 对象解构
- 如何知道node的版本是否支持ES特性
- 通过node.green查找
- 通过代码测试验证
- 参考链接
- 支持🤟
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 = 1console.log(p2);// p2 = 2console.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 = 1console.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 …
》最后留下的思考问题的答案了。
支持🤟
🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟
- 我会持续编写文章,保持每周至少一篇文章。💪
- 有时候编写一篇文章需要大量时间。💪
- 您只需一秒即可完成【点赞👍或关注❤️】。💪
- 您的支持将给与我更大的动力。💪
🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟🤟
更多推荐
JavaScript…延展操作符(Spread operator)
发布评论