let与const
# 简述
- ES6 是 2015 年发行的新的 js 标准,又名:ECMACScript 2015 标准
- 部分低版本浏览器不支持 ES6 的直接解析
- 通过 babel 可以将 ES6 代码转换为 ES5 实现所有浏览器的支持
- ES6 提升编程效率以及代码的简洁度
# 浏览器兼容解决方案
- chrome 浏览器 版本号 62+完全支持 ES6 (import export)
- ES6 通过 babel 进行转换: http://babeljs.io/repl/
# let & const 与 var 的区别
# 变量声明 var
- 通过 var 声明的变量会直接声明到全局(window)作用域 上
for (var i = 0; i < 3; i++) {
console.log(i);
}
console.log(i);
console.log(window.i);
1
2
3
4
5
2
3
4
5
0
1
2
3
3
1
2
3
4
5
2
3
4
5
- 问题:var 声明的变量如果想实现局部作用域只能通过函数作用域来实现
//这里的变量i 仍然是作为了全局变量在使用
(function() {
for (var i = 0; i < 3; i++) {
console.log(i);
}
})();
console.log(i);
console.log(window.i);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
0
1
2
i is not defined
1
2
3
4
2
3
4
- 示例 异步打印出每次循环的键值(如果不使用匿名函数传递i的参数会输出3次:3)
for (var i = 0; i < 3; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, 1000);
})(i);
}
1
2
3
4
5
6
7
2
3
4
5
6
7
0
1
2
1
2
3
2
3
# let 实现局部作用域
- let 和 { } 配合可以产生一个新的作用域
for (let i = 0; i < 3; i++) {
setTimeout(function () {
console.log(i)
}, 1000)
}
1
2
3
4
5
2
3
4
5
0
1
2
1
2
3
2
3
# var 进行了变量提升
通过var声明的变量会自动将声明语句默认提升到最前面进行执行,但是对于读代码和理解程序的自上而下运行的流程不太好,同时也会造成变量的全局污染。
console.log(a);
var a = 1;
console.log(a);
// unidefined
// 1
1
2
3
4
5
2
3
4
5
console.log(a);
let a = 1;
console.log(a);
// a is not defined
1
2
3
4
2
3
4
# 暂存死区
如果当前作用域内有定义这个变量就不会向上查找,如果没有定义会自动向上查找这个变量的值
let a =1;
{
console.log(a)
}
// 1
1
2
3
4
5
2
3
4
5
//暂存死区
let a =1;
{
console.log(a);
let a = 2;
}
// Cannot access 'a' before initialization
1
2
3
4
5
6
7
2
3
4
5
6
7
# const 变量声明
const 拥有let 所有的特性,唯一的区别就是const声明的变量不可被修改引用空间
const b =1;
const b =2;
console.log(b);
// Identifier 'b' has already been declared
1
2
3
4
2
3
4
const children = {age:12};
children.age = 5;
children.sex = '女';
console.log(children);
// {age: 5, sex: "女"}
1
2
3
4
5
2
3
4
5
编辑 (opens new window)
上次更新: 2022/05/28, 19:34:46