【ES6+】004-ES6新特性：ES6中函式引數的預設值、rest引數、擴充套件運算子

阿新 • • 發佈：2020-12-21

一、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>