（剩餘引數、擴充運算子）
剩餘引數 之前，我們在接觸多個引數的時候，通常使用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文字漸變
程式碼如下: 樣式部分程式碼如下：
<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>
複製程式碼邏輯程式碼如下: