一、声明变量的问题
1.重复声明
允许重复的变量声明:导致数据被覆盖
var a = 1;
function print(){
console.log(a)
}
print();//1
var a = 2;
print();//2
2.变量提升
- 怪异的数据访问
if (Math.random() < 0.5) {
var a = "abc";
console.log(a);
}
else {
console.log(a);
}
console.log(a);
- 闭包问题
for (var i = 1; i <= 10; i++) {
btn.onclick = function () {
console.log(i); //11
}
}
3.全局变量挂载
全局变量挂载到全局对象:全局对象成员污染问题
var console = "abc";
console.log(console)
二、let声明变量
ES6不仅引入let关键字用于解决变量声明的问题,同时引入了块级作用域的概念;
块级作用域:代码执行时遇到花括号,会创建一个块级作用域,花括号结束,销毁块级作用域
1.块级作用域
if (Math.random() < 0.5) {
let a = 123; //定义在当前块级作用域
console.log(a) //当前块级作用域中的a
}
else {
//这是另外一个块级作用域,该作用域中找不到a
console.log(a)
}
console.log(a);//访问不到Math.random()<0.5的a
2.声明变量
- let声明的变量不会挂载到全局对象
let a = 123;
console.log(window.a);//undefined
- let声明的变量,不允许当前作用域范围内重复声明
let a = 123;
let a = 456;
console.log(a);
- 一个作用域只能生命一次
let a = 123;
function test(){
let a = 456;
console.log(a)
}
test();//456
3.变量提升
底层实现上,let声明的变量实际上也会有提升,但是,提升后会将其放入到“暂时性死区”,如果访问的变量位于暂时性死区,则会报错:“Cannot access ‘a’ before initialization”。当代码运行到该变量的声明语句时,会将其从暂时性死区中移除。
- let不会有变量提升,因此,不能在定义let变量之前使用它
console.log(a)
let a = 123;
- 闭包
在循环中,用let声明的循环变量,会特殊处理,每次进入循环体,都会开启一个新的作用域,并且将循环变量绑定到该作用域(每次循环,使用的是一个全新的循环变量);
在循环中使用let声明的循环变量,在循环结束后会销毁。
for (let i = 1; i <= 10; i++) {
button.onclick = function () {
console.log(i) //1、2、3、4...
}
}
三、const声明常量
const和let完全相同,仅在于用const声明的变量,必须在声明时赋值,而且不可以重新赋值。
1.变量声明
- 必须在声明时赋值,而且不可以重新赋值。
const a;
console.log(a);
const a;
a = 1;
console.log(a);
const a = 0;
a = 1;
console.log(a);
- 根据经验,开发中的很多变量,都是不会更改,也不应该更改的。
- 后续的很多框架或者是第三方JS库,都要求数据不可变,使用常量可以一定程度上保证这一点。
- 常量不可变,是指声明的常量的内存空间不可变,并不保证内存空间中的地址指向的其他空间不可变。
const a = {
name: "kevin",
age: 123
};
a.name = "abc";
a.sex = 'male';
console.log(a,a.sex);
2.常量命名
- 特殊的常量:该常量从字面意义上,一定是不可变的,比如圆周率、月地距地或其他一些绝不可能变化的配置。通常,该常量的名称全部使用大写,多个单词之间用下划线分割
const PI = 3.14; //圆周率
const MOON_EARTH_DISTANCE = 3245563424; //月地距离
- 普通的常量:使用和之前一样的命名即可(小驼峰式)
3.循环遍历
- 在for循环中,循环变量不可以使用常量
const btn = document.getElementsByClassName('btn')[0];
for (const i = 1; i <= 10; i++) {
btn.onclick = function () {
console.log(i) //使用的是当前作用域中的i,i不能改变
};
}
- 在遍历时可以使用for in
var obj = {
name:"kevin",
age:1
}
for (const prop in obj) {
console.log(prop)
}