# ES6 的概念以及运行环境
ES6 即是一个历史名词,也是一个泛指。含义是 5.1 版以后的 JavaScript 的下一代标准。涵盖 ES2015、ES2016、ES2017 等
# WebStorm 配置
找到左上角的 file,选择 setting
选择
Languages & Frameworks
设置 ES6 选项。新版的 webstorm 已经默认是 es6 了
# Babel 编译器
其主要作用是用于将 ES2015 + 代码转化为向下兼容的 JavaScript 代码。
安装
yarn add @babel/core @babel/cli @babel/preset-env -D
yarn add @babel/polyfill
通过以上命令安装后会导致只有当前项目才可以使用 babel 工具,因此为了所有项目都可以使用 babel 工具,可以进行全局安装。
yarn global add @babel/core @babel/cli @babel/preset-env
yarn global add @babel/polyfill
创建配置文件
也就是在项目根目录创建
package.json
文件。{
"presets": [
"latest"
],
"plugins": [],
"devDependencies": {
"babel-cli": "^6.0.0",
"babel-preset-latest": "^6.24.1"
},
"scripts": {
"build": "babel src -d lib"
}
}
配置完以上内容后,只需要在
scr
目录下进行开发,通过运行yarn run build
即可将 src 目录下的 js 转换并放到lib
目录下。
# let 关键字
let 存在块级作用域,例如
if (true) { | |
var a = 6; | |
let b = 7; | |
console.log(a); // 6 | |
console.log(b); // 7 | |
} | |
console.log(a); // 6 | |
console.log(b); // b is not defined |
在大括号内用 let
声明的变量无法在大括号外使用。
都可以在全局声明变量
/**
* let 与 var 关键字的区别 - 都是定义变量
* let 提供了块级作用域
* * 也可以在全局作用域和函数作用域定义变量
* var 提供了全局作用域和函数作用域
*/
var m = 100;
let n = 1000;
console.log(m); // 100
console.log(n); // 1000
let
声明没有变量提升当使用 var 声明时,不会报错。
console.log(m); // undefined
var m = 10;
当使用
let
声明时则直接报错。console.log(m);
let m = 10;
不允许重复声明
当使用 var 声明时,允许重复声明。
var v = 100;
var v = 1000;
console.log(v); // 1000
当使用
let
重复声明时则直接报错。let v = 100;
let v = 1000;
console.log(v);
与函数的关系
块级作用域中如果没有声明与全局作用域变量同名的变量,那么在块级作用域中可以使用全局变量。
let v = 100;
function fn() {
// 全局作用域
console.log(v);
}
fn(); // 100
但如果在块级作用域中声明了与全局作用域变量同名的变量,那么会导致在块级作用域中无法使用全局作用域。无论在块级作用域中的哪里声明。
let v = 100;
function fn() {
// 全局作用域
console.log(v); // 由于在此作用域中还存在一个 v 的声明,因此 v 无法使用全局变量的 v
let v = 1000;
console.log(v);
}
fn();
函数参数
function fn(a) {
// 此时参数 a 相当于使用 let 关键字变量进行定义
let a = 1000;
console.log(a);
}
fn(100);
# 块级作用域
let a = 100; // 全局变量 | |
(function () { | |
// 函数作用域 | |
let b = 1000; // 局部变量 | |
})(); | |
if (true) { | |
// 块级作用域 | |
let c = 10000; | |
} | |
// 此时只能找到 a, 而 b\c 会报错 | |
console.log(a); | |
console.log(b); | |
console.log(c); |
# 为什么需要块级作用域
局部变量可能覆盖全局变量
在循环体中用于计数的变量可能会暴露
当使用
var
关键字声明时,实际上声明的是全局变量。for (var i = 0; i < 10; i++) {
console.log(i);
}
console.log("跳出循环后: ", i); // 输出 10
使用
let
关键字声明则不会导致这种情况。for (let i = 0; i < 10; i++) {
console.log(i);
}
console.log("跳出循环后: ", i); // i is not defined
一个闭包案例
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = function () {
return i;
};
}
console.log(arr[9]()); // 任意位置都为 10
当使用
var
关键字声明变量时,会导致数组所有元素的结果均为 10.当使用
let
关键字即可避免这种情况
# 函数声明
在 ES5 中不可以在块级作用域和 try-catch
中声明函数。而这些在 ES6 中是允许的。
直接定义函数等于定于全局作用域函数
if (true) {
function fn() {
console.log("块级作用域函数");
}
}
fn(); // 块级作用域函数
虽然定义在了块里边,但外部还是可以调用。
通过变量定义不是全局变量。
if (true) {
let t = function () {
console.log("函数t");
};
}
t(); // 报错 t is not defined