var、let和const区别(ES6)

let和const命令

ES6增加了两种新的声明方式，分别是let和const

 在学习let和const之前，我们先了解一下var

var 关键字介绍

特点：

       ①无块级作用域

if(true){
  var ql="My name is HQL";
}
console.log(ql);//My name is HQL

            ②存在变量提升

console.log(a);//undefined
var a=20;


//解析
var a;
console.log(a);//undefined
a=20;

         ③会成为window属性

var a = 2077;
var fn = function () {
  console.log(2077);
}
console.log(window.a);//2077
window.fn();//2077

 let关键字介绍

特点：

     ①只在代码块有效

//使用let声明的变量，只有在其所在的代码块中有效、，即只在块级作用域之内有效
if(true){
  let title="航海王"
}
console.log(title);
//(报错) Uncaught ReferenceError: title is not defined

分析：使用let声明的变量只在其所在代码块之内有效，在代码块之外访问会报错

     

  let title = '火影忍者';
    if (true) {
      let title = '航海王';
      console.log(title);
    }
    console.log(title);

//控制台输出
//航海王
//火影忍者



分析：  如果两个变量都是用var声明，最终console.log()都会输出"航海王"。
从这个例子可以看出，使用let来代替var，可以避免这种内层变量覆盖外层变量的不合理情况。

     ②同一代码块中，不允许重复声明

//使用let声明的变量，在其所在的代码块中是不允许重复声明的
 if(true){
    let title='火影忍者';
    let title='航海王';
    console.log(title);
//(报错)Uncaught SyntaxError: Identifier 'title' has already been declared
  }




分析：虽然在同一代码块中，变量名不允许被let重复声明，但是这个变量却可以被重新赋值。
注意：声明和赋值是两回事

  if (true) {
      let title = '火影忍者';
      title = '航海王';
      console.log(title);//航海王
    }

     ③不存在变量提升

//用let声明的变量不像用var声明的变量，会出现变量提升的现象
//用let声明的变量，只能在声明后使用，如果在声明之前使用，就会报错。
 案例一
console.log(title);//(报错)Uncaught ReferenceError: Cannot access 'title' before initialization
 let title='火影忍者';
案例二
 console.log(fn);//(报错)Uncaught ReferenceError: Cannot access 'fn' before initialization
    let fn = function () {
      console.log('火影忍者');
    }

     ④不会成为window属性

//在ES6之前，在全局作用域中，使用var声明的变量会成为window对象的属性。
//在ES6的全局作用域中，使用let声明的变量不会成为window对象的属性。



//ES5中的var
var a = 2077;
var fn = function () {
  console.log(2077);
}
console.log(window.a);//2077
window.fn();//2077



//ES6中的let
 let a = 2077;
    let fn = function () {
      console.log(2077);
    }
    console.log(window.a);//undefined
    window.fn();//(报错) Uncaught TypeError: window.fn is not a function

 const关键字介绍

const和let非常相似，两者有着4个共同点：①只在代码块之内有效②在同一代码块中，不允许重复声明③不存在提升变量④不会成为window的属性

const和let唯一的不同点：const用于定义一个常量，而常量是不允许重新赋值。

const PI = 3.145926;
    PI = 3.14;
    console.log(PI);//(报错)Uncaught TypeError: Assignment to constant variable.

我们所说的使用const声明的变量不能被修改，严格意义上说是保存变量值的内存地址不能被修改。

如果该值属于”基本类型“，那么声明后是不允许修改该值的。

常用的基本数据类型包括undefined、null、number、boolean、string；

如果该值属于”引用类型“，虽然我们不能修改该值，但是可以修改它属性的值。

引用数据类型也就是对象类型，比如：Object、array、function、data等；

 const person={
      name:'HQL',
      age:24
    }
    person.age=21;
    console.log(person);//{name: 'HQL', age: 21}

person对象的属性值被修改了，这是因为person对象是引用类型的对象，person保存的仅仅是对象的指针。这就意味着，const仅仅保证指针不会发生改变，修改对象的属性值不会改变对象的指针，所以是被允许的。

//让person指向一个新对象，结果会怎么样？？
 const person = {
      name: 'HQL',
      age: 24
    }
    person = {
      name: 'LZ',
      age: 20
    }
    console.log(person);//(报错)Uncaught TypeError: Assignment to constant variable.

分析：使用const声明一个对象，那么修改对象属性的值是被允许的，但是修改对象的值是不被允许的。


//用const声明数组
  const arr = ['red','green', 'blue'];
    arr[0] = 'pink';
    console.log(arr);//['pink', 'green', 'blue']

分析：数组本身上也是一个对象

 暂时性死区

{
   console.log(a);
   let a=30;
 }

//(报错)Uncaught ReferenceError: Cannot access 'a' before initializatio