ECMAScript6的学习笔记之var,let,const

JasonCloud

最近在看es6,就记录一下笔记好供日后参考。

1.变量声明 var

众所周知在es6之前js的变量没有块级,只存在函数内外访问之分;
例如:

var a = 5;
if(true){
  var b = 3;
  console.log(a) // 5;
  var a = 's';
}
console.log(a) // s;
console.log(b) // 3;

从上面的代码可以知道var定义的a在if语句块中一样可以被访问和修改,同样在if语句块里面定义的变量b,在其快外面也一样可以被访问和修改;所以在es6之前用var定义声明一个变量时不会存在if,for这些语句块的作用域。
接下来看一下es6中新增的变量声明let;

2.变量声明let

let也是用来声明变量的,但是所声明的变量,只在let命令所在的代码块内有效。
例如:

if(true){
  let b = 3;
  console.log(b) // 3;
  var a = 's';
}
console.log(a) // s;
console.log(b) //报错 b is not defined;

也就是在if语句块中用let定义的变量b,出了这个区域块就没法获取到b了,这和var就不一样了;根据这一特性申明很适合在for循环块中申明变量;举一个es5的一个常见问题:

var arr = [];
for(var i =0;i<6;i++){
   arr[i] = function(){
    console.log(i)
}
}
arr[3]();//6

在上面的代码中i是被var定义的没有语句块的限制,当循环结束后他的值被累加到6了,当你再去调用函数去访问i时,不管是arr[3]还是arr[4]或者其他的得到的都会是6;因为它的值在循环结束后已经更新为6了;下面如果我们改成let声明i会怎样呢?

var arr = [];
for(let i =0;i<6;i++){
   arr[i] = function(){
    console.log(i)
}
}
arr[3]();//3

得到的结果是我们想要的.

3.变量常量声明const

(1)const 声明的是常量,一旦声明,值将是不可变的

const PI = 3.1415;
PI = 3;// 抛出异常:Assignment to constant variable.不能给一个常量再赋值;
console.log(PI) //3.1415

(2) const 也具有块级作用域

if (true) {
  const a = 5;
}
console.log(a);// a is not defined;

(3) const声明的常量同样会被提前,但不能被提前使用访问;


    var a = 5;
    function b(){
       console.log(a);
       var a = 5;
    }
    b();//undefind 这里得到的undefined就是因为函数内部有var声明提前造成的;这个例子是题外话,一个比较常见的陷阱
    
    if(true){
       console.log(PI);// 抛出一个错误PI is not defined
       const PI = 3.14
    }
    if(true){
       console.log(PI);// 不会报错只会打印出undefined,说明他已经声明了只是没有赋值
       var PI = 3.14 
    }
    //重复声明
    var message = "Hello";
    const message = "Goodbye!"; //会报错  Identifier 'message' has already been declared

获取第一手信息请关注我的专栏或者关注公众号
image

阅读 1.7k

前端杂谈
欢迎热爱前端的小伙伴一起进行交流与探讨,让我们在技术的海洋里乘风远航

从事前端开发,乐于分享和交流;

461 声望
15 粉丝
0 条评论

从事前端开发,乐于分享和交流;

461 声望
15 粉丝
文章目录
宣传栏