【ES6+】002-ES6新特性：const 关键字、变量的解构赋值、模板字符串

訾博ZiBo

发布于 2025-01-06 16:59:23

6400

代码可运行

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

运行总次数：0

代码可运行

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