ES6的新特性之let和const

偏爱自由_
392 阅读3分钟

ES5和ES6之间的区别

比较项ES5ES6
定义ES5是ECMAScript（由ECMA International定义的商标脚本语言规范）的第五版。ES6是ECMAScript（ECMA International定义的商标脚本语言规范）的第六版。
发布它于2009年推出。它于2015年推出。
数据类型ES5支持原始数据类型，包括字符串，数字，布尔值，空值和未定义（undefined）。在ES6中，对JavaScript数据类型进行了一些补充。 它引入了一种新的原始数据类型symbol以支持唯一值。
定义变量在ES5中，只能使用var关键字定义变量。在ES6中，有两种定义let和const变量的新方法。
性能由于ES5早于ES6，因此某些功能不存在，因此其性能比ES6低。由于具有新功能和速记存储实现，因此ES6具有比ES5更高的性能。
支持许多社区都支持它。它也有很多社区支持，但是比ES5小。
对象操纵ES5比ES6耗时。由于具有解构和速度运算符，因此可以在ES6中更平稳地处理对象操纵。
箭头函数在ES5中，function和return关键字均用于定义函数。箭头功能是ES6中引入的新功能，通过它不需要function关键字来定义函数。
循环在ES5中，使用了for循环来遍历元素。ES6引入了for?of循环的概念，以对可迭代对象的值执行迭代。

两种定义let和const变量的新方法

let 命令

不存在变量提升

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

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

暂时性死区

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的“死区”。

不允许重复声明

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

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

块级作用域

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

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

const 命令

const声明一个只读的常量。一旦声明，常量的值（内存地址）就不能改变。注：可以修改对象和数组的值

const PI = 3.1415;
PI // 3.1415

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

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

const a = [];
a.push('Hello'); // 可执行
a = ['Dave'];    // 报错
avatar
文章
阅读
粉丝