ES6(一) let和const

  随着前端技术的逐渐强大,JavaScript从一个简单的脚本语言,迅速的伸出了它的触角,一直延伸到了后端。于是原有的ES3/ES5的语法与规范已经不能适应它的发展了,因此w3c就在2015年推出了js新的语法规范,也就是ECMAScript6,也叫ECMAScript2015,一般简称为ES6。

 一、let

  在ES3和ES5中,JS只有全局作用域和函数作用域,它是没有块级作用域的。任何时候声明变量都是使用var关键字。

  在ES6支持了块级作用域的概念,支撑这个块级作用域的新语法就是新增了let关键字,用来取代var,作为声明具有块级作用域的变量的关键字。

  let本身是否简单,只有2个需要注意的点。

  1.第一个需要注意的点,直接上例子:  

1 function test(){
2     for (let i = 0; i < 5; i++) {
3        console.log(i);
4     }
5     console.log(i);//报错
6 }
7 test();

  这个demo的输出结果如下面的截图

  。  

  本身例子很简单,循环输出0-4,并且在for循环结束后再次访问循环变量i,由于i是用let声明的,这个i就是个块级作用域。第5行代码试图访问i,但是已经超出了i的作用域范围。所以报错。

  但是这里有个疑问,为什么第5行是报错,而不是undefined?

  原因如下:

  1.如果js代码中使用了ES6语法规范,那么该执行环境就是默认的开启了“严格模式”

  2.所谓严格模式,在ES5的时代,就是在你的js代码中,写入了‘use strict’这样的字符串。‘use strict’可以理解为一个指令,它告诉浏览器,我之后的js代码,都要以严格模式的规范来解析。而在ES6中,不需要声明这个指令,就默认使用了严格模式

  3.在严格模式中,如果变量没有声明就拿来使用,就会报”引用异常“的错误:ReferenceError。而不会是undefined。

  2.第2个需要注意的点,直接看例子  

function test(){
    let num = 10;
    let num = 20;
}
test();

  这个例子的执行结果如下图:

  

  这里报的错是,num重复定义了。

  如果使用var声明变量,是不会报错的,后声明的num会把之前声明的num给覆盖了。

  但是使用let就不行了,重复定义变量会报错的。

  以上就是let与var的区别。非常简单,其实习惯了强类型语言的朋友,压根就不会觉得有什么奇怪的,早该如此。。。。

  二、const

  const也是ES6新增的关键字,它是用来声明常量的。与其他语言中的常量一样,const声明的常量,只能在声明时赋值,并且不能重复赋值。它有如下几个需要注意的点。

  1.只能在声明时赋值,所以下面的例子会报错的。  

function test(){   
    const stu;   
    stu = '张明';   
    console.log(stu);
}

  报错,在使用const声明常量的时候,没有赋值。

  2.const声明的常量也是一个具有块级作用域的。不能跨作用域访问。

function test(){
    {
        const stu = '张明';
        console.log(stu); //输出 '张明'
    }
    console.log(stu); //报错,stu超出了作用域
}

  这个例子执行时会报stu未声明的错误,原因就是stu是在一对{ }中声明的,于是它的作用域仅限于这个花括号之内。在外部访问stu,虽然它贵为常量,也无法跨作用域访问。

  3.值类型的常量不能二次赋值,但是引用类型的对象,有特例。比如下面的例子。

 1 function test(){
 2     const stu = '老张';
 3     // stu = '老王'; //报错
 4     console.log(stu);
 5     const student = {age: 18};
 6     student.age = 20; //不会报错
 7     student.name = '小赵'; //不会报错
 8     student = { id: '1800123', age: 18}; //报错
 9     console.log(student.age);
10 }

  分析:

  1.在第2行声明的stu是一个string类型常量,它是个值类型的,所以如果执行第3行代码,就会报错。

  2.在第5行,声明的student是一个对象,它是引用类型的。所以执行第6、7行代码都不会报错。

  3.但是如果执行第8行代码,就会报错。

  原因是student是1个对象,它是应用类型的,它本身只存了1个地址作为引用,const要求不能二次赋值,第6行和第7行,虽然改变了student所指向的对象的属性,但是并没有改变student作为引用类型变量它本身所存储的那个地址的指向。换句话说,并没有改变student这个常量存储的值。所以第6、7行不会报错。

  反而是第8行,又拿了1个新的字面量对象给student赋值,这就改变了student引用的地址,也就改变了student存储值,所以会报错。

  这个一定要注意。

猜你喜欢

转载自www.cnblogs.com/ldq678/p/10325378.html