关于前端:变量-var-const-let-的区别

42次阅读

共计 1990 个字符,预计需要花费 5 分钟才能阅读完成。

第一章 变量 var const let 的区别


<font color=#999AAA >

一、var 申明

<font color=#999AAA >1. 如果不给变量传值的话,变量就是 undefined

var msg;
console.log(msg)  //undefined

<font color=#999AAA >2. var 申明作用域:var 操作定义符的变量会成为蕴含它的函数的局部变量,如果用 var 在一个函数外部定义变量,该变量将在函数推出时被销毁

function test(){var msg = 'Bear';}
test();
console.log(msg);// 报错

<font color=#999AAA >3. var 申明晋升:应用 var 时,上面代码不会报错,因为应用这个关键字申明的变量会主动晋升到函数作用域顶部

function test(){console.log(name);
    var name = 'Bear';
}
test() //undefined
// 之所以不会报错是因为 ES 运行时把他看成以下的代码
function test(){
    var name ;
    console.log(name);
    name = 'Bear';
}
test() //undefined

二、let 申明

  1. let 跟 var 的作用差不多,区别就是 let 申明的范畴是块作用域,而 var 申明的范畴是函数作用域
if(true){
var name = 'bear';
console.log(name); //bear
}
console.log(name);//bear

if(true){
let name = 'bear';
console.log(name); //bear
}
console.log(name);// ReferebceError:name 没有定义

2.let 不容许同一块作用域呈现反复的申明,这样会导致报错

var name;
var name;
let age;
let age;// 报错 Syntax Error 标识符 age 曾经被申明过了
  1. let 申明的变量不会在作用域中被晋升
//var 会晋升
console.log(name) //undefined
var name = 'bear';
//let 不会晋升
console.log(age) //ReferenceError age 没有定义
var age = 21;

4.let 在全局作用域中申明的变量不会成为 window 对象的属性(var 申明的则会)

var name = 'bear';
console.log(window.name);// bear

let age = 21;
console.log(window.age); //undefined

5.for 循环中的 let 申明
在 let 呈现之前 for 循环定义的迭代变量会渗透到循环体内部

for (var i = 0; i < 5 ;i++){
}
console.log(i);  //5

在改成 let,这个问题就小时了,因为迭代的变量只属于 for 循环块外部

for (var i = 0; i < 5 ;i++){
}
console.log(i);  //ReferenceError i 没有定义

在用 var 的时候最常见的问题就是对迭代变量的申明和批改

for (var i = 0; i < 5 ;i++){setTimeout(() => console.log(i) , 0)
} // 会输入 55555 你可能认为会输入 0 1 2 3 4 
// 因为在推出循环时候,变量保留的是循环退出后的值,所以输入了 5 次 5 

在应用 let 变量就不会导致这样的状况

for (let i = 0; i < 5 ;i++){setTimeout(() => console.log(i) , 0)
} // 会输入 0 1 2 3 4 

三、const 申明

const 根本与 let 类似,惟一一个重要区别是用它申明变量时必须同时初始化变量值,且尝试批改 const 申明的变量会导致运行的谬误

1. 给常量赋值

const name = 'bear';
name = 'jackson' ; //typeError  报错

2.const 也不容许反复申明

const name = 'bear';
const name = 'jackson' ; //SyntaxError  报错

3.const 申明的作用域也是块

const name = 'bear';
if(true){const name = 'jackson';}
console.log(name) //bear

4.const 的申明限度值实用于它指向的变量的援用

const test = {};
test.name = 'bear' ;  // 这里能够运行

四、总结

1. 不应用 var
ES6 相当于把 var 的性能拆解成 const 和 let,有了 let 和 const,其实会发现不须要再用 var 了,限度本人应用 const 和 let 有助于代码品质的晋升。
2.const 优先 let 次之
应用 const 申明能够让浏览器运行时强制放弃变量不变,在这同时也能迅速发现意外赋值的这种非预期行为。简而言之就是 const 定义一些不会变的变量,会变的就用 let 定义。

正文完
 0