ES6中var/let/const的区别

Posted 2021-02-05 wan-li

最近无聊看了一下前端面试题,看到不少地方要求列出var/let/const的异同,自己整理一下,算加深一下记忆。

 1.作用域

var为全局作用域,而let和const为局部作用域(仅作用在大括号内),举个简单例子:

1 if(true){
2    var a = 1
3    let b = 2
4    const c = 3  
5 }
6 console.log(a) //a打印出来为 1
7 console.log(b) //b is not defined
8 console.log(c) //c is not defined

2.变量声明

var和let可以仅声明不赋值,但是const必须赋值,否则报错

var a = 1 //正确
let b = 1 //正确
const c = 1 //正确

var d //正确 d打印为undefined
let e //正确 e打印为undefined
const f //错误

3.是否可修改

var和let声明的变量,可随意修改;const声明的变量,若为基本数据类型不可修改,若为引用数据类型,可修改值,不可修改引用地址。

Vue父子组件传值,子组件中的props为const声明的变量,若为数组,清空数组的时候可以用array.length = 0(若为array = []会报错,因为修改了引用地址);

var a = 1;
a =2;
console.log(a) // 2

let b = 1;
b = 2;
console.log(b) // 2

//c为基本数据类型不可修改
const c = 1;
c = 2; //报错

//d为引用数据类型
const d = [1,2,3];
d.push(4);//对引用数据类型进行值的修改可进行
console.log(d);// [1,2,3,4]
d = [1,2,3,4,5] //对引用数据类型进行地址修改,报错

4.是否可重复声明

var可以重复声明;let和const不可重复声明.

var a = 1;
var a = 2; //不报错,可重复声明
console.log(a); // 2

//let 和 const 情况相同
let a = 3;//报错,上面已经声明过a(var 声明的也不可以)
let b = 1;
let b =2; //报错,上面已经声明过b

5.变量提升

 var 声明的变量会进行变量提升,但是赋值不提升;let和const声明的变量不会提升。

console.log(a);// a为undefined
var a =1;
console.log(a);// a为1

//let和const情况相同
console.log(b);//报错,提示 b is not defined
let b =1;
console.log(b);// b为1