1、ES5 vs ES6
ES 全称 ECMAScript。ECMAScript 是一种Js脚本语言的规范。
ES5是第五版ECMAScript,于 2009 年完成,规范在当前浏览器中都已实现。
ES6是第六版ECMAScript,于 2015 年完成。该标准已在大部分浏览器中实现。
ES6泛指下一代JS语言标准,包含ES2015 ~ ES2020等,ES2015默认等同ES6。ES5泛指上一代语言标准。ES2015可以理解为ES5和ES6的时间分界线。
2、Babel
Babel 是转码器。ES6实现在大部分的浏览器上,对于没有实现ES6的平台,则是可以使用 Babel 将 ES6 转换成 ES5 执行。
3、let && const
- let
let 和 var 较为类似,作用都是声明一个变量。
(1)作用域不同
let 是块作用域,作用域只在其代码块区域生效;var 定义的则是全局变量,跳出代码块依旧可以调用。
for(let i=0; i<1; i++) { var a = 12; let b = i; } a // 12 b // Uncaught ReferenceError: b is not defined
(2)变量提升
变量提升指的是变量声明被提升到代码的最顶端,也就是可以在声明变量之前对变量进行调用。
let 命令没有变量提升,如果在声明之前对改let定义的变量进行调用,则会报错。
var 命令则是可以随意调用,只要代码中进行了声明。
console.log(a); var a = 234; // undefined console.log(a); let a = 234; // Error: Cannot access 'a' before initialization
(3)暂时性死区
ES6规定在代码块中如果区块中存在 let
和 const
命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。
使用let
命令声明变量之前,该变量不可用.
// 死区 开始 hunter = 'abc'; // ReferenceError: Cannot access 'hunter' before initialization console.log(hunter); // ReferenceError: Cannot access 'hunter' before initialization let hunter; // 死区 结束 console.log(hunter); // undefined hunter = "QQQ"; console.log(hunter); // QQQ
(4)重复声明
let 命令与 var 不同,let 命令不允许重复声明
var a = 1; var a = 2; a; // 2 let a = 1; let a = 2; //SyntaxError: Identifier 'a' has already been declared
- const
const 用于声明常量。常量需要在声明的时候对其进行初始化,初始化赋值之后,常量的值将不再改变。
const hunterTest = 123; hunterTest; // 123 hunterTest = 666; // TypeError: Assignment to constant variable.
const 在我理解是保存变量指向的内存地址,针对Number、String、Boolean等简单的数据结构有着限定。但是针对于 复合型数据结构的变量 来说,变量保持不变,变量内部的值可以发生变化。
const aaa = 123; aaa = 345; // TypeError: Assignment to constant variable. const aaaa = { name: "YuHang" } aaaa["GG"] = 234 // {name: "YuHang", GG: 234} var bbb = { name: "Lisa"}; aaaa = bbb; // TypeError: Assignment to constant variable.