背景知识点:
一、JavaScript和ECMAScript关系:
JavaScript=ECMAScript+BOM+DOM
ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展
二、版本时间
ECMAScript 5.1 -------->2011年
ECMAScript 6 -------->2015 年 6 月
三、作用域
ES5 中作用域有:全局作用域、函数作用域。没有块作用域的概念
ES6 中新增了块级作用域。块作用域由 { } 包括,if语句和 for语句里面的{ }也属于块作用域
四、区别
1、var和let
函数作用域 vs 块级作用域:
var 和 let 第一点不同就是 let 是块作用域,即其在整个大括号 {} 之内可见。
var:只有全局作用域和函数作用域概念,没有块级作用域的概念。但是会把{}内也假称为块作用域。
let:只有块级作用域的概念 ,由 { } 包括起来,if语句和for语句里面的{ }也属于块级作用域。
for(var i=0;i<4;i++){
console.log(i);//循环输出0,1,2,3
}
console.log(i);//4
for(let j=0;j<4;j++){
console.log(j);//循环输出0,1,2,3
}
console.log(j);//j is not defined
变量提升 vs 暂时性死区:
var 存在变量提升,在变量声明之前进行访问会直接提示undefined,而 let声明的变量却不存在变量提升一说,所以用 let 定义的变量一定要在声明后再使用,否则会报错
console.log(a);//undefined
var a=25;
console.log(b);
let b=24;//Cannot access 'b' before initialization
ES6明确规定,如果区块中存在let命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。所以在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
当前作用域顶部到该变量声明位置中间的部分,都是该let变量的死区,在死区中,禁止访问该变量。由此,我们给出结论,let声明的变量存在变量提升, 但是由于死区我们无法在声明前访问这个变量。
let a = 'outside';
if(true) {
console.log(a);//Uncaught ReferenceError: a is not defined
let a = "inside";
}
“暂时性死区”也意味着typeof不再是一个百分之百安全的操作,因为会使typeof报错。
{
typeof name;//ReferenceError
let name;
}
只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。在代码块中,使用let命令声明变量之前,该变量都是不可用的,这在语法上称为“暂时性死亡”。
let不允许重复声明变量
可以看出,var:变量可以多次声明,而let不允许在相同作用域内,重复声明同一个变量。
if (true) {
let a;
let a; // Uncaught SyntaxError: Identifier 'a' has already been declared
}
if(true){
var d;
var d; //不会报错
}
if (true) {
var c;
let c; // Uncaught SyntaxError: Identifier 'c' has already been declared
}
if (true) {
let d;
var d; // Uncaught SyntaxError: Identifier 'd' has already been declared
}
全局变量vs全局对象的属性
ES5中全局对象的属性与全局变量基本是等价的,但是也有区别,比如通过var声明的全局变量不能使用delete从 window/global ( global是针对与node环境)上删除,不过在变量的访问上基本等价。
ES6 中做了严格的区分,使用 var 和 function 声明的全局变量依旧作为全局对象的属性,使用 let, const 命令声明的全局变量不属于全局对象的属性。
var a = 10;
console.log(window.a); //10
console.log(this.a) //10
let b = 20;
console.log(window.b); // undefined
console.log(this.b) // undefined
2、var和const
除了let以外,ES6还引入了cons,const 和 let 的作用域是一致的,不同的是 const 变量一旦被赋值,就不能再改变了,但是这并不意味着使用 const 声明的变量本身不可变,只是说它不可被再次赋值了,而且const 声明的变量必须经过初始化。
const a = 1;
a = 2; // // Uncaught TypeError: Assignment to constant variable
const b; // Uncaught SyntaxError: Missing initializer in const declaration
注:复合类型const变量保存的是引用。因为复合类型(如数组和对象)的常量不指向数据,而是指向数据(heap)所在的地址(stack),所以通过 const 声明的复合类型只能保证其地址引用不变,但不能保证其数据不变。所以将一个对象声明为常量必须非常小心。
简单数据类型(数值,字符串,布尔值):值保存在变量指向的那个内存地址,因此等同于常量。
复合类型的数据(对象和数组):变量指向的是内存地址,保存的是一个指针,const只能保存这个指针地址是固定的,至于他指向的数据结构是不是可变的,就完全不能控制了。
/*不会报错,因为names1指向的地址不变,改变的只是内部数据*/
const names1 = [];
names1[0] = 1;
names1[1] = 2;
names1[2] = 3;
names1[3] = 10;
console.log(names1);
/*出错,因为变量names2指向的地址不能发生改变,应始终指向[]所在的地址,[1,4]与[6,7]不是同一个地址*/
const names2=[1,4];
names2=[6,7]; //报错
五、注意
1、const定义的常量不能修改只针对基本数据类型,对于对象而言是不成立的,因为对象是引用类型数据,声明的常量中保存的是对象的指针,也就是意味着const所谓的不能修改指的是保证指针不发生更改,而修改对象的属性,并不会改变对象的指针,所以是被允许的,也就是说const定义的引用类型只要指针不发生改变,其他的不论如何改变都是允许的。
备注:本文引自文章https://blog.csdn.net/unionz/article/details/80032048,https://www.cnblogs.com/jing-tian/p/11073168.html,侵删