ES6中let和var和const的区别

  • 通过var定义的变量,作用域是整个封闭函数,是全域的 。通过let定义的变量,作用域是在块级或是子块中。
for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined
//计数器i只在for循环体内有效,在循环体外引用就会报错。
    
    
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 变量提升现象:浏览器在运行代码之前会进行预解析,首先解析函数声明,定义变量,解析完之后再对函数、变量进行运行、赋值等。
    -不论var声明的变量处于当前作用域的第几行,都会提升到作用域的头部。
    -var 声明的变量会被提升到作用域的顶部并初始化为undefined,而let声明的变量在作用域的顶部未被初始化
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
//相当于
var foo;  //声明且初始化为undefined
console.log(foo);
foo=2;

    
    
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
//相当于在第一行先声明bar但没有初始化,直到赋值时才初始化

    
    
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

但是直接用let声明变量不赋值是会打印undefined,还是初始化了,只是let声明放在赋值之后,let声明会提前但不会初始化。

let a;
alert(a);//值为undefined

alert b;//会报错
let b;
    
    
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 只要块级作用域内存在let命令,它所声明的变量就“绑定”这个区域,不再受外部的影响。总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的,尽管代码块外也存在相同全局变量。
var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}
alert(tmp);  //输出值为123,全局tmp与局部tmp不影响
    
    
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • let不允许在相同作用域内,重复声明同一个变量。
// 报错
function () {
  let a = 10;
  var a = 1;
}
// 报错
function () {
  let a = 10;
  let a = 1;
}
    
    
    
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    -

在JavaScript中有三种声明变量的方式:var、let、const。下文给大家介绍js中三种定义变量的方式const, var, let的区别。

1.const定义的变量不可以修改,而且必须初始化

?

1
2
3
4
5
const b = 2; //正确
// const b;//错误,必须初始化
console.log( '函数外const定义b:' + b); //有输出值
// b = 5;
// console.log('函数外修改const定义b:' + b);//无法输出



2.var定义的变量可以修改,如果不初始化会输出undefined,不会报错。

?

1
2
3
4
5
6
7
8
9
var a = 1;
// var a;//不会报错
console.log( '函数外var定义a:' + a); //可以输出a=1
function change(){
a = 4;
console.log( '函数内var定义a:' + a); //可以输出a=4
}
change();
console.log( '函数调用后var定义a为函数内部修改值:' + a); //可以输出a=4



3.let是块级作用域,函数内部使用let定义后,对函数外部无影响。

?

1
2
3
4
5
6
7
8
let c = 3;
console.log( '函数外let定义c:' + c); //输出c=3
function change(){
let c = 6;
console.log( '函数内let定义c:' + c); //输出c=6
}
change();
console.log( '函数调用后let定义c不受函数内部定义影响:' + c); //输出c=3




你可能感兴趣的:(ES6)