ES6语法

| 学习笔记 JavaScript

let和const命令

参考阅读

let命令

let命令用来声明变量，它的用法类似var，特别强调是用法类似，有类似便有不同，不同的地方当然在语法方面了。

{
	let a = 10;
	var b = 20;
}
//Uncaught ReferenceError: a is not defined
//console.log(a);
console.log(b);
  • 块级作用域
    上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。
    正因为有了let才使es6有了像Java样块概念，为什么这样或许是因为es6在往开发企业级应用方向靠拢。
    块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。emmm，越来越像Java了。
// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}
  • 不存在变量提升
    有了块的概念自然不能不能变量提升了，所以要使用let命令声明的变量，必须先声明在使用，稍后会有一个概念描述这一现象。
// let 错误的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
-----------------------
// let 正确的情况
let bar = 2;
console.log(bar);
  • 暂时性死区
    ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
    总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。
    暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
  • 不允许重复声明
    let不允许在相同作用域内，重复声明同一个变量。

const命令

  • 只读的常量
    const声明一个只读的常量。一旦声明，常量的值就不能改变。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.
  • 块级作用域
  • 不存在变量提升
  • 暂时性死区

  • 不允许重复声明

    const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

ES6 声明变量的六种方法

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

模板字符串

参考阅读
传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

模板字符串（template string）是增强版的字符串，用反引号（`）标识。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。所有模板字符串的空格和换行，都是被保留的如果你不想要这个换行，可以使用trim方法消除它。

模板字符串中嵌入变量，需要将变量名写在${}之中。大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。模板字符串之中还能调用函数。

{
       let a = 10;
       var b = 20;
}
//Uncaught ReferenceError: a is not defined
//console.log(a);
console.log(b);
console.log(`string text line 1 
string text line 2
num is ${b+3}`);

箭头函数

参考阅读
ES6 允许使用“箭头”（=>）定义函数。

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

箭头函数有几个使用注意点。

  1. 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
  2. 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
  3. 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
  4. 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。

类

参考阅读
参考文献：
《ECMAScript 6 入门》
《Java Script语言入门教程》

加载评论框需要翻墙