剩余参数、拓展运算符
（剩余参数、拓展运算符）
剩余参数 之前，我们在接触多个参数的时候，通常使用arguments对象去代替接收多个参数。但是，使用arguments对象去接收参数有几个不好的地方。
arguments是类数组对象，不能使用数组的很多便捷操作。 箭头函数当中没有arguments对象 为了解决这个问题，在ES6当中，推出了剩余参数的概念。同样的，我们以计算参数的和为例子去学习剩余参数。
const sum = (...args) => { console.log(args); return args.reduce((prev, curr) => prev+curr,0) } image
可以看到，剩余参数的原型是数组。那么，我们就可以愉快的使用数组的各种快捷操作了。
我们来看看剩余参数的几个例子
- 变量的解构赋值
假设我有以下的数据：分别存储着用户名、用户id和用户不同时段的用户分数。那么，为了用变量取到他的值。我们可以使用剩余参数进行快速的操作。
const player = ["Alex", 9831, 5.5, 9.8, 9.9];
const [name, id, ...scores] = player;
- 计算汇率
我期望利用一个函数去计算输入固定汇率之后。对应汇率之后所有的换算金额。
function convert(rate, ...amounts) {return amounts.map(amount => rate*amount);
}
复制代码const amounts = convert(0.99, 88, 99, 998); console.log(amounts)
image
拓展运算符 对应于剩余参数，我们的拓展运算符则是完全相反的操作。剩余参数，是把很多参数整合成为一个数组，而拓展运算符，是讲可遍历对象展开成为一个参数序列。
语法：
在可遍历对象前加上...即可将该对象展开。
例如:
const arr = [2,3,5]; console.log(...arr);
同样的，我们也可以将对象给展开。
const obj1 = { name: "obj1" }
const obj2 = { ...obj1, desc: "extend from obj1" }
看起来，我们的拓展运算符仅仅只有三个小点点，但是这三个小点点发挥的效果可多了。
拓展运算符的运用场景 代替Array.from(); 复制一个数组 我们从两个例子去使用拓展运算符去完成以上的功能。
代替Array.from()
- 吃饭
- 睡觉
- 打豆豆
可以看到，上例是报错的。我们知道直接使用querySelectorAll的到的是类数组对象。之前，我们是使用的Array.from方法去做这件事。那么，使用我们的拓展运算符，也可以快速的去完成。
- 吃饭
- 睡觉
- 打豆豆
const arr = [2, 3, 4, 9]; const newArr = [...arr]; 用拓展运算符完成一个综合的例子 image
实现鼠标hover文字渐变
代码如下: 样式部分代码如下：
复制代码逻辑代码如下:
JAVASCRIPT!
转载于:https://juejin.im/post/5c6e9fa76fb9a04a0f65c7cd
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！