最近用淘宝的weex做了个项目,最近稍微闲下来了。正好很久没有接触RN了,所以趁这个机会系统的学习一下ES6的相关知识。

孔子说:没有对比就没有伤害。所以我们要拿ES6和ES5好好对比的学习。这样才能明白es6是多少的好,积极的拥抱她!

1.let

用let声明的变量,只会在let命令所在的代码块内有效。

let的块状作用域

我们来看一个简单的例子:

'use strict';
{
let name = 'cloud';
var age = ;
}
name;//ReferenceError: name is not defined
age;//

我们在let声明变量name的代码块之外去访问这个变量,结果name是没有定义的。如果我们希望在能访问到name应该怎么做呢?

'use strict';
{
let name = 'cloud';
var age = ;
name;//cloud
}

没错,我们在let声明变量的代码块中去访问name变量。结果也正如我们期望的那样,name的值被访问到了。对于高级oo语言而言,他们都是基于块状作用域的。

所以说,let让我们声明的变量也拥有了块状作用域这样一个概念,而不仅仅是函数作用域了。

既然有了块级作用域,那把let用来声明循环里的变量是极好的。

'use strict';
//死循环
for(var i = ; i < ; i++){
console.log(i);
for(var i = ; i < ; i++){
console.log(i);
}
} for(let i = ; i < ; i++){
console.log(i);
for(let i = ; i < ; i++){
console.log(i);
}
}

如果没有let的话,上面代码中的内循环每次都会把var声明的变量i重置为0,所以毫无疑问,这是一个死循环。所以我们必须把内循环中变量i换成变量j,或者其他的名称。但是这也会带来一个副作用,就是循环完成以后的i,被泄露成了全局变量。

'use strict';
for(var i = ; i < ; i++){
i;//0,1,2,3,4
}
i;//
for(let i = ; i < ; i++){
i;//0,1,2,3,4
}
i;//ReferenceError: i is not defined

let声明的变量不存在变量声明提升

'use strict';
name; //undefined
age; //ReferenceError: age is not defined
var name = 'cloud';
let age = ;

用var声明的变量name,虽然我们在name使用后才声明并给其赋值,但是因为变量声明提升的原因,我们看到name已经声明了,只是其值是undefined而已。但是用let声明的age变量,却没有定义。所以说let是不存在变量声明提升的。

let的暂时性死区(temporal dead zone,简称TDZ)

只要是块级作用域中存在let命令,它所在的区域就成为了暂时性死区,使用let命令声明变量之前,该变量都是不可用的。同时该变量不再受到外部的影响。

var name = 'new cloud';
{
//TDZ start
name = 'cloud';
name;//ReferenceError: name is not defined
let name;
   //TDZ end
name;//undefined
let name = 'cloud';
name;//cloud
}

如上代码,在let声明name之前,那么这个变量都是不可用的。所以这也带来一个问题,当我们使用typeof这样的反射机制来检测我们的所需的变量是否按照我们设想的那样,typeof不再是一个坚定不移的忠臣了,它也会报错了。

{
typeof name;//undefined
var name = 'cloud';
typeof name;//ReferenceError: name is not defined
let name = 'cloud';
}

let块状作用域内声明的变量,不允许重复声明。

1.
'use strict';
var name = 'cloud';
var name = 'new cloud';
name;//new cloud
2.
'use strict';
{
let name = 'cloud';
var name = 'new cloud';
name;
let name = 'cloud';
var name = 'new cloud';
name;
let name = 'cloud';
let name = 'new cloud';
name;
//SyntaxError: Identifier 'name' has already been declared
}

第二段代码中的所有声明方式,都会报错。name已经被声明。

'use strict';
function setName(name){
let name = name;//SyntaxError: Identifier 'name' has already been declared
{
let name = 'new cloud';
console.log(name);//new cloud
}
console.log(name);//cloud
}
setName('cloud');

同样,在函数中重新声明变量也会报错的。

2.const

const是一个只读的常量。一旦声明,就不可更改。

'use strict';
const PI = 3.14;
PI = 3.1415;//TypeError: Assignment to constant variable

如果用const声明了常量,但是并没有去初始化它。那么,也是会报错的。

'use strict';
const PI;//SyntaxError: Missing initializer in const declaration

同样,const的作用域与let命令相同:只在声明所在的块级作用域内有效。const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。const声明的常量,也与let一样不可重复声明。

如果我们用const来声明一个引用类型的话。const只能保证指针域不变,但是并不能保证数据域是不可变更的。

'use strict';
const employee = {};
employee['name'] = 'cloud';
employee['age'] = ; employee = {}; //TypeError: "employee " is read-only
employee['name'] = 'new cloud';
console.log(employee.name);//new cloud

如果想把一个对象完成的冻结的话,应该是用Object.freeze()方法。

const employee = Object.freeze({});
employee.name= 'cloud';//TypeError: Can't add property prop, object is not extensible

ES6学习笔记之变量声明let,const的更多相关文章

  1. ES6学习笔记之变量的解构赋值

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  2. ES6学习笔记一:let、const、解构赋值

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7236342.html 感谢阮一峰老师的无私奉献,开源推动世界!教程地址:http://es6.ruanyife ...

  3. 批处理学习笔记3 - 变量声明和goto代替while循环

    批处理中没有while循环,只能用goto代替.下面是代码 @echo off set /a i = 0 :again echo %i% set /a i= %i% + 1 if %i% lss 10 ...

  4. ES6学习笔记(2)----变量的解构和赋值

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 变量的解构和赋值 本质上:只要模式匹配,左边的变量就能被赋予右边对应的值 原则: 解构赋值的规则 ...

  5. scala学习笔记:变量声明中的模式

    先看个正常的写法: scala> val x = 1 x: Int = 1 体会一下元组的写法: scala> val (x,y,z)=(1,2,3) x: Int = 1 y: Int ...

  6. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

  7. es6 快速入门 系列 —— 变量声明:let和const

    其他章节请看: es6 快速入门 系列 变量声明:let和const 试图解决的问题 经典的 var 声明让人迷惑 function demo1(v){ if(v){ var color='red' ...

  8. es6学习笔记-class之一概念

    前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...

  9. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

随机推荐

  1. C# 中 in,out,ref 的作用与区别

    In:过程不会改写In的内容 Out和out:传入的值不会被过程所读取,但过程可以写 ref:传入的值,过程会读,也会写 就象你把布料送到裁缝的一个收料箱(裁缝用这个区别是哪家客户) IN:这块布料, ...

  2. ubuntu各版本代号(更新至15.04)及各版本下载地址等

    版本号 代号 发布时间 15.04 Vivid Vervet 2015/04/22 14.10 Utopic Unicorn 2014/10/23 14.04 LTS Trusty Tahr 2014 ...

  3. lodash forIn forOwn 遍历对象属性

    _.forIn(object, [iteratee=_.identity]) 使用 iteratee 遍历对象的自身和继承的可枚举属性. function Foo() { this.a = 1; th ...

  4. Windows网络配置脚本

    静态ip和动态ip切换 适用于:公司学校家庭的网络环境切换[请修改具体ip地址] ::ip for win7.bat::win8以上请用ipv4替换ip @echo off 设置为静态IP 设置为动态 ...

  5. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅(五)—— 解决tabs选择已建tab显示但datagrid的toolbar消失的问题

    项目需要反复运行,调整bug.发现在选择已有选项卡时,虽然不需要再新建tab,直接跳转到已有的tab上,但问题是显示的datagrid有事会出现toolbar消失的问题.网上也有不少同学出现类似问题, ...

  6. Android自定义Toast

    1.http://www.cnblogs.com/salam/archive/2010/11/10/1873654.html 2.

  7. 采用CDN加速后,如何在程序里获取用户IP地址

    现在很多网站用了CDN技术,但采用CDN技术后,原来用来获取访问源的IP地址的程序已不能正常使用,它拿到的并不是访问源的真实IP地址,而是CDN节点的IP地址,解决方法是对获取IP的代码作一点小改动. ...

  8. tony_CENTOS启动方式设置

    方法: 在etc文件夹下面有个初始加载文件是用来启动系统的,系统在启动的时候先去env中找到shell的必要配置,然后把shell启动起来,那么再然后就要启动整个系统了,到底是启动图形界面呢,还是字符 ...

  9. 贯通tomcat --- 电子书

    http://www.educity.cn/jiaocheng/j10865.html 第1章 认识Tomcat [本章导读] Tomcat服务器是一个免费的开放源代码的Web应用服务器.它是Apac ...

  10. Atitit.code base view 视图的实现原理

    Atitit.code base view 视图的实现原理 1. 视图的执行算法:1 2. 不可更新的视图:1 3. 关于视图的可插入性:insert2 4. 视图定义3 5. 调用3 1. 视图的执 ...