【ES6+】001
【ES6+】001
一、概述1、什么是 ECMAECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际；2、什么是 ECMAScriptECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言；、
【ES6+】001
1、什么是 ECMA
ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际；
2、什么是 ECMAScript
ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言；
、什么是 ECMA-262
Ecma 国际制定了许多标准，而 ECMA-262 只是其中的一个，所有标准列表查看：
4、ECMA-262 历史
ECMA-262（ECMAScript）历史版本查看网址：
版本 | 时间 | 概述 |
|---|---|---|
第 1 版 | 1997 年 | 制定了语言的基本语法 |
第 2 版 | 1998 年 | 较小改动 |
第 版 | 1999 年 | 引入正则、异常处理、格式化输出等。IE 开始支持 |
第 4 版 | 2007 年 | 过于激进，未发布 |
第 5 版 | 2009 年 | 引入严格模式、JSO，扩展对象、数组、原型、字符串、日期方法 |
第 6 版 | 2015 年 | 模块化、面向对象语法、Promise、箭头函数、let、ct、数组解构赋值等等 |
第 7 版 | 2016 年 | 幂运算符、数组扩展、Async/await 关键字 |
第 8 版 | 2017 年 | Async/await、字符串扩展 |
第 9 版 | 2018 年 | 对象解构赋值、正则扩展 |
第 10 版 | 2019 年 | 扩展对象、数组方法 |
第 11 版 | 2020年 | 链式操作、动态导入等 |
2020+ | 动态指向下一个版本 |
注：从 ES6 开始，每年发布一个版本，版本号比年份最后一位大 1；
5、谁在维护 ECMA-262
TC9（Technical Committee 9）是推进 ECMAScript 发展的委员会。其会员都是公司（其中主要是浏览器厂商，有苹果、谷歌、微软、因特尔等）。TC9 定期召开会议，会议由会员公司的代表与特邀专家出席；
6、为什么要学习 ES6
- ES6 的版本变动内容最多，具有里程碑意义；
- ES6 加入许多新的语法特性，编程实现更简单、高效；
- ES6 是前端发展趋势，就业必备技能；
7、ES6 兼容性
1、let 关键字
特性：
let 关键字用来声明变量，使用 let 声明的变量有几个特点：
- 不允许重复声明；
- 块儿级作用域（局部变量）；
- 不存在变量提升；
- 不影响作用域链；
let创建变量代码示例：
代码语言：javascript代码运行次数：0运行复制// let关键字使用示例：
let a; // 单个声明
let b,c,d; // 批量声明
let e = 100; // 单个声明并赋值
let f = 521, g = 'iloveyou', h = []; // 批量声明并赋值不允许重复声明：
代码实现：
代码语言：javascript代码运行次数：0运行复制 // 1. 不允许重复声明；
let dog = "狗";
let dog = "狗";
// 报错：Uncaught SyntaxError: Identifier 'dog' has already been declared运行结果：
块儿级作用域（局部变量）：
代码实现：
代码语言：javascript代码运行次数：0运行复制 // 2. 块儿级作用域（局部变量）；
{
let cat = "猫";
cole.log(cat);
}
cole.log(cat);
// 报错：Uncaught ReferenceError: cat is not defined运行结果：
不存在变量提升：
什么是变量提升：
就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在；
代码实现：
代码语言：javascript代码运行次数：0运行复制// . 不存在变量提升；
// 什么是变量提升：就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在；
cole.log(people1); // 可输出默认值
cole.log(people2); // 报错：Uncaught ReferenceError: people2 is not defined
var people1 = "大哥"; // 存在变量提升
let people2 = "二哥"; // 不存在变量提升运行结果：
不影响作用域链：
代码实现：
代码语言：javascript代码运行次数：0运行复制 // 4. 不影响作用域链；
// 什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用
{
let p = "大哥";
function fn(){
cole.log(p); // 这里是可以使用的
}
fn();
}运行结果：
全部演示代码：
代码语言：javascript代码运行次数：0运行复制<!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 = "猫";
// cole.log(cat);
// }
// cole.log(cat);
// 报错：Uncaught ReferenceError: cat is not defined
// . 不存在变量提升；
// 什么是变量提升：就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在；
// cole.log(people1); // 可输出默认值
// cole.log(people2); // 报错：Uncaught ReferenceError: people2 is not defined
// var people1 = "大哥"; // 存在变量提升
// let people2 = "二哥"; // 不存在变量提升
// 4. 不影响作用域链；
// 什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用
// {
// let p = "大哥";
// function fn(){
// cole.log(p); // 这里是可以使用的
// }
// fn();
// }
</script>
</body>
</html>应用场景：
以后声明变量使用 let 就对了；
let案例：点击div更改颜
代码实现：
代码语言：javascript代码运行次数：0运行复制<!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="..7/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.getElementsByClassame('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的值会变成，items[i]就会下标越界
// let是局部变量
// 我们要明白的是当我们点击的时候，这个i是哪个值
// 使用var相当于是：
// { var i = 0; }
// { var i = 1; }
// { var i = 2; }
// { var i = ; }
// 下面的声明会将上面的覆盖掉，所以点击事件每次到的都是
// 而使用let相当于是：
// { let i = 0; }
// { let i = 1; }
// { let i = 2; }
// { let i = ; }
// 由于let声明的是局部变量，每一个保持着原来的值
// 点击事件调用的时候拿到的是对应的i
}
}
</script>
</body>
</html>运行结果：
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2025-07-23 09:31:33
上一篇：【ES6+】002
推荐阅读
| 留言与评论（共有 12 条评论） |
| 本站网友 化妆品使用步骤 | 20分钟前 发表 |
| 概述1 | |
| 本站网友 澳大利亚野鸡大学 | 4分钟前 发表 |
| IE 开始支持第 4 版2007 年过于激进 | |
| 本站网友 沈阳整形美容医院 | 18分钟前 发表 |
| 箭头函数 | |
| 本站网友 sponge | 2分钟前 发表 |
| 什么是 ECMAECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会 | |
| 本站网友 工信部官方网站 | 0秒前 发表 |
| 为什么要学习 ES6 ES6 的版本变动内容最多 | |
| 本站网友 上海肝病 | 13分钟前 发表 |
| var存在； cole.log(people1); // 可输出默认值 cole.log(people2); // 报错：Uncaught ReferenceError | |
| 本站网友 上海最好的皮肤科医院 | 12分钟前 发表 |
| cat is not defined // . 不存在变量提升； // 什么是变量提升：就是在变量创建之前使用（比如输出：输出的是默认值） | |
| 本站网友 昆明湖 | 23分钟前 发表 |
| 面向对象语法 | |
| 本站网友 7亿日币 | 5分钟前 发表 |
| 数组解构赋值等等第 7 版2016 年幂运算符 | |
| 本站网友 辅酶q10的作用 | 26分钟前 发表 |
| 156); float | |
| 本站网友 萘普生 | 8分钟前 发表 |
| h = []; // 批量声明并赋值不允许重复声明：代码实现：代码语言：javascript代码运行次数：0运行复制 // 1. 不允许重复声明； let dog = "狗"; let dog = "狗"; // 报错：Uncaught SyntaxError | |