ES6 变量声明

Posted 2021-01-01 mapsxy

变量声明const和let
在ES6之前，我们都是用var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:
function aa() {
if(bool) {
var test = ‘hello man‘
} else {
console.log(test)
}
}

以上的代码实际上是：
function aa() {
var test // 变量提升
if(bool) {
test = ‘hello man‘
} else {
//此处访问test 值为undefined
console.log(test)
}
//此处访问test 值为undefined
}

所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。
接下来ES6主角登场：
我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？
● 在一个函数内部
● 在一个代码块内部
说白了 {}大括号内的代码块即为let 和 const的作用域。
看以下代码：
function aa() {
if(bool) {
let test = ‘hello man‘
} else {
//test 在此处访问不到
console.log(test)
}
}

let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。
再来说说const
const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了。
const name = ‘lux‘
name = ‘joe‘ //再次赋值此时会报错

还有，如果const的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就行。
const student = { name: ‘cc‘ }
// 没毛病
student.name = ‘yy‘
// 如果这样子就会报错了
student = { name: ‘yy‘ }

说一道面试题
var funcs = []
for (var i = 0; i < 10; i++) {
funcs.push(function() { console.log(i) })
}
funcs.forEach(function(func) {
func()
})

这样的面试题是大家常见，很多同学一看就知道输出 10 十次
但是如果我们想依次输出0到9呢？
有两种解决方法。直接看一下代码。
// ES5告诉我们可以利用闭包解决这个问题
var funcs = []
for (var i = 0; i < 10; i++) {
funcs.push(
(function(value) {
return function() {
console.log(value)
}
})(i)
)
}
funcs.forEach(function(func) {
func()
})

// 再来看看es6怎么处理的
const funcs = []
for (let i = 0; i < 10; i++) {
funcs.push(function() {
console.log(i)
})
}
funcs.forEach(func => func())