1-JavaScript基础知识-变量

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

本文主要介绍在JavaScript中的变量Var ，Let，Const分析他们的异同。带你更好的去理解他们的由来。

---

一、变量

变量和常量

• 在ES6之前，我们常常是用var来做关键词，来定义值的，应为都是用同一个，久而久之知都忘掉变量和常量的区别了，这里我们简单说一下。
  • 变量：我们经常会说赋值给变量，那么，变量就代表可以改变的，并不是绝对的，比如我们用一个桶接水，那么同理的水是不断改变的，我们就不应该把同理水的质量定义为一个常量。
  • 常量：那么如果一个值是不会改变的，我们就应该把它定义为一个常量了，比如个人的身份证号，我们会多次用到，而这个值是不能改变的，我们定义为常量就能保证在后面这个值是正确，不会出现被我们改动过的情况。

声明和赋值

• 在开始介绍Var前，我想先介绍一下声明和赋值，在后面我们会进一步了解到，因为这两步导致的一些情况。

声明

var a
let a
const a

• 关于声明有几点
  • 在JavaScript中使用变量和常量前，必须要先声明，不然会报错
  • 一般我们建议在声明过后对他进行赋值，这是比较好的习惯，如果我们没有赋值，他其实还是有值的，会被默认赋值为undefined

 var  a 
 console.log(a) //undefined

• 而对于常量，也就是const来说，必须在声明的同时赋值，否则会报错

const  a 
 console.log(a) //Uncaught SyntaxError: Missing initializer in const declaration

赋值

• 我们一般这么写实际是包含两步的，声明和赋值，在定义方法中也是类似的。

var = a = "你好"

//等价与下面写法
var a；
a = "你好"

二、Var

在ES6之前是只有var这个关键词的，那么为什么有var了，还推出Let和Const呢？并且随着时间的推移，使用Let和Const的人更加多，Var渐渐离开了我们的视野，那让我们得好好谈论一下Var的一些缺陷了。

var的声明作用域

1. var不像我们java等使用的语言，不具有块级作用域，他会根据他所被包含的函数中，成为局部变量，外界不可访问，且当函数销毁也会销毁。

function test() {
	var a = "你好"   //局部变量，外界不可访问，且当函数销毁也会销毁
}
test()
console.log(a) // 报错，无该变量

2. 同时还应该注意的是，如果没有加上var，该变量会提升到全局。强烈建议不要这么写，会造成后面很难维护，你很难确认这个变量当初的初心~~

function test() {
	 a = "你好"   //全局变量，可访问，且当函数销毁也还能访问，结果是undefined
}
test()
console.log(a) // 你好

3. var 还可以多次声明同名变量，这是因为他具有的是函数作用域而不是块级作用域导致的。这回带来什么影响呢？我们看下面的程序，他会输出什么呢？

//第一个:
for(var i = 0 ; i < 5 ;i++){
}
console.log(i)  //5
//第二个
for(var i = 0 ; i < 5 ; ++i){
        setTimeout(()=>console.log(i),0)
    }  // 5 5 5 5 5
//第三个:多次声明
function test() {
        var a = "你好呀"
        var a = "我好呀"
        var a = "大家好呀"
        console.log(a) // 大家好呀
    }
    test()  //undefined

• 为什么第一个会输出5呢？，为什么第二个会输出5个5呢，而不是1 2 3 4 5呢？这就是因为在有多个for循环的函数中，每个循环通常都以for(var i = 0; …开头。因为var并不会把这些变量的作用域限定在循环体内，每次循环都会（无害地）重新声明和重新初始化同一个变量。for定义的迭代变量渗透到循环体的内部。

4. 还有个问题就是声明提升的问题，var这个关键词会自动提升到函数作用域的顶部，提升就是把变量的声明放到函数作用域的顶部

function test() {
        console.log(a);
        var a = "你好呀"
    }
    test()  //undefined
//上面的方法不会报错，输出undefined，等效与下面的
function test() {
		var a；
        console.log(a);
        a = "你好呀"
    }
    test()  //undefined

---

三、Let

就是因为Var有那么多阴间玩意，我们的猪脚Let在ES6终于出现了，告别了被var支配的黑暗时代。

1. 首先Let有块级作用域的，不同于Var的函数作用域

let a = "aa"
    console.log(a); // aa
    if(true) {
        let b = "bb"
        console.log(b); //bb
    }
    console.log(b);  //ReferenceError: b is not defined

2. Let不可以重复声明

let a = "aa"
    let a = "bb"
    console.log(a); // SyntaxError: Identifier 'a' has already been declared

3. Let不存在变量提升，必须在使用前声明

console.log(a);  //ReferenceError: Cannot access 'a' before initialization
    let a = "aa"

4. 前面var 在for循环里面的问题用let就能很好的解决了

//迭代变量的作用域只存在于循环体内
for(let i = 0 ; i < 5 ; ++i){
        setTimeout(()=>console.log(i),0)
    }  // 0 1 2 3 4

四、const

• const的用法和let大体相似，不同点在于，const是用来定义常量的，并且我们建议，只要是不应该发生改变得值都应该用const来定义，确保这个值不会受到更改。
• 同时建议定义常量时，全部字母用大写，用来区别变量，如HTTP_NOT_FOUND
• 对于常量重新赋值是会报错的，另外在for循环体内不能用const，因为迭代对象会自增/减会改变，不可。但如果迭代只产生一个新变量就不会，如for…in 或for…of中就建议使用const

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

let a = {
	a : 1
	b : 2
}
for(const a in aa){
	 console.log(a)  //1 2
}    
    

• 使用const必须声明同时赋值，不然会报错的。同时不支持重复声明
• const的声明仅仅适用于他的变量的引用，如果是它的引用是一个对象，那么对象的内部属性不受影响，因为引用类型在栈中保存的是一个地址指向对空间的数据，地址是不可改变的，与堆里的定义无关联的。

const a = {a:'a'};
a = {a:'b'};//重新赋值地址是不行的
a.a = 'b' //但我们对其中的定义是可以发生改变的

总结

写了关于var /let /const的一些注意点，参考的资料有红宝石以及犀牛书，其中红宝石写的很不错，大多数思路都是吸收其中的。欢迎大家来讨论噢！