Part 1 -模块二：ES 新特性与 TypeScript、JS 性能优化

Part 1 -模块二：ES 新特性与 TypeScript、JS 性能优化

---

章节：

​ Part 1 · JavaScript 深度剖析：

​ 模块二：ES 新特性与 TypeScript、JS 性能优化

概要：

• ECMAScript与JavaScript
• ECMAScript的发展过程
• ECMAScript2015的新特性

2、ECMAScript概述

---

• ECMAScript通常看做JavaScript的标准化规范

• 实际上JavaScript是ECMAScript的扩展语言

• ECMAScript只提供了最基本的语法（例如，怎么定义变量常量）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jvoeP8q8-1605762522991)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20201110132619521.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4B3f9fB4-1605762522995)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20201110132658528.png)]

• JavaScript语言本身指的就是ECMAScript

• ES2015=ES6

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ogS4pYn3-1605762522997)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20201110132840084.png)]

3、ES2015概述

“ES6”——有泛指ES2015在内往后的新版本的意思，注意分辨文中是指ES2015还是新版本

ES2015新特性（在ES5.1基础之上的变化，主要分4大类）：

• 解决原有语法上的一些问题或者不足
• 对原有语法进行增强
• 全新的对象、全新的方法、全新的功能
• 全新的数据类型和数据结构

4、ES2015准备工作

---

**运行环境：**NodeJS和最新Chrome

NodeJS小工具：Nodemon——修改完代码后自动执行代码

命令使用：

查看node版本

node --version

打开相应项目

code .\01-02-01-01-es2015-spec\

初始化一个新项目

yarn init

添加nodemon依赖包到devDependencies

yarn add nodemon --dev

自动执行代码（nodemon写法：nodemon替换node即可）

yarn nodemon 01-test.js

5、ES2015 let 与块级作用域

---

**作用域：**某个成员能够起作用的范围

ES2015之前，有两种作用域：

• 全局作用域
• 函数作用域

ES2015新增：

• 块级作用域：

  • 块：用一对花括号包裹的范围，例如if、for语句中的{}

  if (true) {
  	console.log('haha,me')
  }
  
  for (var i = 0; i< 10; i++){
  	console.log('haha,me')
  }
  

let和var区别：

• 块级作用域
• 变量提升

块级作用域

// var--ES6以前块没有独立的作用域，导致块内定义的成员，外部也能访问到
if (true) {
    var foo = 'hhh';
}
console.log(foo); // hhh

// let-- 声明的成员只会在所声明的块中生效
if (true) {
    let foo = 'hhh';
}
console.log(foo); // foo is not defined

在 for 循环中的表现（应用场景：计数器）

// var--变量同名，外层for循环受影响
for (var i = 0; i < 3; i++) {
  for (var i = 0; i < 3; i++) {
    console.log(i)
  }
  console.log('内层结束   i = ' + i)
}

/*
0
1
2
内层结束   i = 3
*/

// let--变量同名，外层for循环无影响
for (var i = 0; i < 3; i++) {
  for (let i = 0; i < 3; i++) {
    console.log(i)
  }
  console.log('内层结束 i = ' + i)
}

/*
0
1
2
内层结束 i = 0
0
1
2
内层结束 i = 1
0
1
2
内层结束 i = 2
*/

let 应用场景：循环绑定事件，事件处理函数中获取正确索引

// var
var elements =