ES6 let命令和块级作用域和const命令
2018年3月7日
ES6 let命令和块级作用域和const命令
一、let命令
1.ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
{ let a = 10; var b = 1; } console.log(b);//1 console.log(a);//Uncaught ReferenceError: a is not defined
上面代码let声明的变量只在它所在的代码块有效。
2.计数器i只在for循环体内有效,for循环设置循环变量的那部分是一个父作用域,循环体内部是一个单独的子作用域。
for (let i = 0; i < 10; i++) { //... } console.log(i);//Uncaught ReferenceError: i is not defined
上面代码中,计数器i只在for循环体内有效,在循环体外引用就会报错。
var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6]();//10
上面代码中,变i量是var命令声明的,i是全局变量。每一次循环,变量i的值都会发生改变,而循环内被赋给数组a的函数内部的console.log(i)的i指向全局的i。导致运行时输出的是最后一轮的i的值,也就是 10。
var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6]();//6
上面代码中,变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。
for (let i = 0; i < 3; i++) { let i = 'hello'; console.log(i); } //hello //hello //hello
上面代码中,输出3次hello。函数内部的变量i与循环变量i不在同一个作用域,有各自单独的作用域。for循环有一个特别之处,设置循环变量的那部分是一个父作用域,循环体内部是一个单独的子作用域。
3.不存在变量提升。let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。
console.log(a);//undefined var a = 1; console.log(b);//Uncaught ReferenceError: b is not defined let b = 1;
上面代码中,变量a用var命令声明,会发生变量提升,脚本开始运行时,变量a已经存在了,但没有值,所以会输出undefined。变量b用let命令声明,不会发生变量提升。在声明它之前,变量b是不存在的,这时就会抛出一个错误。
4.暂时性死区。暂时性死区和let、const语句不出现变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有声明变量后,才可以获取和使用该变量。
var a = 123; if (true) { a = 'hello'; // ReferenceError let a; }
上面代码中,全局变量a已经存在,在当前作用域中声明之后才可以使用。
typeof x; // ReferenceError let x;
上面代码中,在声明之前typeof运行时抛出一个ReferenceError。
typeof a;//undefined
如上,变量a没有被声明,typeof不报错,“暂时性死区”意味着typeof不再是百分之百安全的操作。
function a(x = y, y = 2) { return [x, y]; } a();//Uncaught ReferenceError: y is not defined
如上,参数x默认值等于另一个参数y,而此时y还没有声明,属于“死区”,这里是隐式声明容易犯错。
function a(x = 2, y = x) { return [x, y]; } a();//[2, 2]
如上隐式声明,y的默认值是x,就不会报错,此时x已经声明了。
5.不允许重复声明,不允许在相同作用域内重复声明,不能在函数内部重新声明参数。
function func() { let a = 10; let a = 1; } // ReferenceError 报错 function func() { let a = 10; var a = 1; } // ReferenceError 报错
不允许在相同作用域内,重复声明同一个变量。
function func(arg) { let arg; // ReferenceError 报错 } function func(arg) { { let arg; // undefined 不报错 } }
不能在函数内部重新声明参数。
二、块级作用域
1.块级作用域,ES5 只有全局作用域和函数作用域,没有块级作用域,带来很多不合理的场景。块级作用域允许任意嵌套,外层作用域无法读取内层作用域的变量,内层作用域可以定义外层作用域的同名变量,块级作用域写法可以替代立即执行函数表达式(IIFE)。
var tmp = new Date(); function f() { console.log(tmp); if (true) { var tmp = 'hello world'; } } f();// undefined
上面代码中,if代码块的外部使用外层的tmp变量,内部使用内层的tmp变量。但是,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。
var s = 'hello'; for (var i = 0; i < s.length; i++) { console.log(s[i]); } console.log(i);
上面代码中,变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量。
function f() { let n = 5; if (true) { let n = 10; } console.log(n); // 5 } f();// 5
上面代码中,外层代码块不受内层代码块的影响。
{{{{{let a = 'Hello World'}}}}}; {{{{ {let a = 'Hello World'} console.log(a); // 报错 }}}};
上面代码中,块级作用域允许任意嵌套,外层作用域无法读取内层作用域的变量。
{{{{ let a = 'Hello World'; {let a = 'Hello World'} }}}};
上面代码中,内层作用域可以定义外层作用域的同名变量。
// IIFE 写法
(function () { var a = ...; }()); // 块级作用域写法 { let a = ...; }
上面代码中,块级作用域的出现,实际上使获得广泛应用的立即执行函数表达式(IIFE)不再必要了。
2.块级作用域与函数,函数在块级作用域之外不可引用,应避免在块级作用域内声明函数,如果确实需要,也应该写成函数表达式,而不是函数声明语句,只在使用大括号的情况下成立。
// 浏览器的 ES6 环境 function f() { console.log('I am outside!'); } (function () { if (false) { // 重复声明一次函数f function f() { console.log('I am inside!'); } } f(); }()); // Uncaught TypeError: f is not a function
ES6 规定,块级作用域之中允许声明函数,语句的行为类似于let,在块级作用域之外不可引用。
上面代码在ES6环境中,实际运行代码如下:
// 浏览器的 ES6 环境 function f() { console.log('I am outside!'); } (function () { var f = undefined; if (false) { function f() { console.log('I am inside!'); } } f(); }()); // Uncaught TypeError: f is not a function
如上,考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。
// 函数声明语句 { let a = 'secret'; function f() { return a; } } // 函数表达式 { let a = 'secret'; let f = function () { return a; }; }
如上,如果确实需要,也应该写成函数表达式,而不是函数声明语句。
// 不报错 'use strict'; if (true) { function f() {} } // 报错 'use strict'; if (true)function f() {}
如上,ES6 的块级作用域允许声明函数的规则,只在使用大括号的情况下成立,如果没有使用大括号,就会报错。
三、const命令:const声明一个只读的常量。一旦声明变量,就必须立即初始化,不能留到以后赋值。只在声明所在的块级作用域内有效。存在暂时性死区,只能在声明的位置后面使用。不可重复声明。声明常量的值不能改变(数值、字符串、布尔值),对于复合类型的数据(对象和数组)需要冻结。
1.必须立刻初始化。
const a;// SyntaxError: Missing initializer in const declaration
2.const的作用域与let命令相同:只在声明所在的块级作用域内有效。
{ const a = 1; } a // ReferenceError: a_d is not defined
3.const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。
{ console.log(a);// ReferenceError: a is not defined const a = 1; }
4.const声明的常量,与let一样不可重复声明。
{ var a = 1; let b = 'hello'; const a = 2; // SyntaxError: Identifier 'a' has already been declared const b = 'world'; // SyntaxError: Identifier 'b' has already been declared }
5.常量的值不能改变,将一个复合类型数据(对象、数组)声明为常量必须非常小心,需要冻结对象使用Object.freeze方法,。
const a = 1; a = 2;// TypeError: Assignment to constant variable.
对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针,const只能保证这个指针是固定的,至于它指向的数据结构是不是可变的,就完全不能控制了。
{ const a = ['hello']; a.push('world'); console.log(a); // ["hello", "world"] a = ['js']; // TypeError: Assignment to constant variable. }
如上,数组a本身是可写的,但是如果将另一个数组赋值给a,就会报错。
{ const a = Object.freeze(['hello']); a.push('world');// TypeError: Cannot add property 1, object is not extensible }
如上,想将对象冻结,应该使用Object.freeze方法。
{ const a = ['hello']; let func = (obj) => { Object.freeze(obj); Object.keys(obj).forEach( (key, i) => { if ( typeof obj[key] === 'object' ) { func( obj[key] ); } }); }; func(a); Object.isFrozen(a); // true }
如上,除了将对象本身冻结,对象的属性也应该冻结,使用Object.isFrozen方法检测是否冻结返回true。
ES6改变了很多,更加有逻辑性,目前还没有完全支持ES6的JavaScript代理(无论是浏览器环境还是服务器环境),热衷于使用语言最新特性的开发者需要将ES6代码转译为ES5代码。尽管ES6做了大量的更新,但是它依旧完全向后兼容以前的版本,标准化委员会决定避免由不兼容版本语言导致的“web体验破碎”。结果是,所有老代码都可以正常运行,整个过渡也显得更为平滑,但随之而来的问题是,多年的老问题依然存在。
Babel转化工具
ES6兼容性
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║ Vue前篇:ES6初体验 & 模块化编程
缘起 昨天说到了《[从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this](https://www.cnblogs.com/laozhang-is-phi/p/9580807.html)》,通过总体来看,好像大家对这一块不是很感兴趣,嗯~~这一块确实挺枯燥的,不能直接拿来代码跑一下那种,不过还是得说下去,继续加油吧!如果大家对昨天的小demo练习的话,相信现在已经对JS的面向对象写法很熟悉了,如果嵌套字面量定义函数,如何使用this关键字指向。今天呢,主要说一下ES6中的一些特性技巧,然后简单说一下模块化的问题,好啦,开始今天的讲解~ 还是老规矩,一言不合就是上代码 str1 = 'Hello JS!'; function fun1() { var str1 = 'Hello C#!'; } fun1(); alert(str1); 大家猜猜,最后会弹出来哪一句话? 零、今天要完成浅紫色的部分 一、什么是传说中的ES6 这些定义网上一大堆,不过还是粘出来,大家可以统一看一下,简单了解了解: 1、定义 ECMA...
- 下一篇
JS ES6 加减乘除法小数浮点数计算BUG解决
2018年3月6日 JS ES6 加减乘除法小数浮点数计算BUG解决 //检测是否为数字 let num = (a) => { if(a != null && a.toString() != "") { let r = /^-?(0|[1-9]+\d*|[1-9]+\d*\.\d+|0\.\d+)$/; if(r.test(a.toString())) { return true; } } return false; } //加法 let plus = (a, b) => { if(!num(a) || !num(b)) { return null; } let c, d, m; try { c = a.toString().split(".")[1].length; } catch(e) { c = 0; } try { d = b.toString().split(".")[1].length; } catch(e) { d = 0; } m = Math.pow(10, Math.max(c, d)); return(a * m + b * m) / ...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS关闭SELinux安全模块
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- 设置Eclipse缩进为4个空格,增强代码规范
- MySQL8.0.19开启GTID主从同步CentOS8
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Docker安装Oracle12C,快速搭建Oracle学习环境
- CentOS7安装Docker,走上虚拟化容器引擎之路