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 ...
随机推荐
- 用BigDecimal类实现Fibonacci算法
Fibonacci(N)=Fibonacii(N-1)+Fibonacci(N-2) 其中 Fibonacci(0)=0;Fibonacci(1)=1 用循环或则递归实现Fibonacci算法很简单, ...
- 查找无用代码Dead Code的一些心得
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:查找无用代码Dead Code的一些心得.
- CSS Grid layout布局
CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.你只需要定义一个容器元素并设置display:grid,使用gr ...
- MongoDB 的创建、查询、更新、删除
MongoDB数据库中,创建.查询.更新.删除操作的对象是集合. 1.查看某个数据库中有哪些集合,在此之前需要使用数据库 C:\Windows\system32>mongo MongoDB sh ...
- IOS ScrollowView 滑动到边缘后不允许再拖动
当scrollowview滑动图片时,滑动到最后一张图本应该不让其滑动,但是如果不可以去设置属性,依然可以滑动,露出白色的底色,挺影响美观的, 可以设置其属性: sv.bounces=NO; 这样就不 ...
- ubuntu上如何安装和卸载google chrome 浏览器
切换到安装文件目录 $ sudo dpkg -i file_name.deb 如果有错误,请运行以下命令 $ sudo apt-get -f install or $ sudo apt-get ins ...
- 引用js或css后加?v= 版本号的用法(转)
<span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?version ...
- orczhou----MYSQL
https://yq.aliyun.com/users/1597777588650149?spm=5176.blog11192.yqblogcon1.2.5mdGQb
- Android 读取手机短信
获取android手机短信需要在AndroidManifest.xml加权限: <uses-permission android:name="android.permission.RE ...
- cglib源码分析(一): 缓存和KEY
cglib是一个java 字节码的生成工具,它是对asm的进一步封装,提供了一系列class generator.研究cglib主要是因为它也提供了动态代理功能,这点和jdk的动态代理类似. 一. C ...