let const var的区别

前言

• 讲讲var let const 区别

let var const

• var 声明全局变量

  • 也叫顶层变量
  • 在浏览齐环境中指的是windows
  • 在node环境中指的是global

  // 浏览器环境下
  var a = 5
  console.log(window.a) // 5 
  

  • 变量提升

  console.log(b)  // undefined
  var b = 3
  
  // 此处代码等同于
  var b;
  console.log(b);
  b = 3
  

  • 变量覆盖
    • 重复声明全局变量会直接覆盖

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

  • 函数局部变量
    • 函数中var 声明的变量是局部的

  var a = 10;
  let fn = ()=> {
      var a = 20;
      console.log(a) 
  };
  fn() // 20
  console.log(a)  // 10
  

  • 函数全局变量
    • 函数中直接使用变量是全局的

  var a = 10;
  let fn = ()=> {
      a = 20
  }
  fn()
  console.log(a)  // 20
  

• let 声明局部变量

  • let是ES6新增语法
  • 用于声明局部变量 只在当前作用域有效

  {
  let a = 1
  console.log(a) // 1
  }
  console.log(a) // ReferenceError: a is not defined.
  

  • 不存在变量提升
    • 变量不会提升 直接打印会抛出错误
    • 使用let 声明变量之前 变量不可用 被称为暂时性死区

  console.log(a) // ReferenceError
  let a = 2
  

  • 不受外部影响的变量
    • 只要块级作用域存在let 变量不受外部影响

  var a = 10
  if(true) {
      a = 20; // ReferenceError
      let a
  }
  

  • 不能重复声明的变量
    • 同一作用域中 let不能重复声明同一变量

  let a = 10
  let a = 20 // Uncaught SyntaxError: Identifier 'a' has already been declared
  

  • 特殊情况
    • 这种情况下是不会报错的

  let a = 10 
  {
  let a = 20
  }
  

• const 声明常量

  • 声明一个只读常量
  • 一旦声明就不能更改
  • 初始化必须赋值 不能留到以后更改
  • const 实际保证的不是值不能改动 而是变量指向的内存地址所保存的数据不能改动

  const a = 10
  a = 30 // TypeError: Assignment to constant variable.
  
  const b // yntaxError: Missing initializer in const declaration
  

  • 重复声明变量

  let a = 30
  const a = 10 //报错
  

  • 复杂数据类型
    • 对于复杂类型数据，变量指向的内存数据，保存的是一个实际数据的指针
    • 只能保证指针固定，不能确保变量结构不变

  const foo = {}
  // 添加成功
  foo.prop = '123'
  foo.name = '番茄鸡蛋'
  // 报错
  foo = {}
  

let var const 区别

• 变量提升

  • var 存在变量提升 可以在声明前调用 值为undefined
  • let const 不存在变量提升 所声明的变量都要在声明后使用

      // var
      console.log(a)  // undefined
      var a = 10
  
      // let 
      console.log(b)  // Cannot access 'b' before initialization
      let b = 10
  
      // const
      console.log(c)  // Cannot access 'c' before initialization
      const c = 10
  

• 暂时性死区

  • var不存在暂时性死区
  • let const存在暂时性死区 只有到变量声明之后才可以获取和使用该变量

          // var
          console.log(a)  // undefined
          var a = 10
  
          // let
          console.log(b)  // Cannot access 'b' before initialization
          let b = 10
  
          // const
          console.log(c)  // Cannot access 'c' before initialization
          const c = 10
  

• 块级作用域

  • var不存在块级作用域
  • let const 存在块级作用域

• 重复声明

  • var可以重复声明变量
  • let const 不可重复声明

• 修改变量

  • var和let可以修改变量
  • const不能修改 值是只读的 并且初始要给值

日常使用

• 大部分用let 减少用var
• 对于不需更改的值 使用const

结言

• 今日份小知识get~