es6 rest参数与扩展运算符_es6rest参数和扩展运算-CSDN博客

本文链接：https://blog.csdn.net/weixin_43548815/article/details/114854472

本文详细介绍了ES6中的Rest参数和扩展运算符的用法，包括如何使用Rest参数来简化函数参数的处理过程，以及如何利用扩展运算符进行数组合并、克隆及转换伪数组等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6引入rest 参数，用于获取函数的实参，用来代替arguments

ES5 获取实参的方式

function date(){
	console . log( arguments);
}
date('小明'，'小红'，'小张');      //结果为一个对象

es6中rest参数

function date(.. .args){
console. logfargs);
}
date('小明'，'小红'，'小张'); //结果为一个数组，此时即可以使用数组api的方法，例如filter，some，every，map

rest 参数必须要放到参数最后

function fn(a,b,...args){  //不能写作  fn(a,...args,b)
		console.log(a); //a  1
		console.log(b); //b  2
		console.log(args); //args  3,4,5,6
	}
fn(1,2,3,4,5,6);

「…」扩展运算符能将「数组」转换为逗号分隔的「参数序列」

//声明一个数组
const student = ['小明'，'小红'，'小张'];
//声明一个函数
function school(){
	console.log(arguments);
}
school();	//输出一个数组：['小明'，'小红'，'小张']
school(...student); //输出参数序列

应用

//1.数组的合并
 const kuaizi = ['王太利','肖央'];
 const fenghuang = ['曾毅','玲花'];
// const zuixuanxiaopingguo = kuaizi.concat (fenghuang); //es5的写法
const zuixuanxiaopingguo = [...kuaizi, ... fenghuang]; //es6新写法
console.log(zuixuanxiaopingguo);

//2.数组的克隆
const sanzhihua = ['E','G','M' ];
const sanyecao = [... sanzhihua];// [E','G','M']
console.log(sanyecao);

//3.将伪数组转为真正的数组
const divs = document.querySelectorAll( 'div' );
const divArr = [...divs];
console.log(divArr);