【ES6+】001-ES6概述、ES 6 新特性：let 关键字

訾博ZiBo

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

4000

代码可运行

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

运行总次数：0

代码可运行

一、概述

1、什么是 ECMA

ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际；

2、什么是 ECMAScript

ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言；

百度百科：https://baike.baidu.com/history/ECMAScript/1889420/144946978

3、什么是 ECMA-262

Ecma 国际制定了许多标准，而 ECMA-262 只是其中的一个，所有标准列表查看：

http://www.ecma-international.org/publications/standards/Standard.htm

4、ECMA-262 历史

ECMA-262（ECMAScript）历史版本查看网址：

http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm

版本	时间	概述
第 1 版	1997 年	制定了语言的基本语法
第 2 版	1998 年	较小改动
第 3 版	1999 年	引入正则、异常处理、格式化输出等。IE 开始支持
第 4 版	2007 年	过于激进，未发布
第 5 版	2009 年	引入严格模式、JSON，扩展对象、数组、原型、字符串、日期方法
第 6 版	2015 年	模块化、面向对象语法、Promise、箭头函数、let、const、数组解构赋值等等
第 7 版	2016 年	幂运算符、数组扩展、Async/await 关键字
第 8 版	2017 年	Async/await、字符串扩展
第 9 版	2018 年	对象解构赋值、正则扩展
第 10 版	2019 年	扩展对象、数组方法
第 11 版	2020年	链式操作、动态导入等
ES.next	2020+	动态指向下一个版本

注：从 ES6 开始，每年发布一个版本，版本号比年份最后一位大 1；

5、谁在维护 ECMA-262

TC39（Technical Committee 39）是推进 ECMAScript 发展的委员会。其会员都是公司（其中主要是浏览器厂商，有苹果、谷歌、微软、因特尔等）。TC39 定期召开会议，会议由会员公司的代表与特邀专家出席；

6、为什么要学习 ES6

ES6 的版本变动内容最多，具有里程碑意义；
ES6 加入许多新的语法特性，编程实现更简单、高效；
ES6 是前端发展趋势，就业必备技能；

7、ES6 兼容性

查看网址：http://kangax.github.io/compat-table/es6

二、ECMASript 6 新特性

1、let 关键字

特性：

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

不允许重复声明；
块儿级作用域（局部变量）；
不存在变量提升；
不影响作用域链；

let创建变量代码示例：

// let关键字使用示例：
let a; // 单个声明
let b,c,d; // 批量声明
let e = 100; // 单个声明并赋值
let f = 521, g = 'iloveyou', h = []; // 批量声明并赋值

不允许重复声明：

代码实现：

            // 1. 不允许重复声明；
			let dog = "狗";
			let dog = "狗";
			// 报错：Uncaught SyntaxError: Identifier 'dog' has already been declared

运行结果：

块儿级作用域（局部变量）：

代码实现：

			// 2. 块儿级作用域（局部变量）；
			{
				let cat = "猫";
				console.log(cat);
			}
			console.log(cat);
			// 报错：Uncaught ReferenceError: cat is not defined

运行结果：

不存在变量提升：

什么是变量提升：

就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在；

代码实现：

// 3. 不存在变量提升；
// 什么是变量提升：就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在；
console.log(people1); // 可输出默认值 
console.log(people2); // 报错：Uncaught ReferenceError: people2 is not defined
var people1 = "大哥"; // 存在变量提升
let people2 = "二哥"; // 不存在变量提升

运行结果：

不影响作用域链：

代码实现：

			// 4. 不影响作用域链；
			// 什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用
			{
				let p = "大哥";
				function fn(){
					console.log(p); // 这里是可以使用的
				}
				fn();
			}

运行结果：

全部演示代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>let</title>
	</head>
	<body>
		let
		<script>
			// let 关键字使用示例
			let a; // 单个声明
			let b,c,d; // 批量声明
			let e = 100; // 单个声明并赋值
			let f = 521, g = 'iloveyou', h = []; // 批量声明并赋值
			
			// let 关键字特性
			// 1. 不允许重复声明；
			// let dog = "狗";
			// let dog = "狗";
			// 报错：Uncaught SyntaxError: Identifier 'dog' has already been declared
			// 2. 块儿级作用域（局部变量）；
			// {
			// 	let cat = "猫";
			// 	console.log(cat);
			// }
			// console.log(cat);
			// 报错：Uncaught ReferenceError: cat is not defined
			// 3. 不存在变量提升；
			// 什么是变量提升：就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在；
			// console.log(people1); // 可输出默认值 
			// console.log(people2); // 报错：Uncaught ReferenceError: people2 is not defined
			// var people1 = "大哥"; // 存在变量提升
			// let people2 = "二哥"; // 不存在变量提升
			// 4. 不影响作用域链；
			// 什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用
			// {
			// 	let p = "大哥";
			// 	function fn(){
			// 		console.log(p); // 这里是可以使用的
			// 	}
			// 	fn();
			// }
		</script>
	</body>
</html>

应用场景：

以后声明变量使用 let 就对了；

let案例：点击div更改颜色

代码实现：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>let案例：点击div更改颜色</title>
		<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<style>
			.item {
				width: 100px;
				height: 50px;
				border: solid 1px rgb(42, 156, 156);
				float: left;
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<h2 class="page-header">let案例：点击div更改颜色</h2>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
		<script>
			// 获取div元素对象
			let items = document.getElementsByClassName('item');

			// 遍历并绑定事件
			for (let i = 0; i < items.length; i++) {
				items[i].onclick = function() {
					// 修改当前元素的背景颜色
					// this.style.background = 'pink'; // 写法一：常规写法一般无异常
					items[i].style.background = 'pink'; // 写法二
					// 写法二：需要注意的是for循环内的i必须使用let声明
					// 如果使用var就会报错，因为var是全局变量，
					// 经过循环之后i的值会变成3，items[i]就会下标越界
					// let是局部变量
					// 我们要明白的是当我们点击的时候，这个i是哪个值
					// 使用var相当于是：
					// { var i = 0; }
					// { var i = 1; }
					// { var i = 2; }
					// { var i = 3; }
					// 下面的声明会将上面的覆盖掉，所以点击事件每次找到的都是3
					// 而使用let相当于是：
					// { let i = 0; }
					// { let i = 1; }
					// { let i = 2; }
					// { let i = 3; }
					// 由于let声明的是局部变量，每一个保持着原来的值
					// 点击事件调用的时候拿到的是对应的i
				}
			}
		</script>
	</body>

</html>

运行结果：