update: let、const

This commit is contained in:
qianguyihao 2020-07-06 19:11:21 +08:00
parent aac7659854
commit 4eb000322f
5 changed files with 44 additions and 39 deletions

View File

@ -20,7 +20,7 @@ PS简单来说ECMAScript 是 JS 的语言标准但严格来说ECMASc
- 2011 发布 ECMAScript5.1成为 ISO 国际标准从而推动所有浏览器都支持 - 2011 发布 ECMAScript5.1成为 ISO 国际标准从而推动所有浏览器都支持
- 2015 6 发布 ECMAScript 6简称 ES6 ECMAScript 2015注意**前者是按版本号区分后者是按年份区分**ES 后续的版本请尽量用**年份**来命名 - 2015 6 发布 ECMAScript 6简称 ES6 ECMAScript 2015注意**前者是按版本号区分后者是按年份区分**ES 后续的版本请尽量用**年份**来命名
- 2016 6 发布 ECMAScript 7 ECMAScript 2016 - 2016 6 发布 ECMAScript 7 ECMAScript 2016
@ -34,9 +34,7 @@ PS简单来说ECMAScript 是 JS 的语言标准但严格来说ECMASc
- ...... - ......
* 此后每年更新一版
- 此后每年更新一版
### ES6 简介 ### ES6 简介
@ -46,7 +44,13 @@ ES6 是新的 JS 语法标准。**ES6 实际上是一个泛指,泛指 ES 2015
很多人在做业务选型的时候会倾向于选 jQuery其实 jQuery 的语法是偏向于 ES3 而现在主流的框架 Vue.js React.js 的默认语法都是用的 ES6 很多人在做业务选型的时候会倾向于选 jQuery其实 jQuery 的语法是偏向于 ES3 而现在主流的框架 Vue.js React.js 的默认语法都是用的 ES6
ES6 中增加了很多功能上的不足比如**常量作用域对象代理异步处理继承**这些在 ES5 中想实现比较复杂但是 ES6 对它们进行了封装 ES6 的改进如下
- ES6 之前的变量提升会导致程序在运行时有一些不可预测性 ES6 中通过 letconst 变量优化了这一点
- ES6 增加了很多功能比如**常量作用域对象代理异步处理继承**这些在 ES5 中想实现比较复杂但是 ES6 对它们进行了封装
- ES6 之前的语法过于松散实现相同的功能不同的人可能会写出不同的代码
ES6 的目标是 JS 语言可以编写复杂的大型应用程序成为企业级开发语言 ES6 的目标是 JS 语言可以编写复杂的大型应用程序成为企业级开发语言
@ -54,7 +58,7 @@ ES6 的目标是:让 JS 语言可以编写复杂的大型应用程序,成为
掌握 ES6 之后如果要考虑 ES5 的兼容性可以这样做 ES6 语法的 js 代码然后通过 `Babel` ES6 转换为 ES5 掌握 ES6 之后如果要考虑 ES5 的兼容性可以这样做 ES6 语法的 js 代码然后通过 `Babel` ES6 转换为 ES5
babel 的作用是将 ES6 语法转为 ES5语法支持低端浏览器 babel 的作用是将 ES6 语法转为 ES5 语法支持低端浏览器
但是在这之前我们需要配置一下相关的环境 但是在这之前我们需要配置一下相关的环境

View File

@ -1,14 +1,14 @@
## ES6 的变量声明 ## ES6 的变量声明
ES6 中新增了 let const 来定义变量 ES5 使用 `var` 定义**全局变量** var variable 的简写
- `var`ES5 ES6 定义**全局变量** variable 的简写 ES6 新增了 let const 来定义变量
- `let`定义**局部变量**替代 var - `let`定义**局部变量**替代 var
- `const`定义**常量**定义后不可修改 - `const`定义**常量**定义后不可修改
### var全局变量 ### 1var定义全局变量
看下面的代码 看下面的代码
@ -22,6 +22,8 @@ console.log(a); //这里的 a指的是 区块 里的 a
上方代码是可以输出结果的输出结果为 1因为 var 是全局声明的所以即使是在区块里声明但仍然在全局起作用 上方代码是可以输出结果的输出结果为 1因为 var 是全局声明的所以即使是在区块里声明但仍然在全局起作用
也就是说**使用 var 声明的变量不具备块级作用域特性**
再来看下面这段代码 再来看下面这段代码
```javascript ```javascript
@ -37,9 +39,9 @@ console.log(a); //这里的 a指的是 区块 里的 a
**总结** **总结**
var 定义的全部变量有时候会污染整个 js 的作用域 var 定义的全部变量有时候会污染整个 js 的作用域我们在如今的实战中基本都是用的 ES6 语法所以请**尽量避免**使用 var 定义变量
### let定义局部变量 ### 2let定义局部变量
举例 1 举例 1
@ -63,9 +65,9 @@ var a = 2;
console.log(a); // 打印结果2 console.log(a); // 打印结果2
``` ```
通过上面两个例子可以看出 let 声明的变量只在局部块级作用域内起作用 通过上面两个例子可以看出** let 声明的变量只在局部块级作用域内起作用**
let 防止数据污染我们来看下面这个 **for 循环**例子经典 let 可以防止数据污染我们来看下面这个 **for 循环**经典面试题
1 var 声明变量 1 var 声明变量
@ -77,7 +79,7 @@ for (var i = 0; i < 10; i++) {
console.log('循环体外:' + i); console.log('循环体外:' + i);
``` ```
上方代码可以正常打印结果且最后一行的打印结果是 10说明循环体外定义的变量 i是在全局起作用的 上方代码可以正常打印结果且最后一行的打印结果是 10说明**循环体外**定义的变量 i是在全局起作用的
2 let 声明变量 2 let 声明变量
@ -95,7 +97,7 @@ console.log('循环体外:' + i);
为了进一步说明 let 不会带来污染需要说明的是当我们定义了`let a = 1`如果我们在同一个作用域内继续定义`let a = 2`是会报错的 为了进一步说明 let 不会带来污染需要说明的是当我们定义了`let a = 1`如果我们在同一个作用域内继续定义`let a = 2`是会报错的
### const定义常量 ### 3const定义常量
在程序开发中有些变量是希望声明后在业务层就不再发生变化此时可以用 const 来定义 在程序开发中有些变量是希望声明后在业务层就不再发生变化此时可以用 const 来定义
@ -105,21 +107,31 @@ console.log('循环体外:' + i);
const name = 'smyhvae'; //定义常量 const name = 'smyhvae'; //定义常量
``` ```
let/const const 声明的变量只在局部块级作用域内起作用而且 const 声明常量时必须赋值否则报错
### let const 作用重要 ### let const 特点重要
let const 的作用如下 - 不存在变量提升
- 禁止重复声明 - 禁止重复声明
- 支持块级作用域 - 支持块级作用域
- 控制修改
相反 `var`声明的变量可以重复声明**没有块级作用域**不能限制 相反 `var`声明的变量存在变量提升可以重复声明**没有块级作用域**
### for 循环举例经典案例
### var/let/const
- 全局作用域中定义的变量可以在函数中使用
- 函数中声明的变量只能在函数及其子函数中使用外部无法使用
### 总结
关于 letconstvar 更详细的介绍和区别可以看本项目的另一篇文章JavaScript 进阶/varletconst 的区别.md
## for 循环举例经典案例
**代码 1**我们先来看看如下代码 var 定义变量 i **代码 1**我们先来看看如下代码 var 定义变量 i
@ -220,6 +232,8 @@ i++; // 到这里i 的值已经是4了。因此当我们点击按钮时
上面这个运行结果才是我们预期的效果我们用 let 定义变量 i在循环的过程中每执行一次循环体就会诞生一个新的 i循环体执行 4 就会有四个 i 上面这个运行结果才是我们预期的效果我们用 let 定义变量 i在循环的过程中每执行一次循环体就会诞生一个新的 i循环体执行 4 就会有四个 i
## 块级作用域
## 暂时性死区 DTC ## 暂时性死区 DTC
ES6 规定使用 let/const 使使 ES6 规定使用 let/const 使使
@ -241,22 +255,6 @@ function foo() {
foo(); // 执行函数后控制台报错Uncaught ReferenceError: Cannot access 'name' before initialization foo(); // 执行函数后控制台报错Uncaught ReferenceError: Cannot access 'name' before initialization
``` ```
## 块级作用域
### var/let/const
var/let/const
1全局作用域中定义的变量可以在函数中使用
2函数中声明的变量只能在函数及其子函数中使用外部无法使用
至于 var/let/const
### var/let/const qubie
使用 var 声明的变量存在于最近的函数或全局作用域中**没有块级作用域的机制**没有块作用域很容易造成全局污染
## 参考链接 ## 参考链接
- [阮一峰 | ECMAScript 6 入门](http://es6.ruanyifeng.com/) - [阮一峰 | ECMAScript 6 入门](http://es6.ruanyifeng.com/)

View File

@ -66,7 +66,7 @@ console.log(c); // 报错Uncaught ReferenceError: c is not defined ==> 找不
报错是因为找不到 b c 这两个变量 报错是因为找不到 b c 这两个变量
### 4同一作用域下var 可以声明同名变量let const 不能声明同名变量 ### 4同一作用域下var 可以重复声明变量let const 不能重复声明变量
```js ```js
var a = '我是a'; var a = '我是a';
@ -86,6 +86,9 @@ const c = 'qianguyihao';
console.log(c); //报错Uncaught SyntaxError: Identifier 'c' has already been declared ==> 变量 c 已经被声明了 console.log(c); //报错Uncaught SyntaxError: Identifier 'c' has already been declared ==> 变量 c 已经被声明了
``` ```
备注通过第3第4点可以看出使用 let/const
### 5let const 的暂时性死区DTC ### 5let const 的暂时性死区DTC