ES6 let语法和const语法

let语法的第一个特点:

let变量用来声明变量(var命令也是),需要注意的是,let声明的变量只有在代码块内才有效。也就是说代码块之外不能调用代码块(”{}“)内用let声明的变量,而var就可以调用,并且例如在for循环代码块内:函数内部的变量i与循环变量i不在同一个作用域,有各自单独的作用域。

例如:(在for中用let来声明变量)
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); //打印结果:6

上面是使用了let来声明变量i,如果是使用var来声明的话,那么结果就会变成:10。

解析: 变量i用let来声明的话,当前的i只在本轮循环有效,所以对于上面的for{}中的i每一次循环都是一个新的值:1。

a[i]中的i调用不了let声明的i变量值,固a6,console.log(i)输出:6。

针对这一特点,代码块中let声明的变量不受其他代码块作用域的影响。

let语法的第二个特点:

let声明的变量一定要在声明后才能使用,而var声明的变量可以在还没声明之前使用,值为undefined。

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

解析:var定义了全局变量tmp,而在块作用域中let声明了一个局部变量tmp,同名的tmp,会使后者的这个tmp绑定死在if{}代码块中,所以回到上面的这一个特点,let声明的变量一定要在声明后才能使用。所以会报错:ReferenceError。

名称介绍:暂时性死区(在代码块内,使用let命令声明变量之前,该变量都是不可用的)。

变量在使用let声明之前,去使用了就会报错。

就像这样:
let x = x;
像死区的还有下面这一种也会报错:

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

改成这样就不会报错:

function bar(x = 2, y = x) {
  return [x, y];
}
bar(); // [2, 2]
let语法的第三个特点:

let不允许在相同作用域内,重复声明同一个变量,所以不能在函数内重新声明参数。

列如:
// 报错
function func() {
  let a = 10;
  var a = 1;
}
// 报错
function func() {
  let a = 10;
  let a = 1;
}

因此,不能在函数内部重新声明参数。

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

function func(arg) {
  {
    let arg;
  }
}
func() // 不报错
let语法的第四个特点:块级作用域

使用let声明的变量被限制在了块中,所以ES6就有了块级作用域,在ES5只有全局作用域与函数作用域。

为什么需要块级作用域呢?(来看看没有块级作用的一些不合理场景)

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

var tmp = new Date();
 
function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}
f(); // undefined

对于上面这段代码中,if代码块的外部使用外层的tmp变量,内部使用内层的tmp变量,并且内层的tmp变量覆盖了外层的tmp变量。
第二种场景,用来计数的循环变量泄露为全局变量:

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

上面代码中的i理应只作用与for{}代码块中,但是循环结束后,并没有消失,而是泄露成了全局的变量。

块级作用域演示:

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

如果两个变量声明都换成var来声明,那么结果就是10。

ES6允许多层块级作用域嵌套,每一层都是一个单独的作用域,各层作用域无法读取其他层作用域的内部变量。

不同层作用域可以定义同名变量。

块级作用域的出现,实际上使得获得广泛应用的匿名立即执行函数表达式(匿名 IIFE)不再必要了:

// 情况一
if (true) {
  function f() {}
}
 
// 情况二
try {
  function f() {}
} catch(e) {
  // ...
}

但是尽量不要这样使用,应当优先考虑函数表达式,因为不确定浏览器支不支持ES6。

块作用域需要存在“{}”:

// 第一种写法,报错
if (true) let x = 1;
 
// 第二种写法,不报错
if (true) {
  let x = 1;
}

上面代码中,第一种写法没有大括号,所以不存在块级作用域,let只能出现在当前作用域的顶层,所以报错。第二种写法有大括号,所以块级作用域成立。

函数声明也是如此,严格模式下,函数只能声明在当前作用域的顶层:

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

以上是let语法的用法,下面我们看下const语法。

const语法

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

const PI = 3.1415;
PI // 3.1415

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

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

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

const foo;
// SyntaxError: Missing initializer in const declaration

上面代码表示,对于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;
}

上面代码在常量MAX声明之前就调用,结果报错。

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

var message = "Hello!";
let age = 25;

// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

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

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

foo.prop
// 123

foo = {}; // TypeError: "foo" is read-only

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

下面是另一个例子。

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

上面代码中,常量a是一个数组,这个数组本身是可写的,但是如果将另一个数组赋值给a,就会报错。

如果真的想将对象冻结,应该使用Object.freeze方法。
const foo = Object.freeze({});
// 常规模式时,下面一行不起作用;
// 严格模式时,该行会报错
foo.prop = 123;
上面代码中,常量foo指向一个冻结的对象,所以添加新属性不起作用,严格模式时还会报错。

除了将对象本身冻结,对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, value) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

ES5只有两种声明变量的方法:var命令和function命令。ES6除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令。所以,ES6一共有6种声明变量的方法。

全局对象的属性

全局对象是最顶层的对象,在浏览器环境指的是window对象,在Node.js指的是global对象。ES5之中,全局对象的属性与全局变量是等价的。

window.a = 1;
a // 1

a = 2;
window.a // 2

上面代码中,全局对象的属性赋值与全局变量的赋值,是同一件事。(对于Node来说,这一条只对REPL环境适用,模块环境之中,全局变量必须显式声明成global对象的属性。)

未声明的全局变量,自动成为全局对象window的属性,这被认为是JavaScript语言最大的设计败笔之一。这样的设计带来了两个很大的问题,首先是没法在编译时就报出变量未声明的错误,只有运行时才能知道,其次程序员很容易不知不觉地就创建了全局变量(比如打字出错)。另一方面,从语义上讲,语言的顶层对象是一个有实体含义的对象,也是不合适的。

ES6为了改变这一点,一方面规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是全局对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于全局对象的属性。也就是说,从ES6开始,全局变量将逐步与全局对象的属性脱钩。

var a = 1;
// 如果在Node的REPL环境,可以写成global.a
// 或者采用通用方法,写成this.a
window.a // 1

let b = 1;
window.b // undefined

上面代码中,全局变量a由var命令声明,所以它是全局对象的属性;全局变量b由let命令声明,所以它不是全局对象的属性,返回undefined。
转自:http://es6.ruanyifeng.com/#docs/let

你可能感兴趣的:(ES6 let语法和const语法)