脚本宝典收集整理的这篇文章主要介绍了Es6：新手第一篇 let 和 const，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
Es6 let 和 const
-
基本用法
let a = 10
console.LOG(a) //10
// 代码块内执行
{
let b = 5
console.log(b) // 5
}for循环内也是比较试用
for (let i =0;i<3;i++) {
console.log(i) // 0，1，2
}
-
Es6 let命令只在所在的代码块内使用（块级作用域）
例1 使用let在函数代码块内使用，ES5中是没有块级作用域的，Es6中的let实际上是为Javascript新增了块级作用域，其实在声明a为10的代码块中则为一个块级作用域，if代码块中也是块级作用域，这就表明了现在有两个块级作用域，重点来了外层代码块不受内层代码块影响，所以a在不同的地方打印出的结果不同
function f() {
let a = 10
if (1===1) {
let a = 5
console.log(a) // 5
}
console.log(a) // 10
}
f()
例2 这个循环的例子let声明了之后，在循环{}代码块内都属于i的块级作用域内，所以在里面怎么打印都会有结果，而在循环外部打印i的结果则是未定义
for (let i =0;i<3;i++) {
console.log(i) // 0，1，2
}
console.log(i) // 这样会报错 i is not defined然而var则不一样，var也是声明变量，它则在全局范围内有效，让我们来看看
例1 现在看看VAR定义了变量，在内部可以打印出小于三的每个结果，在代码块外层同样可以得到结果，但是结果和代码块内的不一样，这是因为外层的i是拿到了循环完成之后的结果
for (var i =0;i<3;i++) {
console.log(i) // 0，1，2
}
console.log(i) // 3 为什么会得到3，是因为for循环从0开始执行，i++，1然后是2，只执行2次
例2 这里使用var得到的结果全是5，我们来分析一下它的执行步骤，首先执行的函数，声明变量a为10，if代码块，然后再次声明a为5（内层改变外层），打印5，执行出代码块再次打印a时，此时a的值已经被改变5
function f() {
var a = 10
if (1===1) {
// 在一个代码块的中变量并不会覆盖掉代码块外面的变量
var a = 5
console.log(a) // 5
}
console.log(a) // 5
}
f()
-
Es6 let 不存在变量提升和暂时性死区
例1 测试let不存在变量提升
{
console.log(foo) // 报错ReferenceError
let foo = 1
}如果存在变量提升的话上面的代码执行应该是
{
let a
console.log(a) //undefined
a=2
}例2 如果使用let这样操作执行到if会报错，因为let不存在变量提升
function func() {
if (typeof let == 'undefined') {
}
let val = ''
}我们来看看var的变量提升是什么样的，与let区别在哪里
例1 var的变量提升（值不提升）
{
console.log(foo) // undefined
var foo = 1
}例2 var变量提升（先判断后声明），这样就不会报错
function func() {
if (typeof val == 'undefined') {
}
var val = ''
}let 存在的暂时性死区社么为let的死区，只要是在let声明之前则为死区
-
let 声明在同层代码块内，不可以重复声明
例1 在一个函数内声明相同的变量名，使用let，这样会报错，如果使用var就会报错
func()
function func() {
let a = 1
let a = 2
console.log(a, 'xx')
}
例2 现在我们来看看var的执行结果,var 是可以重复声明的
func()
function func() {
var a = 1
var a = 2
console.log(a, 'xx') // 2
}
-
作用域和函数声明
ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明，接下来我们来看看Es5中没有块级作用域，下面的例子执行函数f()打印出的结果为I am inside!因为if内函数会被提升到顶部，然而在es6中理论的结果为I am outside!，但是会报错！
function f() { console.log('I am outside!'); }
(function () {
if (false) {
// 重复声明一次函数f
function f() { console.log('I am inside!'); }
}
f()
}())以上之所以会在浏览器内报错因为在Es6浏览器中块级作用域的声明相当于var声明的变量（变量提升），所以我们尽量写函数表达式而不是函数声明语句,下面这个在Es6浏览器中得到的结果则为I am outside!，内层作用域不影响外层作用域，如果将let 替换成 var 将还是会报错！
function f() { console.log('I am outside!'); }
(function () {
if (false) {
// 重复声明一次函数f
let f = function f() { console.log('I am inside!'); }
}
f()
}())
例1 创建函数有两种方法一种是表达式，一种是函数声明，下面的去掉foo的代码会正常执行，这就是区别
function test() {
foo() // foo not fun
bar()
var foo = function () { // 变量提升
alert("this won't run!");
}
function bar() {
alert("this will run!");
}
}
test()
-
const声明只读常量，常量一旦声明就不能改变，与变量的区别就在上面
//const一旦声明变量，就必须立即初始化，不能留到以后赋值。
const foo
//const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用
console.log(a) // 会报错
const a = 1
// const声明的常量，也与let一样不可重复声明,以下都会报错
const b = 1
const b = 2
// 正确的声明只需声明一次
const c = 1
console.log(c) //1
它的本质说白了就是指向内存的数据不得改的，但是还有另一种情况
const foo = {};
// 为 foo 添加一个属性，可以成功
foo.PRop = 123;
foo.prop = 321;
console.log(foo.prop); // 321
foo = {} // 就会报错，不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。
Es6声明变量的6种方法（var，function （es5）），let，const， import， class
-
顶层对象window和global对象（这里可以看看文档就行，最重要的可以多看看this）
浏览器window：Es6中的六种方法声明的变量，使用window都可以拿到，因为顶层对象的属性与全局变量是等价的
global：ES5 的顶层对象，本身也是一个问题，因为它在各种实现里面是不统一的。
浏览器里面，顶层对象是window，但 Node 和 Web Worker 没有window。
浏览器和 Web Worker 里面，self也指向顶层对象，但是 Node 没有self。
Node 里面，顶层对象是global，但其他环境都不支持。
以上是脚本宝典为你收集整理的Es6：新手第一篇 let 和 const全部内容，希望文章能够帮你解决Es6：新手第一篇 let 和 const所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。