读阮一峰《ECMAScript 6 入门》小结

读阮一峰《ECMAScript 6 入门》小结，http://es6.ruanyifeng.com/

1. ES6简介

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码

在线转换：https://babeljs.io/repl/

2. let和const命令

let在块级作用域内有效，var有变量提升（变量可以在声明之前使用，值为undefined），声明的变量有内存泄露

const定义常量，不能改变

如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错都属于变量的“死区”。

3. 变量的解构赋值

• 数组的解构

  let [a, b, c] = [1, 2, 3];    // a=1;b=2;c=3
  let [a, ...b] = [1, 2, 3, 4];    // a=1;b=[2, 3, 4];
  let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
  let [x = 1] = [null]; // x=null

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

• 对象的解构

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

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

• 字符串的解构赋值

  const [a, b, c, d, e] = 'hello'; //'h','e','l','l','e'
  let {length : len} = 'hello';  // len=5

• 数值和布尔值的解构赋值

• 函数参数的解构赋值

  function add([x, y]){
    return x + y;
  }
  
  add([1, 2]); // 3

用途：

1. 交换变量的值 [x, y] = [y, x]
2. 从函数返回多个值

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. 函数参数的默认值
6. 遍历 Map 结构
7. 输入模块的指定方法

4. 字符串的扩展

• 可以被for...of循环遍历
• includes()：返回布尔值，表示是否找到了参数字符串。
  
  startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
  
  endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部
  
  这三个方法都支持第二个参数，表示开始搜索的位置。
• repeat(): 返回一个新字符串，表示将原字符串重复n次
• padStart()用于头部补全，padEnd()用于尾部补全。'3'.padStart(2, '0') //03
• 模板字符串

  $('#result').append(`
    There are <b>${basket.count}</b> items
     in your basket, <em>${basket.onSale}</em>
    are on sale!
  `);

  所有的空格和缩进都会被保留在输出之中
  
  模板字符串中嵌入变量，需要将变量名写在${}之中。

5. 正则的扩展

• RegExp构造函数第一个参数是一个正则对象，那么可以使用第二个参数指定修饰符。而且，返回的正则表达式会忽略原有的正则表达式的修饰符，只使用新指定的修饰符。
• u 修饰符,含义为“Unicode 模式”
• y 修饰符，叫做“粘连”（sticky）修饰符。后一次匹配都从上一次匹配成功的下一个位置开始

  const REGEX = /a/gy;
  'aaxa'.replace(REGEX, '-') // '--xa'

  单单一个y修饰符对match方法，只能返回第一个匹配，必须与g修饰符联用，才能返回所有匹配。

• s 修饰符：dotAll 模式
  
  使得.可以匹配任意单个字符。/foo.bar/s.test('foo\nbar') // true
• 后行断言
  
  ”先行断言“指的是，x只有在y前面才匹配，必须写成/x(?=y)/。
  
  ”先行否定断言“指的是，x只有不在y前面才匹配，必须写成/x(?!y)/。
  
  “后行断言”正好与“先行断言”相反，x只有在y后面才匹配，必须写成/(?<=y)x/
  
  ”后行否定断言“则与”先行否定断言“相反，x只有不在y后面才匹配，必须写成/(?<!y)x/。
• 具名组匹配

  const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
  const matchObj = RE_DATE.exec('1999-12-31');
  const year = matchObj.groups.year; // 1999
  const month = matchObj.groups.month; // 12
  const day = matchObj.groups.day; // 31

6. 数值的扩展

Number.isFinite()

Number.isNaN()

Number.parseInt()

Number.parseFloat()

Number.isInteger() //判断是否是整数

Math.trunc() //方法用于去除一个数的小数部分，返回整数部分

Math.sign() //用来判断一个数到底是正数、负数、还是零(+1,-1,0,-0,NaN)

指数运算符:**

2 ** 3 // 8
2 ** 3 ** 2 // 相当于 2 ** (3 ** 2)

7. 函数的扩展

• ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
• 参数默认值不是传值的，而是每次都重新计算默认值表达式的值。也就是说，参数默认值是惰性求值的。

  let x = 99;
  function foo(p = x + 1) {
    console.log(p);
  }
  foo() // 100
  x = 100;
  foo() // 101

• 函数的length属性，将返回没有指定默认值的参数个数
  
  (function (a, b, c = 5) {}).length // 2
• rest 参数

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}
add(2, 5, 3) // 10

• 箭头函数
  
  如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
  
  箭头函数有几个使用注意点:
  
  （1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
  
  （2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
  
  （3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
  
  （4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

8. 数组的扩展

9. 对象的扩展

见《ES6数组、对象的扩展》

10. Symbol

• 一种新的原始数据类型Symbol，表示独一无二的值。
• 用于对象的属性名，就能保证不会出现同名的属性
  
  在对象的内部，使用 Symbol 值定义属性时，Symbol 值必须放在方括号之中。
• 消除魔术字符串
• Symbol 作为属性名，该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。但是，它也不是私有属性，有一个Object.getOwnPropertySymbols方法，可以获取指定对象的所有 Symbol 属性名。

11. Set 和 Map 数据结构

Set 数据结构

它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set 结构的实例有以下属性。

• Set.prototype.constructor：构造函数，默认就是Set函数。
• Set.prototype.size：返回Set实例的成员总数。

Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。

• add(value)：添加某个值，返回 Set 结构本身。
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• has(value)：返回一个布尔值，表示该值是否为Set的成员。
• clear()：清除所有成员，没有返回值。

Array.from方法可以将 Set 结构转为数组。

去重：

const items = new Set([1, 2, 3, 4, 4]);
//方法一
[...items]
//方法二
Array.from(items);
// [1, 2, 3, 4]

Map 数据结构

它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

12. Proxy 代理器

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

• get（目标对象，属性名，[proxy 实例本身]）
  
  用于拦截某个属性的读取操作

• set（目标对象，属性名，属性值，[proxy 实例本身]）
  
  用来拦截某个属性的赋值操作

• apply（目标对象，上下文对象（this），参数数组）
  
  拦截函数的调用、call和apply操作。

• has
  
  用来拦截HasProperty操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是in运算符。
  
  has拦截只对in运算符生效，对for...in循环不生效，导致不符合要求的属性没有被for...in循环所排除。

• construct()
  
  用于拦截new命令

• deleteProperty()
  
  用于拦截new命令

• defineProperty()
  
  拦截了Object.defineProperty操作

  ...

Reflect

Promise 对象