文档章节

es6 let使用总结

莫西摩西
 莫西摩西
发布于 09/25 12:55
字数 825
阅读 3
收藏 0

中午偷个闲做个es6let的使用总结

作用域块

  • 在作用域块中声明的变量不受外部的影响,见例子
{
let a= 10;
{
let a= 20;
console.log('子作用域', a);// 20
}
console.log('父作用域', a);// 10
}
  • let声明的变量只在let命令所在的代码块中有效,见例子
// 例子一
{
let a= 10;
var b= 20;
}
console.log(a)  // ReferenceError: a is not defined.会报引用错误
console.log(b)  // 20 

//例子二
// 使用var声明,则会提升为外层变量,次例子中的i提升为外层变量,也就是提升到上一个执行上下文
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 循环执行完后,i被赋值为10,所以最终结果为10

// 使用let申明i,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6
// for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6
  • ES6 的块级作用域允许声明函数的规则,只在使用大括号的情况下成立,如果没有使用大括号,就会报错。
  • 考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句
'use strict';
{
if (true) // 报错
function func() {

}
}

没有变量提升(这个好理解就不说了)


暂时性死区(借用阮一峰老师的说辞)

  • 在使用let声明之前,该变量是不可使用的,不然会报错,见栗子:
{
let a= 10;
{
// 在该作用域里面,a还没有声明完成
console.log(a); // ReferenceError: a is not defined
let a= 20;   // 如果这里不声明就不会报错,则a引用的是父作用域的a
console.log(a); // 20
}
}

不允许在作用域内重复申明同一个变量,见例子

// 报语法错误
{
let a= 10;
let a= 20; 
}
// 所以不能在函数内部重新声明参数
function func(arg) {
let arg= 20;
}

意义

  • ES6 规定暂时性死区和let、const语句不出现变量提升, 主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为
  • 内部变量可能覆盖外层变量
var a= 10;
function func(){
console.log(a);  // undefined
if(false) {
var a= 20; // 在该执行上下文里,'变量对像'创建的过程中会做变量提升,确定作用域链,所以console时输出的是内部这个a,并不会改变外层的a,相当于重新申明了一个变量a,指向不同于外层a变量的栈内存的地址,也由于不同的执行上下文,不同的变量对像
}
}
func() 
console.log('外层a',a)  // 10

© 著作权归作者所有

共有 人打赏支持
上一篇: es6 const总结
下一篇: h5语义化标签
莫西摩西
粉丝 5
博文 125
码字总数 46825
作品 0
广州
程序员
私信 提问
ECMAScript 6 let 命令介绍

一、使用 let 命令来声明变量的总结 ES6新增了let命令 ,它是一个块级域的局部变量,并且可以给它一个初始化值。let允许把变量的作用域限制在块级域中。与 var 不同处是:var申明变量要么是全...

AAASSSSddd
2016/11/30
16
0
ES6、ES7、ES8特性-学习提炼总结(一)

ES6 ECMAScript 6.0,简称ES6是JavaScript语言的下一代标准,在2015年6月发布。目的是让JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 Babel转码器 Babel是一个广泛使...

永远保留内心的简单和单纯
11/22
0
0
前端面试之ES6篇(高产似母猪)

这也是前端面试经常询问的问题,经常问你es6出现了哪些新的特性,平时又使用过那些。在编写此教程的时候,第一句话往往就是面试常常问到的地方,然后后面就是他的详细解释,面试要求的内容我...

B_Cornelius
07/02
0
0
前端开发者不得不知的 ECMAScript 6 十大特性

ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。 本文主要针对ES6做一个简要介绍。 ...

oschina
2016/03/16
25.9K
24
Nodejs下的ES6兼容性与性能分析

ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大家仍很疑惑,使用ES6会有...

ouven
2015/12/09
7K
13

没有更多内容

加载失败,请刷新页面

加载更多

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
13分钟前
0
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
31分钟前
12
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
32分钟前
1
0
Confluence 6 文档主题合并问答

在 Confluence 官方 前期发布的消息 中,文档主题在 Confluence 6.0 及其后续版本中已经不可用。我们知道你可能对这个有很多好好奇的问题,因此我们在这里设置了一个问答用于帮助你将这个主题...

honeymose
今天
2
0
java框架学习日志-2

上篇文章(java框架学习日志-1)虽然跟着写了例子,也理解为什么这么写,但是有个疑问,为什么叫控制反转?控制的是什么?反转又是什么? 控制其实就是控制对象的创建。 反转与正转对应,正转...

白话
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部