一、初识ES6

张小阳_
135 阅读13分钟

ES6简介

ES6简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

image.png

image.png

image.png

API：

API（应用程序编程接口）是一些预先定义的函数，程序员可以直接拿过来调用，而不用访问源码，或理解内部工作机制的细节。比如前端所说的API，通常指的是JavaScript封装的一些功能函数，比如：数组的push()方法（用于数组结尾添加新元素）、数组的sort()方法（用于数组元素排序）、以及Math对象的random方法（用于获取随机数）等；也可以是程序员自己封装的函数，比如：funciton add(a , b){return a + b ;} 就是一个简单的求和API。

所以，API其实就是一些功能函数，有原生的也有程序员自己封装的。

比如一些方法或对象，例如.toString() .pop() .shift() 都可以看作是API

API是一些预定义的接口，例如：数组的所有方法，对象的所有方法等。

简单理解：类型固有的方法可以认为是API 。

历史版本

image.png 其实我们使用最多的是ES3中的语法，ES3的兼容性是最好的

image.png 命名方式

image.png

命名方式上，ES6对应的是ES2015；

最新是ES2022，不过ES2015以及以上的都称为ES6。

image.png

ES与JavaScript的关系

image.png ECMAScript 和 JavaScript 的关系

一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？

要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。

ES6兼容性

image.png

let 和 const

let 和 const是什么

  • var、let声明的就是变量，变量一旦初始化之后，还可以重新赋值
  • const声明的就是常量，常量一旦初始化，就不能重新赋值了，否则就会报错
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let age = 18;
        const sex = 'male';

        age = 28;
        sex = 'female';
    </script>
</body>

</html>

这里修改了常量(const)的值，所以报错了 image.png

练习题

image.png

const

const就是为了那些一旦初始化就不希望重新赋值的情况设计的

使用const注意事项

  • 使用const声明常量，一旦声明，就必须立即初始化，不能留到以后赋值
  • const声明的常量，允许在不重新赋值的情况下修改它的值（针对引用数据类型）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const obj = {
            name: 'zhangSan',
        };

        console.log(obj.name); // 修改前

        obj.name = 'liSi';

        console.log(obj.name);  // 修改后
    </script>
</body>

</html>
image.png

解析：

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const foo;
// SyntaxError: Missing initializer in const declaration

上面代码表示，对于const来说，只声明不赋值，就会报错。

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

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

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

if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}

上面代码在常量MAX声明之前就调用，结果报错。

const声明的常量，也与let一样不可重复声明。

var message = "Hello!";
let age = 25;

// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

本质

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。

下面是另一个例子。

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

上面代码中，常量a是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给a，就会报错。

const、let如何选择

实战总结经验：

当不知道用let还是const的时候，我们可以用const，即使需要改变的时候，我们也可以通过报错去寻找，当时用const定义的变量，将它再改回let

练习题

image.png

image.png

let、const与var的区别(1)

image.png

1.重复声明

  • 已经存在的变量或常量，又声明了一遍，var允许重复声明，let、const 不允许

  • 无论是使用var还是let或是const 只要声明过就不能用let或const再次声明了

var a = 1; 
let a = 2;
image.png

let不允许在相同作用域内，重复声明同一个变量。

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

因此，不能在函数内部重新声明参数。

function func(arg) {
  let arg;
}
func() // 报错

function func(arg) {
  {
    let arg;
  }
}
func() // 不报错

再看如下demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function fun(a) {
            let a = 1;
        }
        fun();  // 报错 标识符“a”已声明
    </script>
</body>

</html>

image.png 因为function func(a)的形参用了a，而函数中又重新使用了a做变量名，所以报错。报错的意思是标识符'a'已经被声明。这里要记一下，如用ES6的声明方法，变量名与参数名都不可以相同。

2.变量提升

  • var 会提升变量的声明到当前作用域的顶部
  • let、const不存在变量提升

养成良好的编程习惯，对于所有的变量或常量，做到先声明，后使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        console.log(a);
        let a = 1;
    </script>
</body>

</html>

image.png var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。

3.暂时性死区

  • 只要作用域内存在let、const，它们所声明的变量或常量就自动“绑定”这个区域，不再受到外部作用域的影响
  • let、const存在暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

上面代码中，在let命令声明变量tmp之前，都属于变量tmp的“死区”。

“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。

typeof x; // ReferenceError
let x;

上面代码中，变量x使用let命令声明，所以在声明之前，都属于x的“死区”，只要用到该变量就会报错。因此，typeof运行时就会抛出一个ReferenceError。

作为比较，如果一个变量根本没有被声明，使用typeof反而不会报错。

typeof undeclared_variable // "undefined"

上面代码中，undeclared_variable是一个不存在的变量名，结果返回“undefined”。所以，在没有let之前，typeof运算符是百分之百安全的，永远不会报错。现在这一点不成立了。这样的设计是为了让大家养成良好的编程习惯，变量一定要在声明之后使用，否则就报错。

有些“死区”比较隐蔽，不太容易发现。

function bar(x = y, y = 2) {
  return [x, y];
}

bar(); // 报错

上面代码中，调用bar函数之所以报错（某些实现可能不报错），是因为参数x默认值等于另一个参数y，而此时y还没有声明，属于“死区”。如果y的默认值是x，就不会报错，因为此时x已经声明了。

function bar(x = 2, y = x) {
  return [x, y];
}
bar(); // [2, 2]

另外，下面的代码也会报错，与var的行为不同。

// 不报错
var x = x;

// 报错
let x = x;
// ReferenceError: x is not defined

上面代码报错，也是因为暂时性死区。使用let声明变量时，只要变量在还没有声明完成前使用，就会报错。上面这行就属于这个情况，在变量x的声明语句还没有执行完成前，就去取x的值，导致报错”x 未定义“。

ES6 规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在 ES5 是很常见的，现在有了这种规定，避免此类错误就很容易了。

总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

demo示例

var a = 1; 
function fun() { 
    console.log(a); 
    let a = 2; 
}; 
fun();

image.png

4.window对象的属性和方法

  • 全局作用域中，var声明的变量，通过function声明的函数，会自动变成window对象的属性或方法，let、const不会

image.png

练习题

image.png

let、const与var的区别(2)

  • var没有块级作用域
  • let/const有块级作用域

let实际上为 JavaScript 新增了块级作用域。

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

上面的函数有两个代码块，都声明了变量n，运行后输出 5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是 10。

ES6 允许块级作用域的任意嵌套。

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 报错
}}}};

上面代码使用了一个五层的块级作用域，每一层都是一个单独的作用域。第四层作用域无法读取第五层作用域的内部变量。

内层作用域可以定义外层作用域的同名变量。

{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};

块级作用域的出现，实际上使得获得广泛应用的匿名立即执行函数表达式（匿名 IIFE）不再必要了。

// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

再看如下demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        for (let i = 0; i < 3; i++) {
            console.log(i);
        }

        console.log(i);
    </script>
</body>

</html>
image.png

我们再来了解下作用域链

作用域链: 内层作用域->外层作用域 ->... ->全局作用域

作用域链查找：

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function fun() {
            for (let i = 0; i < 3; i++) {
                console.log(i);
            }
        };

        fun();

        console.log(i);
    </script>
</body>

</html>
image.png

解析： image.png

块级作用域有哪些

有以下块级作用域： image.png 而对象是不构成任何作用域的，作用域一共就有三个：块级、函数、全局

image.png

选择练习1

image.png

image.png

选择练习2

image.png

let、const应用

当我们想实现点击按钮时，输出被点击按钮的索引

普通方式的绑定是实现不了的

因为共享一个全局作用域i

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btns">0</button>
    <button class="btns">1</button>
    <button class="btns">2</button>

    <script>
        var btns = document.querySelectorAll('.btns');
        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                console.log(i);
            }, false);
        }
    </script>
</body>

</html>

动画.gif 解析：

image.png 在没有学习ES6前，我们可以通过闭包来实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btns">0</button>
    <button class="btns">1</button>
    <button class="btns">2</button>

    <script>
        var btns = document.querySelectorAll('.btns');

        for (var i = 0; i < btns.length; i++) {
            (function (index) {
                btns[index].addEventListener('click', function () {
                    console.log(index);
                }, false);
            }(i));
        }
    </script>
</body>

</html>

动画.gif 解析：

image.png 点击按钮时，事件函数内部并没有声明index，就会沿着作用域链向外查找，找到立即执行函数作用域中的index，也就是每次循环传入立即执行函数的i值，即：0， 1， 2

然而，通过ES6，我们可以很容易实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btns">0</button>
    <button class="btns">1</button>
    <button class="btns">2</button>

    <script>
        var btns = document.querySelectorAll('.btns');

        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                console.log(i);
            }, false);
        }
    </script>
</body>

</html>

动画.gif 解析：

image.png 当let和for循环一起使用时，for循环几次就会形成几个块级作用域，因为在每一次for循环中变量i都是重新声明。当执行第一次for循环时，会形成一个块级作用域，此时块级作用域中的变量i是不能在当前块级作用域之外访问的，当执行第二次for循环时，不能访问第一次for循环形成的块级作用域中的变量i，此时重新使用let声明变量i，形成新的作用域，依次类推。

练习

使用我们学过的知识，参考如下效果图，实现其效果。

5ae1ae310001f87502980172.gif

任务

1、给每个li绑定鼠标移入事件

2、在鼠标移入的时候，获取当前移入项的内容，然后赋值给一个变量。

3、改变鼠标移入项的内容，可参考效果图，实现是第几个。

4、在鼠标移入的时候，改变其字体颜色以及大小

5、鼠标移出时，恢复原来的状态以及内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jquery</li>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>ES6</li>
    </ul>

    <script>
        const lis = document.querySelectorAll('ul li');

        let temp = [];

        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('mouseover', function () {
                temp[i] = lis[i].innerHTML;
                lis[i].innerHTML += '我是第' + (i + 1) + '个';
                lis[i].style.color = 'red';
                lis[i].style.fontSize = 18 + 'px';
            }, false);
        }

        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('mouseleave', function () {
                lis[i].innerHTML = temp[i];
                lis[i].style.color = '#000';
                lis[i].style.fontSize = 16 + 'px';
            }, false);
        }
    </script>
</body>

</html>

动画.gif

理解分析

下面有一段代码，结合所学知识，动手画一画run函数中访问a时存在的作用域链。

代码图：

image.png image.png

最终结果输出0

总结

image.png

image.png

image.png

image.png

avatar
文章
阅读
粉丝