剩余参数、拓展运算符

（剩余参数、拓展运算符）

剩余参数 之前，我们在接触多个参数的时候，通常使用arguments对象去代替接收多个参数。但是，使用arguments对象去接收参数有几个不好的地方。

arguments是类数组对象，不能使用数组的很多便捷操作。 箭头函数当中没有arguments对象 为了解决这个问题，在ES6当中，推出了剩余参数的概念。同样的，我们以计算参数的和为例子去学习剩余参数。

const sum = (...args) => { console.log(args); return args.reduce((prev, curr) => prev+curr,0) } image

可以看到，剩余参数的原型是数组。那么，我们就可以愉快的使用数组的各种快捷操作了。

我们来看看剩余参数的几个例子

1. 变量的解构赋值

假设我有以下的数据：分别存储着用户名、用户id和用户不同时段的用户分数。那么，为了用变量取到他的值。我们可以使用剩余参数进行快速的操作。

const player = ["Alex", 9831, 5.5, 9.8, 9.9];

const [name, id, ...scores] = player;

2. 计算汇率

我期望利用一个函数去计算输入固定汇率之后。对应汇率之后所有的换算金额。

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文字渐变

代码如下: 样式部分代码如下：

<style>
    body,html {
        height: 100%;
    }
    body {
        background: #ff6700;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    h1 {
        color: #fff;
        font-size: 60px;
        text-shadow: 4px 4px 4px rgba(0,0,0,.8);
    }
    h1 span {
        display: inline-block;
        transition: transform .2s;
    }
    .hiligh:hover {
        transform: scale(1.6) rotateZ(-20deg) translateY(-20px);
    }
</style>
复制代码

逻辑代码如下:

JAVASCRIPT!

转载于:https://juejin.im/post/5c6e9fa76fb9a04a0f65c7cd