ES6 笔记一

1. let const

1.1 let

基本用法

{
  let a = 10;
  var b= 1;
}
console.log(a) // error
console.log(b) // 1

let 很适合用在 for 循环中的计数器

不存在变量提升

console.log(foo); // ReferenceError
let foo = 10;

// typeof 将不再是一个百分百安全的操作
typeof x ; // ReferenceError
let x;

暂时性死区 (TDZ temporal dead zone)
只要块级作用域内存在 let 命令，它所声明的变量就 "绑定" 这个区域，不再受外部的影响
```
var tmp = 123;
if(true){
  // TDZ 开始
  tmp = 'abc';  // ReferenceError
  console.log(tmp);  // ReferenceError
  let tmp;  // TDZ 结束
}
```

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

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

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

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

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

1.2 块级作用域

块级作用域的出现让广泛应用的 IIFE 不再必要了

// IIFE 写法
(function(){
  var tmp = '';
  ....
})()

// 块级作用域写法
{
  let tmp = '';
  ....
}

块级作用域外部无法调用块级作用域内部的函数

{
  let a = 'aaa';
  function f() {
      return a;
  }
}
f() // 报错

这样来处理

let f;
{
  let a = 'aaa';
  f = function() {
  return a;
  }
}
f() // 'aaa'

1.3 const

声明常量

const一旦声明就必须立即初始化，不能留到以后赋值。
```
const foo;
// SyntaxError: missing = in const declaration
```
const 复合型变量
变量名不指向数据，而是指向数据所在的地址。
```
const foo = {};
foo.prop = 123;

foo.prop; // 123

foo = {}; // 报错  read-only
```

真想冻结对象可用 freeze 方法
const foo = Object.freeze({});

1.4 跨模块常量

const声明的常量只在当前代码块有效。如下方法来跨模块：

//constants.js 模块
export const A = 1;
export const B = 2;
export const C = 3;

// test1.js 模块
import * as constants from './constants';
console.log(constants.A); // 1
console.log(constants.B); // 2

// test2.js 模块
import {A, B} from './constants';
console.log(A); // 1
console.log(B); // 2

1.5 全局对象的属性

ES6中规定

var 和 function 声明的全局变量依旧是全局对象的属性
let const class 声明的全局变量不属于全局对象的属性

var a = 1;
window.a; // 1

let b = 1;
window.b; // undefined

2. 变量解构赋值 Destructuring

按照一定模式，从数组和对象中提取值，对变量进行赋值。

2.1 Array

用法

var [a, b, c] = [1, 2, 3];
let [foo, [[bar], baz]] = [1, [[2], 3]];

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

const [x, y, ...z] = ['a'];
// x 'a'
// y undefined
// z []

结构不成功，变量的值就是 undefind

如果等号的右边不是 可遍历结构 ，那将会报错
```
// 全部报错
var [foo] = 1;
var [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
```
因为上面等号右边的值，幺妹转为对象后不具备 Iterator 接口（前5个），要么本身就不具备 Iterator 接口（最后一个）。

Set 结构, 也可以使用数组的解构赋值
```
let [x, y, z] = new Set(['a', 'b', 'c']);
```
默认值 ES6中使用 === 判断哪一个位置是否有值。所以，一个数组成员不严格等于 undefined ，默认值是不会生效的
```
var [x = 1] = [undefined];
// x 1

var [x = 1] = [null];
// x null
// 因为 null !== undefined  --> true
```
2.2 对象
和数组的不同点数组的元素是有次序的，变量的取值由他的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
```
var {bar, foo} = { foo: "aaa", bar: "bbb"};
foo // "aaa"
bar // "bbb"

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

如果变量名与属性名不一致

var {foo: baz} = {foo: "aaa", bar: "bbb"};
baz // "aaa"
foo // error: foo is not define

实际上，对象的解构赋值是以下形式的简写

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

真正赋值的是后者不是前者

其他
```
var {foo: {bar}} = {baz: "baz"}
// 报错
```
此时 foo 的属性对应一个子对象。该子对象的bar属性结构时会报错。因为 foo 现在为undefined。
```
var x;
{x} = {x: 1}
// SyntaxError:  syntax error
```
对于已经声明的变量用于解构赋值必须很小心。因为上面的代码 js 引擎会把 {x} 理解成一个代码块，发生语法错误。正确的写法：
```
({x} = {x:1});
```
- 圆括号与解构赋值的关系
解构赋值允许等号左边的模式中不放置任何变量名。于是写出很古怪的表达式
```
({} = [true, false]);
({} = 'abc');
({} = []);
```
上面的表达式毫无意义但是语法是合法可以执行的。

对象的解构赋值可以很方便的将现有对象的方法赋值到某个变量。
let { log, sin, cos } = Math

2.3 String

字符串被转换成一个类似数组的对象

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "e"
d // "l"
e // "o"

类似数组的对象都有 length 属性，因此可以对这个属性解构赋值

let {length: len} = 'hello';
len // 5

2.4 Number & Boolean

解构赋值时，如果等号右边是数值或布尔值，则会 先转为对象 。

let {toString: s} = 123
s === Number.prototype.toString // true

let {toString: b} = true
b === Boolean.prototype.toString // true

上面代码中数值和布尔值的包装对象都有 toString 属性，因此 s 都能取到值。

解构赋值的规则是，只要等号右边的值不是对象，就现将其转为对象。由于 undefined 和 null 无法转为对象，所以对他们进行解构赋值都会报错。

let {prop: x} = undefined; // TypeError
let {prop: y} = null; // TypeError

// 转为 ES5 的代码 一目了然
var x = undefined.prop;

var _ref = null;
var y = _ref.prop;

2.5 函数参数

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

add([1,2]) //3

上面的代码，函数的参数不是一个数组，而是通过解构得到的变量 x 和 y

function move({x=0, y=0} = {}){
    return [x, y];
}

move({x:3, y:8}) // [3, 8]
move({x:3}) // [3, 0]
move({}) // [0, 0]
move() // [0 ,0]

上面的代码，函数 move 的参数是一个对象，通过对这个对象进行解构，得到变量 x y 的值。解构失败，则等于x y等于默认值。

function move({x, y} = {x:0, y:0}){
    return [x, y];
}

move({x:3, y:8}) // [3, 8]
move({x:3}) // [3, undefined]
move({}) // [undefined, undefined]
move() // [0 ,0]

上面的代码视为函数 move 的参数指定默认值，而不是为 x y 指定默认值，所以结果不同。

2.6 关于圆括号

一个式子是模式还是表达式，没有办法一开始就知道，必须解析到或解析不到等号才知道。

ES6的规则是，只要有可能导致解构歧义，就不得使用圆括号。

不使用圆括号

变量声明语句中，模式不能带有圆括号

// 全部报错
var [(1)] = [1];
var {x: (c)} = {};
var {o: ({p:p})} = {o: {p:2}}

函数参数中，模式不能带有圆括号
函数参数也属于声明变量

不能将整个模式或嵌套模式的一层放在圆括号中

// 全部报错
({p:a}) = {p: 1};
([a]) = [5];
[({p: a}), {x: y}] = [{p: 1}, {x: 2}];

使用圆括号

只有一种情况：赋值语句的非模式部分可以使用后圆括号

  [(b)] = [1]; // 模式是取数组的第一个成员
  ({p: (a)} = {p: 1}); // 模式是p 而不是a
  ([parseInt.prop]) = [1]; // 同第一个

因为上面语句都是赋值语句，不是声明语句；他们的圆括号都不属于模式的一部分

2.7 用途

1) 变换变量的值

[x, y] = [y, x];  // 交换 x y 的值

babel转换后

"use strict";

var _ref = [y, x];
x = _ref[0];
y = _ref[1];
_ref;

2) 从函数返回多个值

函数只能返回一个值，想要多个就只能放在数组或对象中返回了。

// 返回一个数组
function example(){
    return [1,2,3]
}
var [a,b,c] = example()

// 返回一个对象
function example(){
    return {
        foo: 1,
        bar: 2
    }
}
var {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 数据

十分有用

var jsonData = {
    id: 1,
    status: 'OK',
    data: [12,13]
}
let {id, status, data: number} = jsonData;

console.log(id, status, number)

5) 函数参数的默认值

jQuery.ajax = function(url,{
    async = true,
    beforeSend = function(){},
    cache = true,
    complete = function(){},
    crossDomain = false,
    global = true
    ....
}){
    ....
}

可以避免在函数内部再写 var foo = config.foo || 'defaule foo';

6) 遍历 Map

任何部署了 Iterator 接口的对象，都可以用 for...of 循环再遍历。Map原生支持 Iterator 接口，使用变量的解构赋值获取 key value 很方便。

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

for(let [key, value] of map){
    console.log(key, value);
}
// 只获取键
let [key] of map
// 只获取值
let [,value] of map

7) 输入模块的指定的方法

加载模块时候，往往需要指定哪些方法。

const {parseURL, util} = require('base');

转成 ES5

'use strict';

var _require = require('base');

var parseURL = _require.parseURL;
var util = _require.util;

ccforward / cc

29.ES6 笔记一 #30