ES6学习一

Posted 2020-08-23 yezi-dream

     一项新技术的出现肯定是为了解决一些问题，那么ES6的出现主要是解决了哪些问题？它的出现给我们带来了什么便利？当它没有出现的时候，某些问题怎么处理？ES6的方法和以前的方法比较又有什么不同呢？根据提出的这些问题，我开始了ES6学习之旅。

    ES6是在ES5的基础上对语法进行了修正以及添加了一些新的功能， 具体修正了哪些语法与添加了哪些新的功能，那就开始学习吧。

        let           

        ES6新增加了let命令，用于变量声明，与var的用法类似，不同的是所声明的变量只在let命令所在的代码块内有效。

{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

View Code

       以下代码会输出10，因为 i 是var声明的，在全局范围内都有效。所以每一次循环，新的 i 值都会覆盖旧值，导致最后输出的是最后一轮的 i 的值。如果 i 是let声明的，该变量仅在块级作用域内有效，最后输出的会是 6。

var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10

View Code

      我们都知道ES5中的变量会提升到顶部，所以可以先调用后声明，之所以可以是因为是var声明的，而let声明的变量不会提升，所以必须先声明才可以调用。还有，只要let命令存在于块级作用域内，它所声明的变量就"绑定"了这个区域，不再受外部的影响。例如如下代码：

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

View Code

   在块级作用域内使用let又声明变量tmp，那么这个变量就不会再受外部变量的影响，而let声明的变量无法提升，所以在没有声明前调用就会出错。

   总之，在代码块内，在没有使用let声明变量之前，该变量都是不可用的，这在ES6的语法上称为"暂时性死区"，"暂时性死区"的出现意味着typeof不再是一个百分之百安全的操作。

typeof x; // ReferenceError
let x;

typeof  y // "undefined"

View Code

     在没有声明x前，使用typeof检测x的类型就会报错，而检测一个没有被声明的变量反而不会报错。

     let还不允许在相同作用域内，重复声明同一个变量，如下情况都会报错：

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

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

View Code

     所以，在函数内重新声明变量也是会报错的：

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

View Code

     在不同的作用域里重新声明变量是可以的：

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

View Code

        const  

           const声明一个只读的常量，一旦声明，常量的值就不能改变，因为无法改变，所以声明变量的时候就需要立即初始化变量，不能留到以后赋值。const的作用域与let命令相同：只在声明所在的块级作用域内有效，而且变量也是无法提升的，也存在"暂时性死区"，只能声明后再调用，也不可以重复声明。

           对于复杂类型的变量，变量名不指向数据，而是指向数据所在的地址，const命令只是保证变量名指向的地址不变，并不保证该地址的数据不变，所以将一个对象声明为常量必须非常小心。

const foo = {};
foo.prop = 123;
foo.prop
// 123
foo = {}; // TypeError: "foo" is read-only

View Code

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

      如果想将对象冻结，可以使用Object.freeze方法，一旦冻结，就无法为其添加新的属性，严格模式下会报错

const foo = Object.freeze({});
//  常规模式时，下面一行不起作用；
//  严格模式时，该行会报错
foo.prop = 123;

View Code

     ES5 只有两种声明变量的方法：var命令和function命令。 ES6 除了添加let和const命令，还有另外两种声明变量的方法：import命令和class命令，以后再学习这两种声明变量的方法。