js扩展运算符
ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,这次还是继续来讲讲ES6的其他知识吧！
使用方法
上面提到的剩余参数把多个数据整合成一个数组，而扩展运算符把一个可遍历对象的每个元素扩展成一个新的参数序列。
下面是以前的老方法
const name = ["kaiqisan", "jaon", "lio"]
const name2 = ["geory", "fans", "dioda"]
let member = name.concat()
//最后打印输出member得 ["kaiqisan", "jaon", "lio", "geory", "fans", "dioda"]
//这句话意思是把name和name2连起来
//如果碰到在name和name2之间穿插一些东西的时候，就会很麻烦
let member = []
member = member.concat(name)
member.push("mary")
member = member.concat(name2)
//要插入的数据越多，代码量也就越多
于是我们引入扩展运算符
const name = ["kaiqisan", "jaon", "lio"]
const name2 = ["geory", "fans", "dioda"]
let member = [...name, "mary", ...name2]
//得到整合过的数组["kaiqisan", "jaon", "lio", "mary", "geory", "fans", "dioda"]
它还可以拆解字符串
let a = [..."kaiqisan"]
//输出a ,得到["k", "a", "i", "q", "i", "s", "a", "n"]
注意点
const a = member
a[0] = "aaaa"
//此时，a和member的第一个元素都变成了"aaaa",因为在赋值的时候只是复制了索引而不是值，a和member都指向同一个地方，所以，一方的修改就会导致两者一起发生改变。
//此时可以这样解决问题，
const a = [].concat(member)
//但是还是有点麻烦，于是我们还是可以利用扩展运算符来实现真正的赋值
const a = [...member]
实践使用
.heading{
font-size: 90px;
color:rgb(229,131,8)
}
.heading span{
cursor: pointer;
display: inline-block;
margin-left: 5px;
transition: 0.5s;
}
.heading span:hover{
transform: translateX(20px) rotate(10deg) scale(1.5);
}
<h2 class="heading">kaiqisan</h2>
=>试图实现如下效果，然后再鼠标挪到相应位置的时候相应的字母产生动画。
<h2 class="heading">
<span>k</span>
<span>a</span>
<span>i</span>
<span>q</span>
<span>i</span>
<span>s</span>
<span>a</span>
<span>n</span>
</h2>
const heading = document.querySelector(".heading")
let a = wrapWithSpan(heading.textContent)
heading.innerHTML = a
function wrapWithSpan (word) {
return [...word].map(word=>`<span>${
word}</span>`).join("")
//拆分元素并逐个套上span标签然后去掉逗号成为真正可以的被渲染的html语言
}
其他例子
**I。**充当Array.from()方法(类数组对象转化为真正的数组)
<ul>
<li>sleep</li>
<li>eat</li>
<li>drink</li>
</ul>
const todo=[...document.querySelectorAll('li')]
//在这之后，todo就可以使用数组方法了
**II。**扩展对象的属性
const lists = {
fruit: ["apple", "banana"],
meat: ["park", "chicken"]
}
const tobuy = ["milk", "bean", ...lists.fruit]
//最后得到tobuy为： ["milk", "bean", "apple", "banana"]
let info = {
vip: false,
level: 100
}
let list = {
name: 'kaiqisan',
uid: 10001,
...info
}
console.log(list)
// list = {
// name: 'kaiqisan',
// uid: 10001,
// vip: false,
// level: 100
// }
PS:如果存在相同的属性名，只有最后一个会生效。
**III。**在函数中的应用
原来，在拼接字符串的时候，要使用apply方法拼接
const fruit = ["apple", "banana", "pear"]
const newFruit = ["watmal", "mongo"]
fruit.push.apply(fruit, newFruit)
//这里把newFruit里的元素一个一个地push到fruit里边去
现在，我们有了扩展运算符之后，就可以方便一点。
fruit.push(...newFruit)
//这样也可以达到同样的效果
同样这也可以应用于**Date()**方法中
const Datetime=[2017, 5, 6]
const newdate=new Date(...Datetime)
//于是Date()方法里就可以传入不确定的参数个数，最后都可以刷新时间
IV. 可以作为不定数量形参代替argument
function sum (...numbers) {
return numbers.reduce((prev, curr) => prev + curr, 0)
}
console.log(sum(1,4,7))
//这里的numbers原型是数组,不是argement，所以可以直接使用数组方法。
这个剩余参数也可以和别的参数灵活搭配
function sum (rate, ...money) {
return money.map(amount => amount * rate)
}
console.log(sum(0, 78, 15, 45, 78))
用于变量解构
const player = ['kaiqisan', 125, 45, 78, 100, 12, 79, 78]
const [name, times, score] = player
//此时，获取的score为player数组的第三个参数而不是从第三位开始的后面所有参数
//所以这时就要使用剩余参数
const [name, times, ...score] = player
//于是就可以获得想要的东西了。
总结
对于刚刚接触ES6的初心者来说，这里的内容会有点抽象，我有一计！
对于数组的扩展，可以这么理解
let arr = ['1', '2', '3', '4']
let sum = ['a', ...arr]
此时可以把 ...arr 想象成 '1', '2', '3', '4',然后就顺理成章了
对于对象，也可以用同样的方式
let info = {
vip: false,
level: 100
}
let list = {
name: 'kaiqisan',
uid: 10001,
...info
}
可以把...info想象成 vip: false,level: 100,然后再进行替换，就顺理成章了！