介绍:
...扩展运算符能将数组转换为逗号分隔的参数序列;
扩展运算符(speed)也是三个点(...)。它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列,对数组进行解包;
基本使用:
//... 扩展运算符能将数组转换为逗号分隔的参数序列
//声明一个数组...
const tfboys = ['易烊千玺', '王俊凯', '王源'];
//=> '易烊千玺', '王俊凯', '王源'
//声明一个函数
function chinwag() {
console.log(arguments);
}
chinwag(...tfboys);// chunwan('易烊千玺','王源','王俊凯')
运行结果:
应用场景:
一、数组的合并
1、传统方式
//1.数组的合并 情圣 误杀 唐探
const tachyon = ['王太利', '肖央'];
const phoenix = ['曾毅', '玲花'];
//传统方式合并
const ArrayMerge = tachyon.concat(phoenix);
console.log(ArrayMerge);
运行结果:
2.扩展运算符做法
//1.数组的合并 情圣 误杀 唐探
const tachyon = ['王太利', '肖央'];
const phoenix = ['曾毅', '玲花'];
//扩展运算符合并
const ArrayMerge = [...tachyon, ...phoenix];
console.log(ArrayMerge);
运行结果:
二、数组的克隆
//2.数组的克隆 情圣 误杀 唐探
const tachyon = ['情圣', '误杀', '唐探'];
const ArrayClone = [...tachyon];
console.log(ArrayClone);
运行结果:
三、将伪数组转为真正的数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扩展运算符的使用</title>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<script>
//3.将伪数组转换为真正的数组
const diva = document.querySelectorAll('div');
const divArr = [...diva];
console.log(divArr); //arguments
</script>
</body>
</html>