JS:ES6-5 rest参数与扩展运算符

最新推荐文章于 2024-07-04 15:14:45 发布

小白目

最新推荐文章于 2024-07-04 15:14:45 发布

阅读量142

点赞数 1

分类专栏： ES6 -- 11 文章标签： javascript 前端 vue.js es6

本文链接：https://blog.csdn.net/qq_37974755/article/details/122100292

版权

ES6 -- 11 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

rest参数概述： ES6 引入 rest 参数，用于获取函数的实参，注意与arguments对象的区别

rest参数只包括没有给出名称的参数，而arguments包含所有参数
arguments 对象不是真正的数组，而rest 参数是数组实例（可以用sort, map, forEach, pop等方法）
arguments 对象拥有一些rest参数没有的功能

代码示例及相关说明：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rest参数</title>
</head>
<body>
<script>
// ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments；
// ES5获取实参的方式
function data(){
console.log(arguments);   //["大哥","二哥","三哥","四哥"]
}
data("大哥","二哥","三哥","四哥");
// ES6的rest参数...args，rest参数必须放在最后面
function data(...args){
console.log(args); // fliter some every map  //["大哥","二哥","三哥","四哥"]
}
data("大哥","二哥","三哥","四哥");
</script>
</body>
</html>

扩展运算符（...）能将数组转换为逗号分隔的参数序列；好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包；

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>扩展运算符应用</title>
</head>
<body>
<script>
// 『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』

// 声明一个数组
const tfboys = ['易烊千玺','王源','王俊凯'];
// => '易烊千玺','王源','王俊凯'

// 声明一个函数
function chunwan(){
console.log(arguments);
}
chunwan(...tfboys);// chunwan('易烊千玺','王源','王俊凯')

</script>
</body>
</html>

应用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>扩展运算符应用</title>
</head>
<body>
<div id = "d1"></div>
<div id = "d2"></div>
<script>
//1. 数组的合并 情圣 误杀 唐探
const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];
// 传统的合并方式
// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
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); // arguments
</script>
</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<script type="text/javascript" >
			let arr1 = [1,3,5,7,9]
			let arr2 = [2,4,6,8,10]
			console.log(...arr1); //展开一个数组
			let arr3 = [...arr1,...arr2]//连接数组
			
			//在函数中使用
			function sum(...numbers){
				return numbers.reduce((preValue,currentValue)=>{
					return preValue + currentValue
				})
			}
			console.log(sum(1,2,3,4));

			//构造字面量对象时使用展开语法
			let person = {name:'tom',age:18}
			let person2 = {...person}

			//console.log(...person); //报错，展开运算符不能展开对象

			person.name = 'jerry'
			console.log(person2);
			console.log(person);

			//合并
			let person3 = {...person,name:'jack',address:"地球"}
			console.log(person3);
			
		</script>
	</body>
</html>

小白目

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS:ES6-5 rest参数与扩展运算符

概述： ES6 引入 rest 参数，用于获取函数的实参，注意与arguments对象的区别rest参数只包括没有给出名称的参数，而arguments包含所有参数 arguments 对象不是真正的数组，而rest 参数是数组实例（可以用sort, map, forEach, pop等方法） arguments 对象拥有一些rest参数没有的功能代码示例及相关说明：<!DOCTYPE html><html><head><meta chars.
复制链接

扫一扫