es6-总结-01-03

2017-09-19 阅读量

重新过了一遍阮一峰老师的 <ES6入门> 第三版把每章的重点做个总结

ES6常用特性: let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments 等

1. let, const

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

不存在变量提升(暂时性死区) 不允许重复声明
都有块级作用域 : 考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。
另外，还有一个需要注意的地方。ES6 的块级作用域允许声明函数的规则，只在使用大括号的情况下成立，如果没有使用大括号，就会报错。

// 函数声明语句
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 函数表达式
{
  let a = 'secret';
  let f = function () {
    return a;
  }
}

如果真的想将对象冻结，应该使用Object.freeze方法

const foo = Object.freeze({});

// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

ES6 一共有 6 种声明变量的方法 : var function || let const import class

获取顶层对象 : 垫片库system.global

1
2
3

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

2. 变量的解构赋值

事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效

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

如果变量名与属性名不一致，必须写成下面这样 :

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

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者

1
2
3

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

对象的解构也可以指定默认值默认值生效的条件是，对象的属性值严格等于undefined

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构 (数组的 index 就对应对象里的 key)

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

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

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

函数的参数也可以使用解构赋值; 函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y

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

add([1, 2]); // 3

map 数据结构

// 获取键名
for (let [key] of map) {
  // ...
}

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