02 ES6 新引入的常量const和变量let详解

往期文章
01 ES6 use strict严格模式

const常量

const在es6里新增加的声明常量的指令，一旦定义后不能改变

1、定义在普通变量上

const a = 10;
a = 5; // Assignment to constant variable
2、只有代码块内可以访问
{
    const a = 10;
    console.log(a); // 10
 }
console.log(a); // a is not defined

3、定义在对象上
const静态对象的属性值可以改，但是对象obj不能被重新赋新对象。也就是不能修改obj对象的地址。

const obj = {id: 1, name: "Tom"};
obj.id = 2;
obj.name = "Sophia";
console.log(obj); // id: 2 name: "Sophia"
obj = {};    // invalid assignment to const `obj`

小测试
问题：求下面的user里面打印的id和name分别是多少？

function change(u) {
    u.name = "Frank";
    // 对象赋值
    u = {id: 2, name: "Sam"};
    u.name = "John";
}
var user = {id: 1, name: "Tom"};
change(user);
console.log(user);  // ?

答案：{id: 1, name: “Frank”}。因为赋值以后下面的u重新赋了新的对象地址，与上面的u已经引用完全不同的两个对象。

let块变量

let也是es6新增加的一个声明变量的指令。

1、先声明了变量方可使用

// 这里不允许在没有声明变量时就初始化
i = 10;  // i is not defined
// 之前已经使用var或者let声明过变量i，这里不允许再重复声明
let i = 100; 
**2、变量名不能重复**
// 这里只要使用let声明过变量，在此之前或者之后都不允许再重复声明
let i = 10;            
var i = 100; // Identifier 'i' has already been declared

3、变量只在代码块中起作用

{
    var a = 1;
    let b = 10;
 }
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined.
let比较适合用在for循环中

for (let i = 0; i < 10; i++) {
  // 输出 0-9
  console.log(i);
}
console.log(i); // i is not defined

4、变量的作用域

// 区分let和var所在不同的作用域

var i = 10;        // 被挂载到当前window这个DOM对象上
console.log(this === window); // true
console.log(i); // 10
console.log(this.i, window.i); // 10 10

// 与window无关，就在当前页面作用域内
let j = 100;
console.log(j); // 100 
console.log(this.j, window.j); // undefined undefined 

5、不存在变量提升

// var的情况 
// 在块中，使用var声明的变量没有作用域（等于全局）
var i = 10;
{
    var i = 100;
    console.log(i);     // 100
 }
// 产生这个作用域提升的问题根源在于
// i是挂载在window对象之上，且可以重复定义使用！
console.log(i);            // 100

// let的情况
// 在块中，只有let声明的变量才有自己的块作用域（不存在变量提升）
var i = 10;
{
    let i = 100;
    console.log(i);     // 100
}
console.log(i);            // 10

阅读原文，获取视频教程。

了解更多：