var/let/const 你都懂了吗

以你之姓@ 2022-12-17 14:55 180阅读 0赞

## js中的变量你都知道哪些? ##

> ECMAScript 变量是松散类型的, 意思是变量可以用于保存任何类型的数据,每个变量只不过是用于保存任何值的命名占位符,其中有三个变量 var, const, let var在ECMAScript的所有版本中都可以使用,而const和let只能在ECMAScript6及以后的版本中使用

## var关键字 ##

要定义一个变量可以使用var操作符(var是一个关键字),后跟变量名(即标识符)
    var msg;
    这行代码的意思是定义了一个名为msg的变量,可以用它保存任何类型的值
    (在不初始化的情况下, 变量会保存一个特殊值undefined), ECMAScript实现变量初始化, 
    因此可以同时定义变量并且设置它的值
    var msg = '你好'
    msg被定义为一个保存字符串值你好的变量,但是像这样初始化变量不会将它便是为字符串类型,只是简单的赋值而已,随后可以改变保存的值,也可以改变值的类型
    var msg = 'enen'
    	msg = 100
    这里变量首先被定义为一个保存字符串值enen的变量,然后又被重新写为保存数值100, 
    虽然不推荐这样改变保存至的类型，但在ECMAScript中是完全有效的

> var 声明作用域 即定义在函数内部的变量会成为这个函数的局部变量  
> function test() \{  
> var msg = '‘ni’  
> \}  
> console.log(msg) // msg is not defined  
> 但是在函数内部定义变量时省略var操作符,可以创建一个全局变量  
> function test () \{  
> msg = ‘ni’  
> \}  
> test()  
> console.log(msg) // ni

注意: 虽然可以通过省略var操作符定义全局变量,但是不推荐这么做, 在局部作用域中定义的全局变量很难维护

###### 如果需要定义多个变量可以在一条语句中用都好分隔每个变量 ######

var msg = 'ni',
    	age = 1,
    	flag = false
    在严格模式下不能定义名为 eval和arguments的变量,否则会导致语法错误

*  var声明提升

使用var时, 下面的diamagnetic不会报错,这是因为使用这个关键字声明的变量会自动提升到函数作用域顶部:
    function foo() { 
    	console.log(age)
    	var age = 20
    }
    foo() // undefined
    之所以不会报错是因为ECMAScript运行时把它看成如下代码
    function foo() { 
    var age;
    console.log(age)
    age = 20
    }
    foo()
    所谓的变量提升就是把所有变量声明都放到了函数作用于从的顶部

## let声明 ##

> let和var的作用差不多, 区别就是let声明的范围是块作用域, var 声明的范围是函数作用域

if (true) { 
    	var name = 'Matt';
    	console.log(name); // Matt
    }
    console.log(name) // Matt
    if (true) { 
    	let age = 20;
    	console.log(age); // 20
    }
    console.log(age) // age没定义
    age之所以不能在if块外部被引用, 是因为他的作用域仅限于该块内部,块作用域是函数作用域的子集, 因此适用于var的作用域限制同样也适合let;

> let 不允许同一个块作用域中出现冗余声明, 这样会直接报错

var name;
    var name;
    let age;
    let age; // age已经声明 Identifier 'age' has already been declared

> javascript引擎会记录用于变量声明的标识符及其所在的块作用域,因此嵌套使用相同的标识符不会报错

var name = 'dzl';
    console.log(name) // dzl
    if (true) { 
    	var name = 'll';
    	console.log(name); // ll
    }
    let age = 20;
    console.log(age) // 20
    if (true) { 
    	let age = 20
    	console.log(age) // 20
    }

> let 声明的变量不会在作用域中被提升

console.log(name) // undefined
    var name = 'dzl';
    这样写相当于
    var name; // 默认undefined;
    console.log(name) // 
    var name = 'dzl'
    ----------
    console.log(age) // age没定义
    let age = 20;

*  全局声明

> 与var关键字不同, 使用let 在全局作用域中声明的变量不会成为window对象的属性(var 声明的会)

var name = 'dzl';
    console.log(window.name) // dzl;
    let age = 20;
    console.log(window.age) // undefined

#### for循环中的let声明 ####

*  在let出现之前, for循环定义的迭代变量会渗透到循环体外部

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

*  let 迭代的变量的作用域仅限于for循环块的内部

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

*  以下两段代码结果是什么

for(var i = 0; i < 5; ++i) { 
    	setTimeout(() => console.log(i), 0) // 5, 5, 5, 5, 5
    }
    结果你猜到了吗,之所以会这样是因为在退出循环时, 迭代变量保存的是导致循环退出的值: 5, 在之后执行超时逻辑时, 所有的i都是统一变量
    for(let i = 0; i < 5; ++i) { 
    	setTimeout(() => console.log(i), 0) // 0,1,2,3,4
    }
    在使用let声明迭代变量的时候, javascript引擎会在后台为每个迭代循环声明一个新的迭代变量

## const声明 ##

> const和let基本相同, 唯一一个重要的区别就是是用它声明变量时必须同时初始化变量, 且尝试修改const 声明的变量会导致运行时出错

const age = 20;
    	age = 20; // TypeError 给常量赋值
    // const 也不允许重复声明
    const name = 'Matt';
    const name = 'dzl' // SyntaxError
    // const 声明的作用域也是块
    const name = 'dzl';
    if (true) { 
    	const name = 'aa';
    }
    console.log(name) // dzl
    const 定义常量 所以不能使用const进行for循环

> 总结:  
> ECMAScript6增加了let和const更精确的声明了作用域和语义
> 
> 1.  不使用var
> 2.  const 优先, let次之