ECMAScript 6学习笔记（一）let、const、变量的结构赋值

以下笔记为学习《ECMAScript入门》的摘抄笔记

let命令

• 类似var，但所声明的变量，只在let命令所在的代码块内有效，适合for循环计数器。
• 它所声明的变量一定要在声明后使用，否则报错。
• let不允许在相同作用域内，重复声明同一个变量。

块级作用域

• ES6 允许块级作用域的任意嵌套。
• 外层作用域无法读取内层作用域的变量。内层作用域可以定义外层作用域的同名变量。

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

使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。

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

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

• 块级作用域内声明的函数类似于let，对作用域之外没有影响，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句

do 表达式

在块级作用域之前加上do，使它变为do表达式，然后就会返回内部最后执行的表达式的值。

let x = do {
  let t = f();
  t * t + 1;
};
//变量x会得到整个块级作用域的返回值（t * t + 1）

const命令

• const声明的变量不得改变值，必须立即初始化，不能留到以后赋值。
• 作用域与let命令相同：只在声明所在的块级作用域内有效，只能在声明的位置后面使用。
• 不可重复声明。
• 本质是变量指向的那个内存地址不得改动。
• 将对象冻结，应该使用Object.freeze方法，添加新属性也不起作用。

---

顶层对象的属性

• ES6为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。
• 引入global作为顶层对象。也就是说，在所有环境下，global都是存在的，都可以从它拿到顶层对象。

// CommonJS 的写法
var global = require('system.global')();

// ES6 模块的写法
import getGlobal from 'system.global';
const global = getGlobal();

---

变量的的结构赋值

• ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
• 只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值
• 解构赋值允许指定默认值。

• 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

  1. 数组的结构赋值如下：

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

2.对象的结构赋值如下：

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

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

//嵌套结构
let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

3.字符串的解构赋值
此时，字符串被转换成了一个类似数组的对象。

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

//还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5

4.数值和布尔值的解构赋值

• 解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
• 由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

5.函数参数的解构赋值
也可以使用默认值

6.圆括号问题
建议只要有可能，就不要在模式中放置圆括号。
以下三种解构赋值不得使用圆括号:
（1）变量声明语句
（2）函数参数
（3）赋值语句的模式

7.用途
（1）交换变量的值

let x = 1;
let y = 2;

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

（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

//如果只想获取键名，或者只想获取键值，可以写成下面这样
// 获取键名
for (let [key] of map) {
  // ...
}

// 获取键值
for (let [,value] of map) {
  // ...
}

（7）输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

---