ECMAScript6入门系列一
let 命令
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
【注】:let与var相似,用来声明变量.但是只在它所在的代码块内有效
for (let i = 0; i < 10; i++) {}
console.log(i); //Uncaught ReferenceError: i is not defined
console.log(foo); // 输出undefined
console.log(bar); // 报错ReferenceError
var foo = 2;
let bar = 2;
【注】:let不存在变量提升的概念
if (true) {
// TDZ开始
tmp = 'abc'; // ReferenceError
console.log(tmp); // ReferenceError
let tmp; // TDZ结束
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}
【注】:如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。这在语法上,称为“暂时性死区”(temporal dead zone,简称TDZ)。
块级作用域
// 报错
function () {
let a = 10;
var a = 1;
}
// 报错
function () {
let a = 10;
let a = 1;
}
【注】:let不允许在同一作用域内重复声明一个变量
function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}
【注】:let实际上给代码新增了块级作用域
// IIFE写法 匿名函数
(function () {
var tmp = ...;
...
}());
// 块级作用域写法
{
let tmp = ...;
...
}
【注】:块级作用域使得匿名函数显得不是那么必要了
ES5规范规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。(然后浏览器并不吃这一套,浏览器照样运行,除非在严格模式'use strict'下);而ES6引入了块级作用域的概念,则可以在块中声明函数,但是跟let一样,不可以在其他块中引用声明的函数,否则会报错(因为此规范影响大,具体还要看各浏览器对此的实现情况).
例如:
// 情况一
if (true) {
function f() {}
}
// 情况二
try {
function f() {}
} catch(e) {
}
// ES6严格模式
'use strict';
if (true) {
function f() {}
}
// 不报错
const命令
1.作用:声明一个常量,
2.特点:
- 一旦声明,常量的值不能改变.
- const一旦声明变量,就必须立即初始化,不能留到以后赋值。
const的作用域与let命令相同:只在声明所在的块级作用域内有效。
const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。const声明的常量,也与let一样不可重复声明。
//eg.1
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
//eg.2
const foo;
// SyntaxError: Missing initializer in const declaration
//eg.3
if (true) {
const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined
//eg.4
if (true) {
console.log(MAX); // ReferenceError
const MAX = 5;
}
//eg.5
var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;
//eg.6
const foo = {};
foo.prop = 123;
foo.prop
// 123
foo = {}; // TypeError: "foo" is read-only
//eg.7
const a = [];
a.push('Hello'); // 可执行
a.length = 0; // 可执行
a = ['Dave']; // 报错
先到这~
ECMAScript6入门系列一的更多相关文章
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- ABP入门系列(1)——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- ABP入门系列(2)——通过模板创建MAP版本项目
一.从官网创建模板项目 进入官网下载模板项目 依次按下图选择: 输入验证码开始下载 下载提示: 二.启动项目 使用VS2015打开项目,还原Nuget包: 设置以Web结尾的项目,设置为启动项目: 打 ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...
随机推荐
- Extjs中grid行的上移和下移
一.将up和down按钮放到tbar中,然后选中grid行即可实现上移和下移 var up = new Ext.Action({ text : 'Up', icon : 'up.png',//或者添加 ...
- POJ1050:To the max
poj1050:http://poj.org/problem?id=1050 * maximum-subarray 问题的升级版本~ 本题同样是采用DP思想来做,同时有个小技巧处理:就是把二维数组看做 ...
- strace使用详解
(一) strace 命令 用途:打印 STREAMS 跟踪消息. 语法:strace [ mid sid level ] ... 描述:没有参数的 strace 命令将所有的驱动程序和模块中的所 ...
- Codeforces Round #311 (Div. 2) D - Vitaly and Cycle(二分图染色应用)
http://www.cnblogs.com/wenruo/p/4959509.html 给一个图(不一定是连通图,无重边和自环),求练成一个长度为奇数的环最小需要加几条边,和加最少边的方案数. 很容 ...
- jQuery事件绑定的最佳实践
如果你经常使用jQuery,那么你也许很熟悉事件绑定.这是很基本的东西,但是深入一点,你就能够找到机会让你事件驱动的代码变得不太零碎,并且更容易管理. 更好的选择器策略 让我们从基础的例子开始.下面的 ...
- Android之发送短信和接收验证码
最近项目需求需要发送短信和接收验证码并将验证码显示在输入框中 以下是我的记录 前提---权限 <uses-permission android:name="andro ...
- UVA Knight Moves
题目例如以下: Knight Moves A friend of you is doing research on the Traveling Knight Problem (TKP) where ...
- 我的Android开发相关文章
Pro Android学习笔记: Pro Android学习笔记(一零七):2D动画(2):layout渐变动画 2014.7.25 Pro Android学习笔记(一零六):2D动画(1):fram ...
- Android ListView分页加载时图片显示问题
场景:Android ListView需要分页加载,每个item中会有图片,图片又是从网络下载的. 问题:在滑动加载下一页时,上一页的图片明明已经下载完成了,但是无法显示出来. Bug重现: 1,加载 ...
- MAC终端显示隐藏文件,关闭显示
1.显示隐藏文件夹显示:defaults write com.apple.finder AppleShowAllFiles -bool true (1)复制“defaults write com.ap ...