ES6语法一些实践

关于es6语法

原文链接：ECMAScript 6 入门

1、let和const

块级作用域

• let 声明变量，用法类似于var，块级作用域，只在let定义的代码块有效。
  
  对于for循环，使用let可以防止变量污染，计数器只在for循环内有效。
  
  var的变量i全局有效，因此数组a中的i，都指向同一个i，即最后一次输出的10；
  let的变量i只在块级内有效
  
  for循环中，设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。
  因此下面将输出三次abc，但内部i的定义只能用let，不能用var。
  
  变量提升
  var声明变量，即变量可以在声明之前使用（如下图：var a=3相当于var a;和a=3;此时var a在输出前面）
  let则不会出现这种情况
  
  暂时性死区
  ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

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

不允许同时声明

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

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

• const声明一个只读的常量。一旦声明，常量的值就不能改变。
  因此一旦声明就要立即初始化，不赋值就会报错

const和let一样，只在声明所在的块级作用域内有效。

2、变量的解构赋值

数组的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

以前，为变量赋值，只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

即从数组中取值，按位置赋到变量中
例如：

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 // []

如果结构不成功，则返回undefined
不完全解构时，即只能匹配一部分，仍可以结构成功

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

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

对象的解构赋值
对象和数组一样可以解构赋值，只是数组按次序取值，而对象的解析构值必须属性相同时

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

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

->字符串、函数也可以

解构赋值用途
（1）交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

交换x和y的值
（2）从函数返回多个值

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

（3）函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

（4）提取JSON数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

（5）函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};

（6）遍历Map结构

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world