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. 安装

    1
    2
    yarn add @babel/core @babel/cli @babel/preset-env -D
    yarn add @babel/polyfill

    通过以上命令安装后会导致只有当前项目才可以使用babel工具，因此为了所有项目都可以使用babel工具，可以进行全局安装。

    1
    2
    yarn global add @babel/core @babel/cli @babel/preset-env
    yarn global add @babel/polyfill

  2. 创建配置文件

    也就是在项目根目录创建package.json文件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {
      "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存在块级作用域，例如

1
2
3
4
5
6
7
8
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. 都可以在全局声明变量

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /**
     * let与var关键字的区别 - 都是定义变量
     * let提供了块级作用域
     *  * 也可以在全局作用域和函数作用域定义变量
     * var提供了全局作用域和函数作用域
     */

    var m = 100;
    let n = 1000;

    console.log(m); // 100
    console.log(n); // 1000

  2. let声明没有变量提升

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

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

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

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

  3. 不允许重复声明

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

    1
    2
    3
    4
    5
    var v = 100;

    var v = 1000;

    console.log(v); // 1000

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

    1
    2
    3
    4
    5
    let v = 100;

    let v = 1000;

    console.log(v);

    image-20201025101305372

  4. 与函数的关系

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

    1
    2
    3
    4
    5
    6
    let v = 100;
    function fn() {
      // 全局作用域
      console.log(v); 
    }
    fn(); // 100

    但如果在块级作用域中声明了与全局作用域变量同名的变量，那么会导致在块级作用域中无法使用全局作用域。无论在块级作用域中的哪里声明。

    1
    2
    3
    4
    5
    6
    7
    8
    let v = 100;
    function fn() {
      // 全局作用域
      console.log(v); // 由于在此作用域中还存在一个v的声明,因此v无法使用全局变量的v
      let v = 1000;
      console.log(v);
    }
    fn();

    image-20201025102817613

  5. 函数参数

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

    image-20201025103212886

块级作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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关键字声明时，实际上声明的是全局变量。

    1
    2
    3
    4
    for (var i = 0; i < 10; i++) {
      console.log(i);
    }
    console.log("跳出循环后: ", i); // 输出 10

    使用let关键字声明则不会导致这种情况。

    1
    2
    3
    4
    for (let i = 0; i < 10; i++) {
      console.log(i);
    }
    console.log("跳出循环后: ", i); // i is not defined

  1. 一个闭包案例

    1
    2
    3
    4
    5
    6
    7
    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. 直接定义函数等于定于全局作用域函数

    1
    2
    3
    4
    5
    6
    if (true) {
      function fn() {
        console.log("块级作用域函数");
      }
    }
    fn(); // 块级作用域函数

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

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

    1
    2
    3
    4
    5
    6
    if (true) {
      let t = function () {
        console.log("函数t");
      };
    }
    t(); // 报错 t is not defined