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

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

let 的使用

我们知道 let 主要有三个特性：

1. let 声明的变量的作用域是块级的 (es5中只有全局和函数作用域)
2. let 不能重复声明已存在的变量；
3. 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 为了简化知识，隐瞒了什么？

经过我们方方老师大佬饥渴精神，不断的查资料，最后他总结这么几句自己的理解：

1. for( let i = 0; i< 5; i++) 这句话的圆括号之间，有一个隐藏的作用域
2. 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 = 1x = 2
}

我们只看 {} 里面的过程：

1. 找到所有用 let 声明的变量，在环境中「创建」这些变量
2. 开始执行代码（注意现在还没有初始化）
3. 执行 x = 1，将 x 「初始化」为 1（这并不是一次赋值，如果代码是 let x，就将 x 初始化为 undefined）
4. 执行 x = 2，对 x 进行「赋值」

这就解释了为什么在 let x 之前使用 x 会报错：

let x = 'global'
{console.log(x) // Uncaught ReferenceError: x is not definedlet x = 1
}

原因有两个：

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

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

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

get 与 set 的方法

1. Get指读取属性时调用的函数
2. 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

一个笨笨的码农，我的世界只能终身学习