ES6让普通JS开发看不懂的基本语法（快速上手ES6）

详细参考页面

简介

• ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。一般来说，这两个词是可以互换的。

let命令

• ES6新增了let命令，用来声明变量，它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

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

a // ReferenceError: a is not defined.
b // 1

• let命令避免了循环变量泄露为全局变量

var s = "hello";

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

console.log(i); // 5

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

变量的解构赋值

• ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
• 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ["a"];
x // "a"
y // undefined
z // []

var { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

var { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

var { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

• 解构赋值允许指定默认值。

var [foo = true] = [];
foo // true

[x, y = "b"] = ["a"]; // x="a", y="b"
[x, y = "b"] = ["a", undefined]; // x="a", y="b"

模版字符串

传统的JavaScript语言，输出模板通常是这样写的。

$("#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）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript "
" is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

Number全局对象

ES6将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。

函数变化

• ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = "World") {
  console.log(x, y);
}

log("Hello") // Hello World
log("Hello", "China") // Hello China
log("Hello", "") // Hello

• 参数默认值可以与解构赋值的默认值，结合起来使用。

function foo({x, y = 5}) {
  console.log(x, y);
}

foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2
foo() // TypeError: Cannot read property "x" of undefined

• ES6引入rest参数（形式为“…变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

• 箭头函数
  ES6允许使用“箭头”（=>）定义函数。

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

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

const full = ({ first, last }) => first + " " + last;

// 等同于
function full(person) {
  return person.first + " " + person.last;
}

扩展运算符

扩展运算符（spread）是三个点（…）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

var numbers = [4, 38];
add(...numbers) // 42

扩展运算符的应用

// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]

var arr1 = ["a", "b"];
var arr2 = ["c"];
var arr3 = ["d", "e"];

// ES5的合并数组
arr1.concat(arr2, arr3);
// [ "a", "b", "c", "d", "e" ]

// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ "a", "b", "c", "d", "e" ]

// ES5
a = list[0], rest = list.slice(1)
// ES6,与解构赋值结合
[a, ...rest] = list

//函数的返回值
var dateFields = readDateFields(database);
var d = new Date(...dateFields);

对象

• ES6允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

var birth = "2000/01/01";

var Person = {

  name: "张三",

  //等同于birth: birth
  birth,

  // 等同于hello: function ()...
  hello() { console.log("我的名字是", this.name); }

};

• 属性名表达式,ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。

let propKey = "foo";

let obj = {
  [propKey]: true,
  ["a" + "bc"]: 123
};

阅读更多