JavaScript 变量的使用

1. 变量的定义： 变量是指程序中一个已经命名的储存单位，它的主要作用就是为数据操作提供存放信息的容器。
2. 变量的命名：

• 必须以字母或下划线（_）开头，中间可以是数字、字母或下划线；
• 变量名不能包括空格、加、减等符号；
• 不能使用 JS 中关键字作为变量名，如 int,new 等；
• JS 的变量名严格区分大小写；

3. 变量的声明与赋值：
   在 JS 中，var 就是专门用来声明变量的；

声明一个变量 var 变量名;

如果仅仅是声明一个变量，不对变量进行赋值，那么这个变量是有默认值(undefined)

如：var x；　　输出就是 undefined

注：一个 var 可以同时声明多个变量，中间用逗号隔开。 如：var x,y,z;

定义一个变量 var x=1;

对变量进行声明的时候，同时为变量进行赋值，对变量 "x" 的操作，本质就是对数值 "1" 的操作

注：声明变量的同时，也可以对多个变量进行赋值。如：var x=1,y=2,z=3;

注：如果对同一个变量进行多次赋值，那么后者将覆盖前者。

如：var x=1;

var x=2;

那么 "x" 的值最终为 "2"

使用 var 声明的变量可以进行提升。提升就是把加 var 的变量提到代码的最前面。因为 JS 代码在执行之前有一个预解析，预解析的时候做了两件事，把加 var 的变量提升，把函数提升。

---

一个 script 标签就是一个代码片段。预解析完后，才会执行 JS 代码。

---

提升的时候仅仅是提升了声明

如：

console.log(x)   // 输出结果：undefined
var x = 666;
console.log(x)    // 输出结果：666

上面代码相当于如下代码：

var x;  
console.log(x)   // 输出结果：undefined
x = 666;  
console.log(x)   // 输出结果：666

4. 全局变量 和 局部变量：
   JS 中的变量分两类：全局，局部
   全局变量指变量在函数内外都可以访问
   局部变量指只能在函数内部访问
   特别注意：在 JS 中，全局变量和局部变量的分界点是"函数"

全局变量

var age = 100;
function f(){
    console.log("在函数里面访问的全局变量"+age)
}
console.log(age)                       先输出
f()            // 函数调用             后输出

输出结果：100

在函数里面访问的全局变量100

注：如果你要使用这个函数，那么你一定要调用这个函数，否则不起作用

局部变量

function f(){
       var name = "xiao";  // 局部变量，因为这个变量放在函数里面
       console.log(name)
   }
console.log("----"+name)     先输出
f()                          后输出

输出结果：----

xiao

因为这个变量放在函数里，所以为局部变量，函数外面访问不了

---

当局部变量 提升 时，局部变量是提升到了函数体的最前面

示例：

function f(){
    console.log(a)
    var a = 2;
}
f();

上面代码相当于如下代码：

function f(){  
    var a;
    console.log(a)
    a = 2;
}
f();

console.log(); 意思是在浏览器的控制台输出

看如下代码，说出它是 全局变量 还是 局部变量

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

答：是全局变量，原因是全局变量和局部变量的分界点是函数

加 var 变量不足之处：

1，提升 全局变量的提升，局部变量的提升

2，同名变量，那么后面的变量会覆盖前面的变量

3，可以省去 var

....

重点重点重点，曾经踩过的坑

给出一下代码，说出结果：

(function ab() {
	var a=b=2;
	console.log(typeof a) //number
	console.log(typeof b) //number

})()
console.log(typeof a) //undefined
console.log(typeof b)

由于 a 和 b 都定义在函数的封闭范围内，并且都始于 var关键字，大多数人都期望 typeof a 和 typeof b 在上面的例子中都是 undefined

然而，事实并非如此。这里的问题是，大多数人将语句 var a = b = 3; 错误地理解为是以下声明的简写：

var b = 3;
var a = b;

但事实上，var a = b = 3; 实际是以下声明的简写：

b = 3;
var a = b;

那么运行下面这段代码：

(function ab() {
	var a=b=2;
})()
console.log(b)
console.log(a)

得到的结果是：

2
下面报错: Uncaught ReferenceError: a is not defined

可以看出这里的 a 是局部变量，而 b 是全局变量

总结： 使用 var 声明变量，在这前用的比较多，在 ES6 出来后，又定义了两个关键字，一个叫 let (可以声明块级作用域)， 一个叫 const 也就是说，在 JS 中，我们以后尽量使用 let 或 const 来声明变量，有的低版本浏览器，对这个 let 和 const 支持不给力（极少数）

let 的使用

如果使用了 let 声明的变量，那么这个变量是不会提升的

示例：

console.log(a)  
let  a = 1;

那么它会直接报错，而不会输出 undefined

如果使用了 let 声明的变量，可以防止重复声明

示例：

let a = 1;
let a = 2;
let a = 3;
console.log(a)

那么它会直接报错

使用 let 可以形成一个块级作用域，一个 {} 就是一个块级作用域

示例：

{
     let a = 10;
     console.log(a)   输出结果：10
}
console.log(a)        输出结果：直接报错

示例：

let a = 10;
{
     console.log(a)
     //  let a = 666;
}

输出结果：10 （如果把 let a = 666; 的注释取消，就会直接报错）

注：暂存性死区 如果你在这个块级作用域中使用 let 声明了一个变量，在块级作用域外面也有一个同名的变量，当你要在块级作用域中这个变量前面去访问这个变量时，那么它会这样考虑，在块级作用域中已经有了 a ,只不过你是访问不了的，是因为 let 声明的变量不能提升

---

如果在 for 循环中循环变量如果使用了 let ，你可以把它当作是块级作用域中的变量，也就是说，只要出来 {} i 就不能生效 。所以，以后在使用 for 循环的时候，不要使用 var 来声明一个循环变量，要使用 let 来声明一个循环变量

const 的使用

const 是用来声明一个 常量

示例：

const PI = 3.14
PI = 666;   如果声明了一个常量，那么这个常量的值，你是不能随便改变
console.log(PI)

输出结果：直接报错

const 声明的常量也是不能 提升 的

总结：

let
与 var 类似，用来定义变量
特点：

• 块级作用域（第三种作用域）。let 所声明的变量，只在 let 命令所在的代码块内有效
• let 没有“变量提升”现象
• 不会成为 window 对象的属性
• 暂存性死区（TDZ）
• 不能重复定义

const
声明常量,值不能改变

特点：

• 定义完后，不能修改值（可能是基本数据类型，也可能是地址）
• 不能重复声明
• 没有提升
• 声明时必须赋值

以后能使用 let 和 const 的，就使用 let 和 const ，尽量不要使用 var

深入理解变量

加 var 和不加 var 的区别

• 区别一：

局部变量 全局变量

• 区别二:

可删除的,不可删除的

• 区别三:

加 var 会提升,不加 var 不会被提升（参考前面的内容）

变量的作用域

• 全局: global
• 局部: local
• 变量的就近原则

全局变量

局部变量

• 块级作用域

JS 中没有块级作用域

注意: 只有函数能够划分作用域