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

Myth丶恋晨 2023-10-05 16:01 15阅读 0赞

**目录**

一、概述

1、什么是 ECMA

2、什么是 ECMAScript

3、什么是 ECMA-262

4、ECMA-262 历史

5、谁在维护 ECMA-262

6、为什么要学习 ES6

7、ES6 兼容性

二、ECMASript 6 新特性

1、let 关键字

特性：

let创建变量代码示例：

不允许重复声明：

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

不存在变量提升：

不影响作用域链：

全部演示代码：

应用场景：

let案例：点击div更改颜色

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

# 一、概述 #

## 1、什么是 ECMA ##

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

## 2、什么是 ECMAScript ##

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

百度百科：[https://baike.baidu.com/history/ECMAScript/1889420/144946978][https_baike.baidu.com_history_ECMAScript_1889420_144946978]

## 3、什么是 ECMA-262 ##

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

[http://www.ecma-international.org/publications/standards/Standard.htm][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][http_www.ecma-international.org_publications_standards_Ecma-262-arch.htm]

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

**注：从 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][http_kangax.github.io_compat-table_es6]

# 二、ECMASript 6 新特性 #

## 1、let 关键字 ##

### 特性： ###

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

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

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

**运行结果：**

![20201217100454526.png][]

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

**代码实现：**

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

**运行结果：**

![20201217100551304.png][]

### 不存在变量提升： ###

**什么是变量提升：**

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

**代码实现：**

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

**运行结果：**

![20201217100702914.png][]

### 不影响作用域链： ###

**代码实现：**

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

**运行结果：**

![20201217100750452.png][]

### 全部演示代码： ###

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

**运行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

[https_baike.baidu.com_history_ECMAScript_1889420_144946978]: https://baike.baidu.com/history/ECMAScript/1889420/144946978
[http_www.ecma-international.org_publications_standards_Standard.htm]: http://www.ecma-international.org/publications/standards/Standard.htm
[http_www.ecma-international.org_publications_standards_Ecma-262-arch.htm]: http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm
[http_kangax.github.io_compat-table_es6]: http://kangax.github.io/compat-table/es6
[20201217100454526.png]: https://img-blog.csdnimg.cn/20201217100454526.png
[20201217100551304.png]: https://img-blog.csdnimg.cn/20201217100551304.png
[20201217100702914.png]: https://img-blog.csdnimg.cn/20201217100702914.png
[20201217100750452.png]: https://img-blog.csdnimg.cn/20201217100750452.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201217100908506.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70