【ES6+】004-ES6新特性：ES6中函数参数的默认值、rest参数、扩展运算符

訾博ZiBo

发布于 2025-01-06 17:00:11

4600

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

一、ES6中函数参数的默认值

1、概述

ES允许给函数的参数赋初始值；

2、代码示例及相关说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数参数默认值</title>
	</head>
	<body>
		<script>
		        //ES6 允许给函数参数赋值初始值
		        //1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
		        function add(a,b,c=10) {
		            return a + b + c;
		        }
		        let result = add(1,2);
		        console.log(result); // 13
		
		        //2. 与解构赋值结合
				// 注意这里参数是一个对象
		        function connect({host="127.0.0.1", username,password, port}){
		            console.log(host)
		            console.log(username)
		            console.log(password)
		            console.log(port)
		        }
		        connect({
		            host: 'atguigu.com',
		            username: 'root',
		            password: 'root',
		            port: 3306
		        })
		    </script>
	</body>
</html>

二、rest参数

1、概述

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

参考文章：https://www.jianshu.com/p/50bcb376a419

2、代码示例及相关说明

<!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>

3、运行结果

三、扩展运算符

1、介绍

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

扩展运算符（spread）也是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包；

2、基本使用

<!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

3、运行结果

4、应用

<!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>