前端基础知识一：变量、var、let、const

一、变量

变量和常量

• 在ES6之前，我们常常是使用var来做关键字，来定义值的。
• 变量：我们经常说赋值给变量，变量代表着可以改变的。例如，用一个桶接水，桶里的水是不断改变的，因此不应该把桶里水的质量定义为一个常量。
• 常量：如果一个值是不会改变的，我们应该把它定义为常量。例如，一个人的身份证号，我们会多次用到，但这个值是不变的。

声明和赋值

在开始介绍var之前，先介绍一下声明和赋值，在后面会进一步了解到，因为声明和赋值导致的一些情况。

• 声明

let a;
var b;
const c;

在JavsScript中使用变量和常量前，必须先声明，否则会报错。

一般我们建议在声明过后对他进行赋值，这是比较好的习惯。如果我们没有赋值，会被默认赋值为undefined。

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

对于常量const，必须在声明的同时赋值，否则会报错。

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

• 赋值

var = a = 'hello';

//等价于下面写法

var a;  //声明
a = 'hello';  //赋值

---

二、var

在ES6之前是只有var一个关键词，后来推出了let、const。随着越来越多人使用let、const，var逐渐淡出人们视线，下面说明一下var的缺陷。

var的声明作用域

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

function test() {
    var a = 'hello'; //局部变量，外界不可访问，且当函数销毁时它也会销毁
}

test();
console.log(a); // 报错，无该变量

• 如果没有加上var，该变量会提升到全局。强烈建议不要这么写，会造成后期维护困难。

function test() {
    a = 'hello';  // 全局变量，可访问，且当函数销毁时也还能访问，值变成undefined
}

test();
console.log(a); // hello

• 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

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


// 第三个：多次声明
function test() {
    var a = 'hello-1';
    var a = 'hello-2';
    var a = 'hello-3';
    console.log(a); // hello-3
}
test(); // undefined

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

• var会自动提升到函数作用域的顶部，提升就是把变量的声明放到函数作用域的顶部

function test() {
    console.log(a);
    var a = 'hello';
}

test(); // undefined
// 不会报错，输出undefined，等效于下面的代码

function test() {
    var a;
    console.log(a);
    a = 'hello';
}

test(); // undefined

---

三、let

• let 有块级作用域

let a = 'aa';
console.log(a);  // aa

if (true) {
    let b = 'bb';
    console.log(b);  // bb
}

console.log(b);  // Uncaught ReferenceError: b is not defined

• let 不可以重复声明

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

• let 不存在变量提升，必须在使用前声明

console.log(a);  //debounce_throttle.html:352 Uncaught ReferenceError: Cannot access 'a' before initialization

let a = 'aa';

• 前面var在for循环里面的函数打印问题，使用let就可以解决了

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

---

四、const

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

for (const i = 0; i < 5; i++) {
    console.log(i); // 
}
// Uncaught TypeError: Assignment to constant variable.


let aa = { a: 1, b: 2}

for(const a in aa) {
    console.log(a); // 1 2
}

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

const a = { a: 'a'};

a = { a: 'b'}; // Uncaught TypeError: Assignment to constant variable.

a.a = 'b';

文章转载至：1-JavaScript基础知识-变量