ECMAScript 6 - let和const

let基本用法

ES6新增了let命令,用来生命变量.它的用法类似于var,但是所声明的变量的作用域有所不同,它声明的变量的作用域只在其声明的代码块内有效.看一下示例代码:

{
  let a = 10;
  var b = 100;
}

console.log(a); // Uncaught ReferenceError: a is not defined
console.log(b); // 100

letfor循环里面很适用

for(let i = 0; i < 10; i++) {
  console.log(i);
}

console.log(i); // Uncaught ReferenceError: a is not defined

上面这段代码如果使用var来声明,后面一句log是不会报错的,而且会输出i最后保存的值,这在某种意义上来说造成了作用域的污染.

变量提升问题

let不会像var那样有变量提升.所以,变量一定要在声明后使用,否则会报错.先看一段示例代码:

console.log(a); // undefined
console.log(b); // 报错ReferenceError

var a = 10;
let b = 100;

上面这段代码,变量a使用var命令声明,会发生变量提前,即脚本开始运行,变量a就已经存在了,但是没有值,所以输出undefined.变量b使用let命令声明,不会发生变量提升.这表示在声明它之前,变量b是不存在的,所以这里他会抛出一个错误.

暂时性死区

只要块级作用域内存在let命令,它所声明的变量就”绑定”这个区域,不再受外部的影响.

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

上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。

ES6明确规定,如果区块中存在letconst命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错”

总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称TDZ).

if(true) {
  // TDZ开始
  tmp = "abc"; // ReferenceError
  console.log(tmp);
  
  let tmp; // TDZ结束
  console.log(tmp); // undefined
  
  tmp = 123;
  console.log(tmp); // 123
}

暂时性死区”也意味着typeof不再是一个百分之百安全的操作

typeof x; // ReferenceError
let x;

上面代码中,变量x使用let命令声明,所以在声明之前,都属于x的“死区”,只要用到该变量就会报错。因此,typeof运行时就会抛出一个ReferenceError

作为比较,如果一个变量根本没有被声明,使用typeof反而不会报错

typeof y; // undefined

所以,以后一定要养成变量先声明在使用的习惯.

有些“死区”比较隐蔽,不太容易发现

function bar(x = y, y = "abc"){
  return [x, y];
}

bar(); // ReferenceError

上面代码中,调用bar函数之所以报错(某些实现可能不报错),是因为参数x默认值等于另一个参数y,而此时y还没有声明,属于”死区“。如果y的默认值是x,就不会报错,因为此时x已经声明了

function bar(x = 2, y = x) {
  return [x, y];  
}

bar(); // [2, 2]

ES6规定暂时性死区和修订变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。这样的错误在ES5是很常见的,现在有了这种规定,避免此类错误就很容易了。

总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量

不允许重复声明

let不允许在相同作用域内,重复声明同一个变量

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

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

function(para) {
  let para; // 这样也是不行的
}

function() {
  var a = 10; // 这里是允许的,其实下面一句只是覆盖之前的声明
  var a = 1;
}

function(para) {
  
  function() {
    let para; // 这里是可以的,因为作用域已经发生变化
  }
}

块级作用域

为什么需要块级作用域?

ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

第一种场景,内层变量可能会覆盖外层变量

var tmp = new Date();

function test() {
  console.log(tmp);
  if(false) {
    var tmp = "Test!";
  }
}

test();

上面代码中,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量

第二种场景,用来计数的循环变量泄露为全局变量,前面提到过一次

var s = "Test!";

for(var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 仍然输出5

上面代码中,变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量

ES6的块级作用域

let实际上为JavaScript新增了块级作用域.

function test1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  
  console.log(n); // 5
}

console.log(n); // ReferenceError

上面的函数有两个代码块,都声明了变量n,运行后输出5。这表示外层代码块不受内层代码块的影响。如果使用var定义变量n,最后输出的值就是10

ES6允许块级作用域的任意嵌套

{{{let a = "test"}}}

上面这段代码一共使用了3层块级作用域.

在嵌套的作用域里面要注意:外层作用域无法读取内层作用域的变量

{{{
  let a = "test";
  {console.log(a)} // 这里
}}}

内层作用域可以定义外层作用域的同名变量

{{{
  let a = "test";
  {let a = "test";}
}}}

块级作用域与函数声明

函数能不能在块级作用域之中声明,是一个相当令人混淆的问题。ES5规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明

// case 1
if(true) {
  function test() {}
}

// case 2
try {
  function test() {}
} catch(e) {
  
}

上面代码的两种函数声明,根据ES5的规定都是非法的

但是,浏览器没有遵守这个规定,还是支持在块级作用域之中声明函数,因此上面两种情况实际都能运行,不会报错。不过,“严格模式”下还是会报错

ES6引入了块级作用域,明确允许在块级作用域之中声明函数。

// ES6

'use strict';
if (true) {
  function test() {
    // 不会报错
  }
}

并且ES6规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用

function test() {
  console.log("Outside!");
}

(function() {
  if (false) {
    function test() {
      console.log("Inside!");
    }
  }
  test();
}());

上面代码在ES5中运行,会得到Inside!,因为在if内声明的函数f会被提升到函数头部.

“ES6的运行结果就完全不一样了,会得到Outside!。因为块级作用域内声明的函数类似于let,对作用域之外没有影响

另外,还有一个需要注意的地方。ES6的块级作用域允许声明函数的规则,只在使用大括号的情况下成立,如果没有使用大括号,就会报错

// 不报错
'use strict';
if (true) {
  function f() {}
}

// 报错
'use strict';
if (true)
  function f() {}

const命令

基本用法

const声明一个只读的常量。一旦声明,常量的值就不能改变

const PI = 3.1415;
PI // 3.1415

PI = 3; // TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。

const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值

const PI;

上面代码表示,对于const来说,只声明不赋值,就会报错。

const的作用域与let命令相同:只在声明所在的块级作用域内有效

if(true) {
  const MAX = 5;
}

MAX; // Uncaught ReferenceError: MAX is not defined

const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用

if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}

const声明的常量,也与let一样不可重复声明

var message = "Test!";
let age = 1;

// 报错
const message = "Kl";
const age = 2;

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

const test = {};
test.prop = 123;

test.prop; // 123

test = {}; // TypeError: 'test' is reak-only

生命不息,折腾不止...
I'm not a real coder,but i love it so much!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容