ES6标准入门 2/26
第一章
ECMAScript6 简介
1.首先经典开头,ECMAScript跟JavaScript的关系,前者是后者的规格,后者是前者的一种实现。在日常场合中,这两个词是可以互换的。
2.ES6可以泛指5.1版本以后的JavaScript。涵盖了ES2015,ES2016,ES2017等。该书中的ES6,一般指的是ES2015标准,但有时也泛指“下一代JavaScript语言”。
3.Babel是一个广为使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境执行。
第二章
let和const命令
1.let声明的代码只在起所在代码块有效。
2.经典for循环
test1:因为let声明只在所在代码块有效。
for(let i=0; i<10;i++){
//...
}
console.log(i);

test2:使用var声明
var a = [];
for (var i = 0; i <10;i++){
a[i] = function() {
console.log(i);
};
}
a[6]();

因为变量i是var声明的,在全局范围内有效,所以全局只有一个变量i,赋给数组a的console.log(i)指向全局的i。也就是说,所有数组都指向同一个i。
test3:使用let声明
var a = [];
for (let i = 0; i <10;i++){
a[i] = function() {
console.log(i);
};
}
a[6]();

变量i仅在本轮循环有效。所以每一次i其实都是一个新的变量,最后输出6.
如果每一次i都是重新声明的,那它怎么知道上一轮循环的值从而计算本轮循环的值呢?
这是因为Js引擎内部会记住上一轮循环的值,初始化本轮的变量为i时,就在上一轮循环的基础上进行计算。
3.不存在变量提升,var命令会发生变量提升的现象,即变量可以在声明之前使用,值为undefined。按照一般的逻辑,变量应该在声明语句之后才可以使用。
为了纠正这种现象,let命令改变了语法行为,必须先声明后使用。
4.暂时性死区(temporal dead zone,简称TDZ)。 只要块级作用域内存在let命令,它所声明的变量就“绑定”这个区域,不在受外部的影响。
var tmp = 123;
if(true){
tmp = 'abc';
let tmp;
}

ES6明确规定,规定,规定。这是规定,难怪之前看文章很难理解这个,根本不需要理解,就是人家给的规定。
如果区块中存在let和const命令,则这个区块对这些命令声明的变量从一开始就形成封闭作用域。只要在声明之前使用这些变量,就会报错。
5.暂时性死区也意味着typeof不再是个百分百安全的操作;
如typeof x;// ReferenceError
let x;
只要在死区,未声明前用了,就会报错。
6.就是要我们养成先声明后使用的习惯,没声明使用就会报错。
隐蔽死区例子
function bar(x=y, y=2){
return [x,y];
}
bar();

调换位置即可,改成(x=2,y=x)
7.暂时性死区的本质:只要进入了当前作用域,所要使用的变量就已经存在,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用变量。
8.块级作用域
ES5只有 全局作用域和函数作用域,没有块级作用域,这导致很多场景不合理
case1:内层变量可能会覆盖外层变量
var tmp = new Date();
function f(){
console.log(tmp);
if(false){
var tmp = 'hello world';
}
}
f();
以上代码的原意是if代码外部使用外层的tmp,内部使用内层的tmp。但是输出的是undefined,原因是变量提升,var tmp,tmp上升为全局变量,tmp往上面找,if是false进不去所以undefined。
case2:用来计数的循环变量泄漏为全局变量
var s = 'hello';
for (var i = 0; i<s.length;i++){
console.log(s[i]);
}
console.log(i);

i只是用来控制循环,却泄漏成为了全局变量。
9.let实际上为javascript新增了块级作用域。
function f1(){
let n=5;
if(true){
let n=10;
console.log("内部n="+n)
}
console.log("外部n="+n)
}
f1();

块级作用域的出现,使得广泛应用的立即执行匿名函数IIFE不在必要了。
10.const声明一个只读的常量。一旦声明,常量的值就不能改变,也就意味着,const一旦声明必须立即初始化。
const实际上保证的并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。
如
const foo = {};
foo.prop = 123;//可以
console.log(foo);
foo = {};

11.Object.freeze 将对象冻结
const foo = Object.freeze({});
foo.prop = 123;//不起作用
console.log(foo);

12.顶层对象的属性与全局变量相关,被认为是JavaScript语言中最大的设计败笔之一。
window.a = 1;
a // a = 2;
window.a //
无法在编译时就提示变量未声明的错误,只有运行时才知道;程序员很容易不知不觉创建全局对象(如打错字);顶层对象的属性是到处都可以读写,不利于模块化编程。
13.ES6开始,全局变量将逐步与顶层对象的属性隔离。
var a = 1;
window.a // let b = 1;
window.b//undefined
ES6标准入门 2/26的更多相关文章
- ES6标准入门之变量的解构赋值简单解说
首先我们来看一看解构的概念,在ES6标准下,允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称作解构,简而言之粗糙的理解就是变相赋值. 解构赋值的规则是,只要等号右边的值不是对象或者数组 ...
- 【学习笔记】ES6标准入门
这里简要记录一下对自己感触比较深的几个知识点,将核心的应用投放于实际的项目之中,提供代码的可维护性. 一.let和const { // let声明的变量只在let命令所在的代码块内有效 let a = ...
- ES6标准入门 第一章:简介
ECMAScript 6 是JavaScript 语言的下一代标准:发布于2015年,又称为ECMAScript 2015. ECMAScript 与 JavaScript 的关系:前者是后者的规范, ...
- ES6标准入门(第三版).pdf----推荐指数⭐⭐⭐⭐⭐
链接: https://pan.baidu.com/s/13RHsyTMNx7s1oMqQeYCm3Q 提取码: ikg3 -------------------------------------- ...
- 《ES6标准入门》(阮一峰)--11.对象的新增方法
1.Object.is() ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===).它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0.J ...
- 《ES6标准入门》(阮一峰)--9.数组的扩展
1.扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 ...
- 《ES6标准入门》(阮一峰)--8.函数的扩展
1.函数参数的默认值 基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log ...
- 《ES6标准入门》(阮一峰)--7.数值的扩展
1.二进制和八进制表示法 ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示. 0b111110111 === 503 // true 0o767 === 503 ...
- Python全栈工程师之从网页搭建入门到Flask全栈项目实战(1) - ES6标准入门和Flex布局
1.简述 1.什么是ES6?ES6, 全称 ECMAScript 6.0,是 JavaScript 的下一个版本标准,2015年6月份发版.ES6的主要目的是为了解决 ES5 的先天不足. 2.了解E ...
随机推荐
- 阿里云centos7安装redis全过程记录
Redis下载地址:https://redis.io/download(这个连接可能得翻墙查看,但是在centos7服务器上安装过程不需要翻墙,我查看了最新的是redis-4.0.9.tar.gz ) ...
- Oracle expdp导出分区表,query条件带有rownum
Oracle expdp导出分区表,query条件带有rownum 前言 在做数据脱敏的时候,对一张刚好是分区表的表做导出,为了只取出部分数据看是否数据可以正常脱敏,在query中带上rownum. ...
- Flutter —快速开发的IDE快捷方式
老孟导读:这是老孟翻译的精品文章,文章所有权归原作者所有. 欢迎加入老孟Flutter交流群,每周翻译2-3篇付费文章,精彩不容错过. 原文地址:https://medium.com/flutter- ...
- 让网页变灰的实现_网站蒙灰CSS样式总汇
每次全国哀悼日,各大网站首页都变成了灰色,添加以下全局CSS样式,可以实现此效果: 方法一 html { -webkit-filter: grayscale(100%);filter:progid:D ...
- 状压DP之排列perm
题目 [SCOI2007]排列 给一个数字串s和正整数d, 统计s有多少种不同的排列能被d整除(可以有前导0).例如123434有90种排列能被2整除,其中末位为2的有30种,末位为4的有60种. 输 ...
- JSOI2015 Salesman(树型DP)
[luogu6082] [题目描述] 某售货员小T要到若干城镇去推销商品,由于该地区是交通不便的山区,任意两个城镇之间都只有唯一的可能经过其它城镇的路线. 小T 可以准确地估计出在每个城镇停留的净收益 ...
- 在windows中使用labelimg工具搭建图像标注小环境
文章分成两个部分,第一部分,labelimg工具的安装:第二部分,labelimg工具的使用方法. 第一部分:工具安装 方法一:直接使用网上编译好的Labelimg可执行文件(12.6M),双击执行即 ...
- HBuilder生成证书
一.安装jdk https://www.oracle.com/java/technologies/javase-downloads.html 二.打开CMD命令到JDK安装目录bin文件夹下 执行命令 ...
- MCU 51-4 独立按键&编码按键
独立按键: 按键的按下与释放是通过机械触点的闭合与断开来实现的,因机械触点的弹性作用,在闭合与断开的瞬间均有一个抖动的过程,抖动必须清除. 按键按下一次,数码管数值加1: #include<re ...
- Chrome浏览器获取XPATH的方法----通过开发者工具获取
chrome有自己的开发者工具,可以用这儿来直接获取xpath,都不用担心正确性了. 具体使用步骤如下: 1.在chrome浏览器的右上角有个选择菜单,也就是这个,点一下: 2.在列表最后面有个“更多 ...