# ES6 的概念以及运行环境

ES6 即是一个历史名词,也是一个泛指。含义是 5.1 版以后的 JavaScript 的下一代标准。涵盖 ES2015、ES2016、ES2017 等

# WebStorm 配置

  1. 找到左上角的 file,选择 setting

    image-20201027194246710

  2. 选择 Languages & Frameworks 设置 ES6 选项。

    新版的 webstorm 已经默认是 es6 了

    image-20201027194314166

# Babel 编译器

其主要作用是用于将 ES2015 + 代码转化为向下兼容的 JavaScript 代码。

  1. 安装

    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
  2. 创建配置文件

    也就是在项目根目录创建 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 声明的变量无法在大括号外使用。

  1. 都可以在全局声明变量

    /**
     * let 与 var 关键字的区别 - 都是定义变量
     * let 提供了块级作用域
     *  * 也可以在全局作用域和函数作用域定义变量
     * var 提供了全局作用域和函数作用域
     */
    var m = 100;
    let n = 1000;
    console.log(m); // 100
    console.log(n); // 1000
  2. let 声明没有变量提升

    当使用 var 声明时,不会报错。

    console.log(m); // undefined
    var m = 10;

    当使用 let 声明时则直接报错。

    console.log(m);
    let m = 10;

  3. 不允许重复声明

    当使用 var 声明时,允许重复声明。

    var v = 100;
    var v = 1000;
    console.log(v); // 1000

    当使用 let 重复声明时则直接报错。

    let v = 100;
    let v = 1000;
    console.log(v);

    image-20201025101305372

  4. 与函数的关系

    块级作用域中如果没有声明与全局作用域变量同名的变量,那么在块级作用域中可以使用全局变量。

    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();

    image-20201025102817613

  5. 函数参数

    function fn(a) {
      // 此时参数 a 相当于使用 let 关键字变量进行定义
      let a = 1000;
      console.log(a);
    }
    fn(100);

    image-20201025103212886

# 块级作用域

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
  1. 一个闭包案例

    var arr = [];
    for (var i = 0; i < 10; i++) {
      arr[i] = function () {
        return i;
      };
    }
    console.log(arr[9]()); // 任意位置都为 10

    当使用 var 关键字声明变量时,会导致数组所有元素的结果均为 10.

    image-20201025110937510

    当使用 let 关键字即可避免这种情况

# 函数声明

在 ES5 中不可以在块级作用域和 try-catch 中声明函数。而这些在 ES6 中是允许的。

  1. 直接定义函数等于定于全局作用域函数

    if (true) {
      function fn() {
        console.log("块级作用域函数");
      }
    }
    fn(); // 块级作用域函数

    虽然定义在了块里边,但外部还是可以调用。

  2. 通过变量定义不是全局变量。

    if (true) {
      let t = function () {
        console.log("函数t");
      };
    }
    t(); // 报错 t is not defined
更新于

请我喝[茶]~( ̄▽ ̄)~*

Dreamy.TZK 微信支付

微信支付

Dreamy.TZK 支付宝

支付宝