【Javascript-基础-ecma6】ecma6学习笔记（持续更新）

makdown语法手册API

String

新特性的方法 基本不支持IE浏览器

String.fromCodePoint(6特性)

String.prototype.codePointAt(6特性)

for...of

for(let a of b){console.log(a)} // 合for循环不同在，它支持遍历大于0xffff的字符

includes()、endsWith()、startWith()

repeat()

padStart() 、padEnd()

模板字符串

let str = 'console.log(hello' +  `${name})`;
let func = new Function('name', str);
func('xiong');

标签模板

 alert`1234`
 // 等价于
 alert(1234)

String.raw

let a = 10;
String.raw`\`hello${a}\``
// return \`hello10\`

通常用来转换模板字符串为不同字符串。

Reg

支持修改正则修饰符

new RegExp(/test/gi, 'i')

增加u(unicode)修饰符

增加y(粘连)修饰符

具名组匹配和后行断言(提按)

Function

函数参数默认值

function({x = 0 ,y = 0 } = {})

rest参数

function(...values){
  console.log(values.length) //
}

箭头函数

Symbol(类似String的新原始数据类型)

Promise

• then 和 catch方法都会返回一个新的Promise对象同时状态为resolved
• resolved状态的的所有promise对象，都会执行then回调函数
• promise对象内的错误不会影响到promise对象外部代码，
  
  因此使用setTimeout方式可将错误抛出到全局中(因为setTimout执行时，promise已经完成所以是全局执行)

Promise.resolve()

Promise.reject()

done() 确保捕捉未捕获错误 并全局抛出

两个可用的附加方法：

// done 方法实现逻辑
Promise.prototype.done = function(handleResolve, handleReject){
  this
  .then(handleResolve, handleReject)
  .catch(function(reson){
    setTimout(function(){
      throw new Error(reson)
    })
  })
}

// finally 接受一个普通的回调函数作为参数，该函数不管怎样都必须执行
Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};

Iterator 遍历器

ES6中新增用于统一遍历不同数据类型的一种机制。

同时也新增了新的遍历命令for...of,前者主要供后者使用。

具备Iterator接口的数据结构(实例)可通过Symbol.iterator属性获取到遍历器，

[1,3][Symbol.iterator]
// ƒ values() { [native code] }

也能被for...of遍历。

1.原生具备 Iterator 接口的数据结构如下：

• Array
• Map
• Set
• String
• TypedArray
• 函数的 arguments 对象
• NodeList 对象

上面集中数据结构可直接通过for...of命令遍历数据：

for(let i of [1,2]){
  console.log(i) // 1, 2
}

2.原生不具备Iterator迭代器的数据结构，如对象，通过自定义实现

本质上，遍历器是一种线性处理，对于任何非线性的数据结构，部署遍历器接口，

就等于部署一种线性转换。不过，严格地说，对象部署遍历器接口并不是很必要，

因为这时对象实际上被当作 Map 结构使用，ES5 没有 Map 结构，

而 ES6 原生提供了。

3.对于类似数组的对象（存在数值键名和length属性）

部署 Iterator 接口，有一个简便方法，就是Symbol.iterator方法直接引用数组的 Iterator 接口。

let iterable = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); // 'a', 'b', 'c'
}

注：普通对象部署遍历对象，无效。

有了遍历器接口，数据结构就可以用for...of循环遍历（详见下文），也可以使用while循环遍历。

Generator

基本使用

返回一个迭代器。

• 定义

function* test(){
  yield 1;
  yield 2;
  return 3;
}

• 使用

for(let i of test()){
  console.log(i) // 1,2,3
}

• yield* 表达式

在一个 Generator 函数里面执行另一个 Generator 函数,遍历时则返回对应的另一个迭代器；

function* inner() {
  yield 'hello!';
}

function* outer1() {
  yield 'open';
  yield inner();
  yield 'close';
}

var gen = outer1()
gen.next().value // "open"
gen.next().value // 返回一个遍历器对象
gen.next().value // "close"

function* outer2() {
  yield 'open'
  yield* inner()
  yield 'close'
}

var gen = outer2()
gen.next().value // "open"
gen.next().value // "hello!"
gen.next().value // "close"

作为对象的属性

let obj = {
  * test(){
      yield 1;
  }
};

Generator 与 async

Generator 异步

• co模块(用于执行Generator函数的执行器)

通过Generator函数与co模块结合使用可实现异步代码的同步使用

• Generator与async

Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。

1. 一个await语句后面Promise变为reject，则整个async函数就会中断。

通过try...catch可以避免这种情况：

async function f() {
  try {
    await Promise.reject('出错了');
  } catch(e) {
  }
  return await Promise.resolve('hello world');
}

f()
.then(v => console.log(v))

另一种方法则通过添加catch处理报错:

async function f() {
  await Promise.reject('出错了')
    .catch(e => console.log(e));
  return await Promise.resolve('hello world');
}

f()
.then(v => console.log(v))
// 出错了
// hello world

1. 多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。

// unrecomended 不存在继发关系
let foo = await getFoo();
let bar = await getBar();

// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

两种写法，getFoo和getBar都是同时触发，这样就会缩短程序的执行时间。

async实现原理

async就是讲Generator和自动执行器包装在一个函数里而实现的。

• spawn

下面给出spawn函数的实现，基本就是前文自动执行器的翻版。

async function fn(args) {
  // ...
}

// 等同于

function fn(args) {
  return spawn(function* () {
    // ...
  });
}
// spawn 函数实现
function spawn(genF) {
  // async函数返回Promise对象
  return new Promise(function(resolve, reject) {
    // 创建迭代器
    const gen = genF();

    function step(nextF) {
      let next;
      try {
        next = nextF();
      } catch(e) {
        return reject(e);
      }
      if(next.done) {
        return resolve(next.value);
      }
      Promise.resolve(next.value).then(function(v) {
        step(function() { return gen.next(v); });
      }, function(e) {
        step(function() { return gen.throw(e); });
      });
    }
    step(function() { return gen.next(undefined); });
  });
}
与其他异步处理方

• 并发多个请求，但同步输出结果

async function logInOrder(urls) {
  // 并发读取远程URL

  const textPromises = urls.map(async url => {
    const response = await fetch(url);
    return response.text();
  });

  // 按次序输出
  for (const textPromise of textPromises) {
    console.log(await textPromise);
  }
}

Module 模块

基础

• CommonJS模块方式

let { stat, exists, readFile } = require('fs');

这种方式使用的是'运行时加载'加载模式，只有在代码运行时才会去获取执行。这导致没办法在

在编译时做静态检查并优化。

• ES6 Module

新增加的模块不是对象，ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为

“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率

要比 CommonJS 模块的加载方式高。

export

var b = 1;
export {a as b}

export与import复合使用

export {a as b, c} from 'test'
export * from 'test1' // 模块继承

export var a = 1;

严格模式

ES6 的模块自动采用严格模式。

严格模式主要有以下限制。

• 变量必须声明后再使用
• 函数的参数不能有同名属性，否则报错
• 不能使用with语句
• 不能对只读属性赋值，否则报错
• 不能使用前缀 0 表示八进制数，否则报错
• 不能删除不可删除的属性，否则报错
• 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
• eval不会在它的外层作用域引入变量
• eval和arguments不能被重新赋值
• arguments不会自动反映函数参数的变化
• 不能使用arguments.callee
• 不能使用arguments.caller
• 禁止this指向全局对象(6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this。)
• 不能使用fn.caller和fn.arguments获取函数调用的堆栈
• 增加了保留字（比如protected、static和interface）

编程风格

eslint

使用eslint模块，进行语法规则和代码风格的检查。

常用代码语法规则

• eslint-config-airbnb
• eslint-plugin-import(插件)
• eslint-plugin-jsx-a11y(插件)
• eslint-plugin-react(插件)

.eslintrc

{
  "extends": "eslint-config-airbnb"
}