一项新技术的出现肯定是为了解决一些问题,那么ES6的出现主要是解决了哪些问题?它的出现给我们带来了什么便利?当它没有出现的时候,某些问题怎么处理?ES6的方法和以前的方法比较又有什么不同呢?根据提出的这些问题,我开始了ES6学习之旅。

ES6是在ES5的基础上对语法进行了修正以及添加了一些新的功能, 具体修正了哪些语法与添加了哪些新的功能,那就开始学习吧。

     let           

        ES6新增加了let命令,用于变量声明,与var的用法类似,不同的是所声明的变量只在let命令所在的代码块内有效。

{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b //

以下代码会输出10,因为 i 是var声明的,在全局范围内都有效。所以每一次循环,新的 i 值都会覆盖旧值,导致最后输出的是最后一轮的 i 的值。如果 i 是let声明的,该变量仅在块级作用域内有效,最后输出的会是 6。

var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); //

我们都知道ES5中的变量会提升到顶部,所以可以先调用后声明,之所以可以是因为是var声明的,而let声明的变量不会提升,所以必须先声明才可以调用。还有,只要let命令存在于块级作用域内,它所声明的变量就"绑定"了这个区域,不再受外部的影响。例如如下代码:

var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}

在块级作用域内使用let又声明变量tmp,那么这个变量就不会再受外部变量的影响,而let声明的变量无法提升,所以在没有声明前调用就会出错。

总之,在代码块内,在没有使用let声明变量之前,该变量都是不可用的,这在ES6的语法上称为"暂时性死区","暂时性死区"的出现意味着typeof不再是一个百分之百安全的操作。

typeof x; // ReferenceError
let x; typeof y // "undefined"

在没有声明x前,使用typeof检测x的类型就会报错,而检测一个没有被声明的变量反而不会报错。

let还不允许在相同作用域内,重复声明同一个变量,如下情况都会报错:

//  报错
function () {
let a = 10;
var a = 1;
} // 报错
function () {
let a = 10;
let a = 1;
}

所以,在函数内重新声明变量也是会报错的:

function func(arg) {
let arg; // 报错
}

在不同的作用域里重新声明变量是可以的:

function func(arg) {
{
let arg; // 不报错
}
}

const

const声明一个只读的常量,一旦声明,常量的值就不能改变,因为无法改变,所以声明变量的时候就需要立即初始化变量,不能留到以后赋值。const的作用域与let命令相同:只在声明所在的块级作用域内有效,而且变量也是无法提升的,也存在"暂时性死区",只能声明后再调用,也不可以重复声明。

对于复杂类型的变量,变量名不指向数据,而是指向数据所在的地址,const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个对象声明为常量必须非常小心。

const foo = {};
foo.prop = 123;
foo.prop
//
foo = {}; // TypeError: "foo" is read-only

常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。

如果想将对象冻结,可以使用Object.freeze方法,一旦冻结,就无法为其添加新的属性,严格模式下会报错

const foo = Object.freeze({});
// 常规模式时,下面一行不起作用;
// 严格模式时,该行会报错
foo.prop = 123;

ES5 只有两种声明变量的方法:var命令和function命令。 ES6 除了添加let和const命令,还有另外两种声明变量的方法:import命令和class命令,以后再学习这两种声明变量的方法。

ES6(let 和 const)的更多相关文章

  1. (1)ES6中let,const,对象冻结,跨模块常量,新增的全局对象介绍

    1.let声明变量,var声明变量,而const声明的常量 2.let与var的区别 let可以让变量长期驻扎在内存当作 let的作用域是分块[ {快1  {快2 }  }每个大括号表示一个独立的块 ...

  2. ES6 let和const详解及使用细节

    ES6之前javascript只有全局作用域和函数作用域,所以经常会遇到变量提升了或者使用闭包的时候出错的问题. 所有a[i]都会输出10: var arr=[]; for (var i=0;i< ...

  3. ES6 let和const命令(3)

    const 用来声明常量.一旦声明,就不能改变. const在声明必须初始化,只声明不赋值会出错 const的作用域与let一样,只在声明的块级作用域有效. const命令声明的常量也不提升,同样存在 ...

  4. es6 let和const命令(1)

    基本用法 ES新增了let命令,用于声明变量.其用法类似于var,但是所声明的变量只在let命令所在的代码块中有效. for(let i = 0;i<5;i++) {} console.log( ...

  5. JavaScript ES6 let、const

    在ES6中,增加了2个声明变量的关键字:let 和 const.在这里将详细介绍let与var的区别.Babel对let的处理以及const的简单使用. 1. let 在ES6规范中增加了 let 关 ...

  6. es6 let 和 const

    function test(){ let a = 1 for (let i =0;i<3;i++){ console.log(i)         //1,2 } console.log(i)  ...

  7. ES6的 let const 以及块级作用域

    let声明变量 用法类似于var,但是所声明的变量只在let所在的代码块内有效. 1 . 在ES6环境下,let声明的变量不能在声明之前调用. 例: console.log(i); //会报错,这叫做 ...

  8. es6的let,const

    1.es6 新增的let const 命令 let用来定义一个局部变量,故名思意就是只在当前代码块可用 1.1 let 声明的变量不存在变量提升(var 声明的变量存在变量提升)且代码块内 暂时性死区 ...

  9. es6 let和const

    一.let 1.let块作用域 if(true){ var a=1; let b=2; } console.log("a:"+a);//a:1 console.log(" ...

  10. es6中let,const区别与其用法

    ECMAScript 是什么? 首先,我们都知道JavaScript由三部分组成:ECMAScript,DOM,BOM: 其中的ECMAScript是Javascript的语法规范. ECMAScri ...

随机推荐

  1. Android的Kotlin秘方(II):RecyclerView 和 DiffUtil

    作者:Antonio Leiva 时间:Sep 12, 2016 原文链接:http://antonioleiva.com/recyclerview-diffutil-kotlin/ 如你所知,在[支 ...

  2. DDD设计中的Unitwork与DomainEvent如何相容?

    最近在开发过程中,遇到了一个场景,甚是棘手,在这里分享一下.希望大家脑洞大开一起来想一下解决思路.鄙人也想了一个方案拿出来和大家一起探讨一下是否合理. 一.简单介绍一下涉及的对象概念 工作单元:维护变 ...

  3. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  4. Unity3D和Egret3D的基情

    Unity3D依靠多平台发布这个核心特点,目前如日中天,屌丝引擎之王绝无来者.Egret白鹭引擎,也着实在微信上刷了一屏又一屏.这二者似乎风马牛不相及,但是这个无处不搞基的年代,让一切皆有可能. U3 ...

  5. Android下/data/data/<package_name>/files读写权限

    今天将更新模块拿到android上面测试的时候,发现在创建writablepath.."upd/"目录的时候出现Permission Denied提示BTW:我使用的是lfs来创建 ...

  6. Android-Drawable、Bitmap、byte[]、资源文件相互转换

    我们在Android的开发中,经常可以遇到图片的处理,当中,有很多是 Bitmap.Drawable.byte[]和资源文件它们直接相互转换. 今天就此总结一下: 1.资源文件转为Drawable 2 ...

  7. wordpress去掉导航栏链接中的category

    找到服务器目录下的functions..php文件,在末尾处添加如下内容即可. 路径:/htdocs/wp-content/themes/functions.php 要追加在functions.php ...

  8. Python下载网页的几种方法

    get和post方式总结 get方式:以URL字串本身传递数据参数,在服务器端可以从'QUERY_STRING'这个变量中直接读取,效率较高,但缺乏安全性,也无法来处理复杂的数据(只能是字符串,比如在 ...

  9. socket编程为什么需要htons(), ntohl(), ntohs(),htons() 函数

    在C/C++写网络程序的时候,往往会遇到字节的网络顺序和主机顺序的问题.这是就可能用到htons(), ntohl(), ntohs(),htons()这4个函数. 网络字节顺序与本地字节顺序之间的转 ...

  10. ASP.NET MVC5+EF6+EasyUI 后台管理系统(58)-DAL层重构

    系列目录 前言:这是对本文系统一次重要的革新,很久就想要重构数据访问层了,数据访问层重复代码太多.主要集中增删该查每个模块都有,所以本次是为封装相同接口方法 如果你想了解怎么重构普通的接口DAL层请查 ...