【ES6+】002-ES6新特性：const 關鍵字、變數的解構賦值、模板字串

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

一、const 關鍵字

1、特性

const 關鍵字用來宣告常量，const 宣告有以下特點：

宣告必須賦初始值；
識別符號一般為大寫（習慣）；
不允許重複宣告；
值不允許修改；
塊兒級作用域（區域性變數）；

2、const建立變數程式碼示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>const</title>
	</head>
	<body>
		<script>
			// const宣告常量
			const DOG = "旺財";
			console.log(DOG);
		</script>
	</body>
</html>

3、宣告必須賦初始值

程式碼實現：

			// 1. 宣告必須賦初始值；
			const CAT;

執行結果：

4、不允許重複宣告

程式碼實現：

            // 3. 不允許重複宣告；
			const CAT = "喵喵";
			const CAT = "喵喵";

執行結果：

5、值不允許修改

注意：

對陣列元素的修改和對物件內部的修改是可以的（陣列和物件存的是引用地址）；

程式碼實現：

			// 4. 值不允許修改；
			const CAT = "喵喵";
			CAT = "咪咪";

執行結果：

6、塊兒級作用域（區域性變數）

程式碼實現：

			// 5. 塊兒級作用域（區域性變數）；
			{
				const CAT = "喵喵";
				console.log(CAT);
			}
			console.log(CAT);

執行結果：

7、全部演示程式碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>const</title>
	</head>
	<body>
		<script>
			// const宣告常量
			const DOG = "旺財";
			console.log(DOG);
			// 1. 宣告必須賦初始值；
			// const CAT;
			// 報錯：Uncaught SyntaxError: Missing initializer in const declaration
			// 2. 識別符號一般為大寫（習慣）；
			// const dog = "旺財"; // 小寫也不錯
			// 3. 不允許重複宣告；
			// const CAT = "喵喵";
			// const CAT = "喵喵";
			// 報錯：Uncaught SyntaxError: Identifier 'CAT' has already been declared
			// 4. 值不允許修改；
			// const CAT = "喵喵";
			// CAT = "咪咪";
			// 報錯：Uncaught TypeError: Assignment to constant variable.
			// 5. 塊兒級作用域（區域性變數）；
			// {
			// 	const CAT = "喵喵";
			// 	console.log(CAT);
			// }
			// console.log(CAT);
			// 報錯：Uncaught ReferenceError: CAT is not defined
		</script>
	</body>
</html>

8、應用場景

宣告物件型別使用 const，非物件型別宣告選擇 let；

二、變數的解構賦值

1、什麼是解構賦值

ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構賦值；

2、程式碼演示及相關說明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>解構賦值</title>
	</head>
	<body>
		<script>
			// ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構賦值；
			// 1、陣列的解構賦值
			const F4 = ["大哥","二哥","三哥","四哥"];
			let [a,b,c,d] = F4;
			// 這就相當於我們宣告4個變數a,b,c,d，其值分別對應"大哥","二哥","三哥","四哥"
			console.log(a + b + c + d); // 大哥二哥三哥四哥
			// 2、物件的解構賦值
			const F3 = {
				name : "大哥",
				age : 22,
				sex : "男",
				xiaopin : function(){ // 常用
					console.log("我會演小品！");
				}
			}
			let {name,age,sex,xiaopin} = F3; // 注意解構物件這裡用的是{}
			console.log(name + age + sex + xiaopin); // 大哥22男
			xiaopin(); // 此方法可以正常呼叫
		</script>
	</body>
</html>

3、應用場景

頻繁使用物件方法、陣列元素，就可以使用解構賦值形式；

三、模板字串

1、概述

模板字串（template string）是增強版的字串，用反引號（`）標識，特點：

字串中可以出現換行符；
可以使用 ${xxx} 形式引用變數；

2、程式碼演示及相關說明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 宣告字串的方法：單引號（''）、雙引號（""）、反引號（``）
			// 宣告
			let string = `我也一個字串哦！`;
			console.log(string);
			
			// 特性
			// 1、字串中可以出現換行符
			let str = 
			`<ul>
				<li>大哥</li>
				<li>二哥</li>
				<li>三哥</li>
				<li>四哥</li>
			</ul>`;
			console.log(str);
			// 2、可以使用 ${xxx} 形式引用變數
			let s = "大哥";
			let out = `${s}是我最大的榜樣！`;
			console.log(out);
		</script>
	</body>
</html>