Vue进阶（二十一）：ES6 知识储备_声明之前已使用的块范围变量“__vls_8”(1)

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

(function () {
var tmp = …;
…
}());
// 块级作用域写法
{
let tmp = …;
…
}

#### 2.2 块级作用域用法


考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

// 函数声明语句
{
let a = ‘secret’;
function f() {
return a;
}
}
// 函数表达式
{
let a = ‘secret’;
let f = function () {
return a;
};
}

`ES6` 的块级作用域允许声明函数的规则，只在使用大括号的情况下成立，如果没有使用大括号，就会报错。


### 三、do 表达式


本质上，块级作用域是一个语句，将多个操作封装在一起，没有返回值。使得块级作用域可以变为表达式，也就是说可以返回值，办法就是在块级作用域之前加上do，使它变为do表达式，然后就会返回内部最后执行的表达式的值。

let x = do {
let t = f();
t * t + 1;
};

### 四、const 命令


`const`声明一个只读的常量。一旦声明，常量的值就不能改变。`const`一旦声明变量，就必须立即初始化，不能留到以后赋值。


const作用域与let命令相同：只在声明所在的块级作用域内有效。


`const`命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。  
 const声明的常量，也与let一样不可重复声明。


### 五、箭头函数


1. 省略关键字`function`，花括号‘{}’用‘=>’代替了。这种写法更简洁了。
2. 优点，就是函数体内的`this`的指向始终是指向定义它所在的对象，而不会指向调用它的对象，我们知道`es5`中的函数是谁执行它，它就指向谁。


### 六、Promise 对象


拓展阅读：


* 《[Vue进阶（四十五）：精解ES6 Promise 用法](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》


### 七、模块语法


1. `ES6` 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 `CommonJS` 和 `AMD` 规范，成为浏览器和服务器通用的模块解决方案。


`ES6` 模块不是对象，而是通过`export`命令显式指定输出的代码，再通过`import`命令输入。

// ES6模块
import { stat, exists, readFile } from ‘fs’;

上面代码的实质是从fs模块加载3个方法，其他方法不加载。这种加载称为**编译时加载**或者**静态加载**，即 `ES6` 可以在编译时就完成模块加载，效率要比 `CommonJS` 模块的加载方式高。


### 八、严格模式


* 变量必须声明后再使用;
* 函数的参数不能有同名属性，否则报错;
* 不能使用`with`语句;
* 不能对只读属性赋值，否则报错;
* 不能使用前缀0表示八进制数，否则报错;
* 不能删除不可删除的属性，否则报错;
* 不能删除变量`delete prop`，会报错，只能删除属性`delete global[prop]`;
* `eval`不会在它的外层作用域引入变量;
* `eval`和`arguments`不能被重新赋值;
* `arguments`不会自动反映函数参数的变化;
* 不能使用`arguments.callee`;
* 不能使用`arguments.caller`;
* 禁止`this`指向全局对象;
* 不能使用`fn.caller`和`fn.arguments`获取函数调用的堆栈;
* 增加了保留字（比如`protected`、`static`和`interface`）;
* 尤其需要注意`this`的限制。`ES6` 模块之中，顶层的`this`指向`undefined`，即不应该在顶层代码使用`this`。


### 九、export 命令


模块功能主要由两个命令构成：`export`和`import`。`export`命令用于规定模块的对外接口，`import`命令用于输入其他模块提供的功能。


一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用`export`关键字输出该变量。下面是一个 `JS` 文件，里面使用`export`命令输出变量。

// profile.js
var firstName = ‘Michael’;
var lastName = ‘Jackson’;
var year = 1958;
export {firstName, lastName, year};

`export`命令除了输出变量，还可以输出函数或类（`class`）。下面代码对外输出一个函数multiply。

export function multiply(x, y) {
return x * y;
};

`export`输出的变量就是本来的名字，但是可以使用`as`关键字重命名。

function v1() { … }
function v2() { … }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};

上面代码使用`as`关键字，重命名了函数v1和v2的对外接口。重命名后，v2可以用不同的名字输出两次。需要特别注意的是，`export`命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

上面三种写法都是正确的，规定了对外的接口m。其他脚本可以通过这个接口，取到值1。它们的实质是，在接口名与模块内部变量之间，建立了一一对应的关系。


`function`和`class`的输出，也必须遵守这样的写法。


另外，`export`语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。