你会使用ES6 ,但这几点你可能不知道,感觉身体被掏空!

49次阅读

共计 2381 个字符,预计需要花费 6 分钟才能阅读完成。

let 的使用
我们知道 let 主要有三个特性:

let 声明的变量的作用域是块级的 (es5 中只有全局和函数作用域)
let 不能重复声明已存在的变量;
let 有暂时死区,不会被提升。

我们早期面试的时候,经常会考的一道题目是:
// 代码段 1
var liList = document.querySelectorAll(‘li’) // 共 5 个 li
for(var i=0; i<liList.length; i++){
liList[i].onclick = function(){
console.log(i)
}
}

大家都知道依次点击 li 会打印出 5 个 5。如果把 var i 改成 let i,就会分别打印出 0、1、2、3、4:
// 代码段 2
var liList = document.querySelectorAll(‘li’) // 共 5 个 li
for(let i=0; i<liList.length; i++){
liList[i].onclick = function(){
console.log(i)
}
}

然而,你会发现 for(let i=0; i<liList.length; i++),这样声明 i 的作用域是哪个?这边直接跟你说吧,i 的作用域只在 for() 括号里面,所以代码中依然只声明了一个 i,在 for 循环结束后,i 的值还是会变成 5 才对。这里可能就说明有一部分的人对 let 理解有误了。
于是我们方方老师大佬去看 MDN 的例子,发现鸡贼的 MDN 巧妙地避开了这个问题,它的例子是这样的:

它直接在另外声明了一个 j 来保存,为什么不直接用 i 呢?MDN 为了简化知识,隐瞒了什么?
经过我们方方老师大佬饥渴精神,不断的查资料,最后他总结这么几句自己的理解:

for(let i = 0; i< 5; i++) 这句话的圆括号之间,有一个隐藏的作用域
for(let i = 0; i< 5; i++) {循环体} 在每次执行循环体之前,JS 引擎会把 i 在循环体的上下文中重新声明及初始化一次。

也就是说上面的代码段 2 可以近似近似近似地理解为:
// 代码段 3
var liList = document.querySelectorAll(‘li’) // 共 5 个 li
for(let i=0; i<liList.length; i++){
let i = 隐藏作用域中的 i // 看这里看这里看这里
liList[i].onclick = function(){
console.log(i)
}
}
那样的话,5 次循环,就会有 5 个不同的 i,console.log 出来的 i 当然也是不同的值。
再加上隐藏作用域里的 i,一共有 6 个 i。
这就是 MDN 加那句 let j = i 的原因:方便新人理解。
总得来说就是 let/const 在与 for 一起用时,会有一个 perIterationBindings 的概念(一种语法糖)。
let 到底有没有提升
之前我写过一篇《你一度模糊的 javascript 执行上下文详解》,说到 js 在一段 <script> 或者一个函数,都会生成一个执行上下文,就是 js 会先把声明的变量都 拿出来,并初始化为 undefined, 这就解释了为什么在 var x = 1 之前 console.log(x) 会得到 undefined。
那 let 的执行上下文,会是怎么样的呢?假设代码如下:
{
let x = 1
x = 2
}
我们只看 {} 里面的过程:

找到所有用 let 声明的变量,在环境中「创建」这些变量
开始执行代码(注意现在还没有初始化)

执行 x = 1,将 x「初始化」为 1(这并不是一次赋值,如果代码是 let x,就将 x 初始化为 undefined)
执行 x = 2,对 x 进行「赋值」

这就解释了为什么在 let x 之前使用 x 会报错:
let x = ‘global’
{
console.log(x) // Uncaught ReferenceError: x is not defined
let x = 1
}

原因有两个:

console.log(x) 中的 x 指的是下面的 x,而不是全局的 x
执行 log 时 x 还没「初始化」,所以不能使用(也就是所谓的暂时死区)

看到这里,你应该明白了 let 到底有没有提升:

let 的「创建」过程被提升了,但是初始化没有提升。
var 的「创建」和「初始化」都被提升了。
function 的「创建」「初始化」和「赋值」都被提升了。

get 与 set 的方法

Get 指读取属性时调用的函数
Set 指写入属性时调用的函数。

有这么一道题是这样的:有没有可能存在一个变量同时满足下列条件:
a === 1 && a === 2 && a ===3

有的人可能会觉得这怎么可能变成立呢,一个变量两个值?这边就要引入我们 set 的方法了,我们可以在 window, 设置一个属性 a , 如下定义:
var i = 0;

Object.defineProperty(window, ‘a’,{
get:function() {
i += 1;
return i;
},
})

通过在 window 定义一个 a, 然后每次访问 a 的 i 的值会加作为 a 的值返回,所以我们在控制台输入:

当然这个除了面试感觉没啥软用,但这能告诉你 get, set 有什么用。
Symbol 的巧用
我们知道:ES 6 引入了一个新的数据类型 Symbol,Symbol 可以创建一个独一无二的值(但并不是字符串)。
假如现在有一个对象,里面有一个私有属性,只能自己内部使用,外部调用不到,这时我们可以利用 Symbol 来做:如下:
{
let a = Symbol();
let obj = {
name: ‘ 小智 ’,
age: 18,
[a]: ‘ 这个是私有属性 ’
}
window.obj = obj;
}

如下,我有在外部无语你怎么用,都是调用不到“这个是私有属性”, 你可能会说这个有啥用,我只能回答你装 x 用的,面试可能也会问你 我们如何弄一个隐藏属性呢?答案就是 Symbol , 满婚满婚满婚。
以上,就是 Symbol 的简述,更详细更权威的知识参考下面的自学链接。
MDN:Symbol – JavaScript 阮一峰:ECMAScript 6 入门
参考:
我用了两个月的时间才理解 let
一个笨笨的码农,我的世界只能终身学习

正文完
 0