美文网首页让前端飞
ES6特性学习(一)

ES6特性学习(一)

作者: toyfish | 来源:发表于2019-01-16 13:52 被阅读18次

本篇对ES6letconst进行了学习和整理,以及与var做一下简单的对比。


let命令

letES6中新增的命令,let的用法与var基本相同,两者的区别在于let修饰的变量作用域只存在于最小块中,也就是最内层的{}中。

基本用法

var a = 0;
function foo(){
    let a = 1;
    console.log(a); //输出1
}

不允许重复声明

使用let修饰的变量是不允许在同一块内重复生命,如果重复声明浏览器会报错。

function foo(){
    let a = 0;
    let a = 1;//报错
}

不存在变量提升

ES5中我们使用var来进行变量的声明,当我们在变量声明前使用该变量时会输出undefind。现在在ES6中使用let声明变量的时候如果在变量声明前使用该变量浏览器则会抛出异常ReferenceError
这是因为使用var声明的变量会发生变量提升,即脚本开始运行时,变量已经存在了,但是没有值,所以会输出undefined,而let对这个问题则是有修复的意思。

function foo(){
    console.log(a);//输出undefind
    var a = 0;
    
    console.log(b);//报错
    let b = 0;
}

暂时性死区

这一条应该与变量提升这一条一起理解,暂时性死区的意思是指使用let修饰的变量会与当前作用域块做绑定,绑定后的变量不会受外部的影响。
当一个作用域块中有let声明的变量时,该变量会和该块做绑定,同时let又不具有变量提升的特性,所以从块开始的地方到该变量声明的地方会形成以个死区,在这个区域中使用该变量(也就是提前使用)都会报错,即使是使用typeof也会报错。

基本演示

if (true) {
  // 死区开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // 死区结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

更多的演示代码参考这里>>阮一峰ES6入门-let-暂时性死区

const命令

const命令在使用和特性上与let基本一致,最大的区别在于使用const声明的变量是一个常量值,也就是声明后不可更改的。

const PI = 3.1415;
PI // 3.1415
PI = 3;
//报错 PI是只读的

const的本质

本质上const的只读是指,const所指向的地址不能变,也就是说如果变量是一个对象是给这个对象赋值是没问题的,但是把对象指向其他地址是会抛出异常的。

const foo = {};
// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only

C++中的const基本是一样的,如果有C++的使用经验,拿来就用好了

参考

相关文章

网友评论

    本文标题:ES6特性学习(一)

    本文链接:https://www.haomeiwen.com/subject/tzhmdqtx.html