变量 var const let 的区别

2022-11-14 16:45:50 浏览数 (1)

theme: cyanosis

第一章 变量 var const let 的区别

前言

ECMAScript变量是松散类型的，变量可以保存任何类型的数据，每个变量不过是一个用于保存任意值的命名占位符。有三个关键字可以声明变量，var是在ECMAScript所有版本都可以使用，而const和let只能在ES6版本后使用

一、var声明

1. 如果不给变量传值的话 ，变量就是 undefined

代码语言：javascript复制
var msg;
console.log(msg)  //undefined

2. var 声明作用域：var操作定义符的变量会成为包含它的函数的局部变量，如果用var在一个函数内部定义变量，该变量将在函数推出时被销毁

代码语言：javascript复制
function test(){
    var msg = 'Bear';
}
test();
console.log(msg);//报错

3. var 声明提升：使用var时，下面代码不会报错，因为使用这个关键字声明的变量会自动提升到函数作用域顶部

代码语言：javascript复制
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声明的范围是函数作用域
代码语言：javascript复制
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不允许同一块作用域出现重复的声明，这样会导致报错

代码语言：javascript复制
var name;
var name;
let age;
let age;//报错 Syntax Error 标识符age已经被声明过了
  1. let声明的变量不会在作用域中被提升
代码语言：javascript复制
//var会提升
console.log(name) //undefined
var name = 'bear';
//let 不会提升
console.log(age) //ReferenceError age没有定义
let age = 21;

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

代码语言：javascript复制
var name = 'bear';
console.log(window.name);// bear

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

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

代码语言：javascript复制
for (var i = 0; i < 5 ;i  ){
}
console.log(i);  //5

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

代码语言：javascript复制
for (var i = 0; i < 5 ;i  ){
}
console.log(i);  //ReferenceError i没有定义

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

代码语言：javascript复制
for (var i = 0; i < 5 ;i  ){
     setTimeout(() => console.log(i) , 0)
} //会输出55555 你可能以为会输出0 1 2 3 4 
//因为在推出循环时候，变量保存的是循环退出后的值，所以输出了 5次5

在使用let变量就不会导致这样的情况

代码语言：javascript复制
for (let i = 0; i < 5 ;i  ){
     setTimeout(() => console.log(i) , 0)
} //会输出0 1 2 3 4

三、const声明

const 基本与 let相似，唯一一个重要区别是用它声明变量时必须同时初始化变量值，且尝试修改const声明的变量会导致运行的错误

1.给常量赋值

代码语言：javascript复制
const name = 'bear';
name = 'jackson' ; //typeError  报错

2.const也不允许重复声明

代码语言：javascript复制
const name = 'bear';
const name = 'jackson' ; //SyntaxError  报错

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

代码语言：javascript复制
const name = 'bear';
if(true){
    const name = 'jackson';
}
console.log(name) //bear

4.const的声明限制值适用于它指向的变量的引用

代码语言：javascript复制
const test = {};
test.name = 'bear' ;  //这里可以运行

四、总结

1.不使用var ES6相当于把var的功能拆解成const和let，有了let和const，其实会发现不需要再用var了，限制自己使用const和let有助于代码质量的提升。 2.const优先 let次之 使用const声明可以让浏览器运行时强制保持变量不变，在这同时也能迅速发现意外赋值的这种非预期行为。简而言之就是const定义一些不会变的变量，会变的就用let定义。

编程算法 ecmascript

0 人点赞