ES6 中 let, var, const 的区别

更新日期: 2017-06-17 阅读次数: 14798 分类: Javascript

const

首先测试一下 const

> const framework = "weex";
> framework = "react native";
TypeError: Assignment to constant variable.
> const weex = {"weexpack": "good", "weex-toolkit": "sucks"};
> weex["weex-toolkit"] = "good";
'good'
> weex = "react native";
TypeError: Assignment to constant variable.
> 

所以 ES6 中的 const 跟我们之前在其他语言中所认识的 const 有一定的区别

  • 在 ES6 中,const 只限制对应的变量不能够被再次赋值
  • 但是变量的属性可以被再次赋值

const 的实际使用场景:

定义一个传统的常量,自不必说,例如,定义一个统一的 URL 前缀。

主要说明一下,const 变量属性可以更改的场景, 以下代码来自 weex hacknews 的源码

const store = new Vuex.Store({
  actions,
  mutations,

  state: {
    activeType: null,
    items: {},
    users: {},
    counts: {
      top: 20,
      new: 20,
    },
    lists: {
      top: [],
      new: [],
    }
  }

})

export default store

将 store 定义为 const 的好处是,明确声明 store 在其他地方不允许被再次赋值。 但是其属性可以不断被修改。

let

The let statement declares a block scope local variable, optionally initializing it to a value. let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.

从 MDN 的介绍可知,let 与 var 最大的不同是,let 是用来定义 block local variable 的。

这样做,最大的好处是,避免了因疏忽

  • 重复定义了变量
  • 无意间修改了全局变量
> let year = 2017;
> year = 2018;
2018
> let year = 2025;
TypeError: Identifier 'year' has already been declared

MDN 上这个示例,很好的说明了 var 与 let 的区别

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

var

var 的问题是,过于灵活

> var day = 1;
> var day = 2;
> day
2

居然允许被重复定义。。。

那么问题了,ES6 中,是否还有使用 var 的必要。换句话说,var 在 ES6 中的使用场景是什么?

并没有使用 var 的必要。

参考

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式