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

拼搏现实的明天。 2023-10-05 16:02 7阅读 0赞

**目录**

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

1、概述

2、代码示例及相关说明

二、rest参数

1、概述

2、代码示例及相关说明

3、运行结果

三、扩展运算符

1、介绍

2、基本使用

3、运行结果

4、应用

5、运行结果

--------------------

# 一、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][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、运行结果 ##

![20201217103028544.png][]

# 三、扩展运算符 #

## 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、运行结果 ##

##  ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

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

## 5、运行结果 ##

![20201217103201424.png][]

[https_www.jianshu.com_p_50bcb376a419]: https://www.jianshu.com/p/50bcb376a419
[20201217103028544.png]: https://img-blog.csdnimg.cn/20201217103028544.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201217103132108.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[20201217103201424.png]: https://img-blog.csdnimg.cn/20201217103201424.png