重温基础：ES9系列

ES9系列目录

• 1 对象的拓展运算符

• 2 正则表达式 s 修饰符

• 3 异步遍历器

所有整理的文章都收录到我《Cute-JavaScript》系列文章中，访问地址：http://js.pingan8787.com

1 对象的拓展运算符

1.1 介绍

对象的拓展运算符，即对象的Rest/Spread属性，可将对象解构赋值用于从一个对象取值，搜键值对分配到指定对象上，与数组的拓展运算符类似：

let  {x, y, ...z} = {x:1, y:2, a:3, b:4};	
x;  // 1	
y;  // 2	
z;  // {a:3, b:4} 

对象的解构赋值要求等号右边必须是个对象，所以如果等号右边是 undefined或 null就会报错无法转成对象。

let {a, ...b} = null;      // 运行时报错	
let {a, ...b} = undefined; // 运行时报错

解构赋值必须是最后一个参数，否则报错。

let {...a, b, c} = obj;     // 语法错误	
let {a, ...b, c} = obj;     // 语法错误

注意：

• 1.解构赋值是浅拷贝。

let a = {a1: {a2: 'leo'}};	
let {...b} = a;	
a.a1.a2 = 'leo';	
b.a1.a2 = 'leo';

• 2.拓展运算符的解构赋值，不能复制继承自原型对象的属性。

let o1 = { a: 1 };	
let o2 = { b: 2 };	
o2.__proto__ = o1;	
let { ...o3 } = o2;	
o3;    // { b: 2 }	
o3.a;  // undefined

1.2 使用场景

• 1.取出参数对象所有可遍历属性，拷贝到当前对象中。

let a = { a1:1, a2:2 };	
let b = { ...a };	
b;   // { a1:1, a2:2 }	
// 类似Object.assign方法

• 2.合并两个对象。

let a = { a1:1, a2:2 };	
let b = { b1:11, b2:22 };	
let ab = { ...a, ...b }; // {a1: 1, a2: 2, b1: 11, b2: 22}	
// 等同于	
let ab = Object.assign({}, a, b);

• 3.将自定义属性放在拓展运算符后面，覆盖对象原有的同名属性。

let a = { a1:1, a2:2, a3:3 };	
let r = { ...a, a3:666 };   	
// r {a1: 1, a2: 2, a3: 666}	
// 等同于	
let r = { ...a, ...{ a3:666 }};	
// r {a1: 1, a2: 2, a3: 666}	
// 等同于	
let r = Object.assign({}, a, { a3:666 });	
// r {a1: 1, a2: 2, a3: 666}

• 4.将自定义属性放在拓展运算符前面，就会成为设置新对象的默认值。

let a = { a1:1, a2:2 };	
let r = { a3:666, ...a };	
// r {a3: 666, a1: 1, a2: 2}	
// 等同于	
let r = Object.assign({}, {a3:666}, a);	
// r {a3: 666, a1: 1, a2: 2}	
// 等同于	
let r = Object.assign({a3:666}, a);	
// r {a3: 666, a1: 1, a2: 2}

• 5.拓展运算符后面可以使用表达式。

let a = {	
    ...(x>1? {a:!:{}),	
    b:2	
}

• 6.拓展运算符后面如果是个空对象，则没有任何效果。

{...{}, a:1};  // {a:1}

• 7.若参数是 null或 undefined则忽略且不报错。

let a = { ...null, ...undefined }; // 不报错

• 8.若有取值函数 get则会执行。

// 不会打印 因为f属性只是定义 而不没执行	
let a = {	
    ...a1,	
    get f(){console.log(1)}	
}	
// 会打印 因为f执行了	
let a = {	
    ...a1,	
    ...{	
        get f(){console.log(1)}	
    }	
}

2 正则表达式 s 修饰符

在正则表达式中，点( .)可以表示任意单个字符，除了两个：用 u修饰符解决四个字节的UTF-16字符，另一个是行终止符。
终止符即表示一行的结束，如下四个字符属于“行终止符”：

• U+000A 换行符（\n）

• U+000D 回车符（\r）

• U+2028 行分隔符（line separator）

• U+2029 段分隔符（paragraph separator）

/foo.bar/.test('foo\nbar')	
// false

上面代码中，因为 .不匹配 \n，所以正则表达式返回 false。
换个醒，可以匹配任意单个字符：

/foo[^]bar/.test('foo\nbar')	
// true

ES9引入 s修饰符，使得 .可以匹配任意单个字符：

/foo.bar/s.test('foo\nbar') // true

这被称为 dotAll模式，即点（ dot）代表一切字符。所以，正则表达式还引入了一个 dotAll属性，返回一个布尔值，表示该正则表达式是否处在 dotAll模式。

const re = /foo.bar/s;	
// 另一种写法	
// const re = new RegExp('foo.bar', 's');	
re.test('foo\nbar') // true	
re.dotAll // true	
re.flags // 's'

/s修饰符和多行修饰符 /m不冲突，两者一起使用的情况下， .匹配所有字符，而 ^和 $匹配每一行的行首和行尾。

3 异步遍历器

在前面ES6章节中，介绍了Iterator接口，而ES6引入了“异步遍历器”，是为异步操作提供原生的遍历器接口，即 value和 done这两个属性都是异步产生的。

3.1 异步遍历的接口

通过调用遍历器的 next方法，返回一个Promise对象。

a.next().then( 	
    ({value, done}) => {	
        //...	
    }	
)

上述 a为异步遍历器，调用 next后返回一个Promise对象，再调用 then方法就可以指定Promise对象状态变为 resolve后执行的回调函数，参数为 value和 done两个属性的对象，与同步遍历器一致。
与同步遍历器一样，异步遍历器接口也是部署在 Symbol.asyncIterator属性上，只要有这个属性，就都可以异步遍历。

let a = createAsyncIterable(['a', 'b']);	
//createAsyncIterable方法用于构建一个iterator接口	
let b = a[Symbol.asyncInterator]();	
b.next().then( result1 => {	
    console.log(result1); // {value: 'a', done:false}	
    return b.next();	
}).then( result2 => {	
    console.log(result2); // {value: 'b', done:false}	
    return b.next();	
}).then( result3 => {	
    console.log(result3); // {value: undefined, done:true}	
})

另外 next方法返回的是一个Promise对象，所以可以放在 await命令后。

async function f(){	
    let a = createAsyncIterable(['a', 'b']);	
    let b = a[Symbol.asyncInterator]();	
    console.log(await b.next());// {value: 'a', done:false}	
    console.log(await b.next());// {value: 'b', done:false}	
    console.log(await b.next());// {value: undefined, done:true}	
}

还有一种情况，使用 Promise.all方法，将所有的 next按顺序连续调用：

let a = createAsyncIterable(['a', 'b']);	
let b = a[Symbol.asyncInterator]();	
let {{value:v1}, {value:v2}} = await Promise.all([	
    b.next(), b.next()	
])

也可以一次调用所有 next方法，再用 await最后一步操作。

async function f(){	
    let write = openFile('aaa.txt');	
    write.next('hi');	
    write.next('leo');	
    await write.return();	
}	
f();

3.2 for await...of

for...of用于遍历同步的Iterator接口，而ES8引入 forawait...of遍历异步的Iterator接口。

async function f(){	
    for await(let a of createAsyncIterable(['a', 'b'])) {	
        console.log(x);	
    }	
}	
// a	
// b

上面代码， createAsyncIterable()返回一个拥有异步遍历器接口的对象， for...of自动调用这个对象的 next方法，得到一个Promise对象， await用来处理这个Promise，一但 resolve就把得到的值 x传到 for...of里面。
用途
直接把部署了asyncIteable操作的异步接口放入这个循环。

let a = '';	
async function f(){	
    for await (let b of req) {	
        a += b;	
    }	
    let c = JSON.parse(a);	
    console.log('leo', c);	
}

当 next返回的Promise对象被 reject， forawait...of就会保错，用 try...catch捕获。

async function f(){	
    try{	
        for await (let a of iterableObj()){	
            console.log(a);	
        }	
    }catch(e){	
        console.error(e);	
    }	
}

注意， forawait...of循环也可以用于同步遍历器。

(async function () {	
  for await (let a of ['a', 'b']) {	
    console.log(a);	
  }	
})();	
// a	
// b

3.3 异步Generator函数

就像 Generator 函数返回一个同步遍历器对象一样，异步 Generator 函数的作用，是返回一个异步遍历器对象。
在语法上，异步 Generator 函数就是 async函数与 Generator 函数的结合。

async function* f() {	
  yield 'hi';	
}	
const a = f();	
a.next().then(x => console.log(x));	
// { value: 'hello', done: false }

设计异步遍历器的目的之一，就是为了让Generator函数能用同一套接口处理同步和异步操作。

// 同步Generator函数	
function * f(iterable, fun){	
    let a = iterabl[Symbol.iterator]();	
    while(true){	
        let {val, done} = a.next();	
        if(done) break;	
        yield fun(val);	
    }	
}	
// 异步Generator函数	
async function * f(iterable, fun){	
    let a = iterabl[Symbol.iterator]();	
    while(true){	
        let {val, done} = await a.next();	
        if(done) break;	
        yield fun(val);	
    }	
}

同步和异步Generator函数相同点：在 yield时用 next方法停下，将后面表达式的值作为 next()返回对象的 value。
在异步Generator函数中，同时使用 await和 yield，简单样理解， await命令用于将外部操作产生的值输入函数内部， yield命令用于将函数内部的值输出。

(async function () {	
  for await (const line of readLines(filePath)) {	
    console.log(line);	
  }	
})()

异步 Generator 函数可以与 forawait...of循环结合起来使用。

async function* f(asyncIterable) {	
  for await (const line of asyncIterable) {	
    yield '> ' + line;	
  }	
}

3.4 yield* 语句

yield*语句跟一个异步遍历器。

async function * f(){	
  yield 'a';	
  yield 'b';	
  return 'leo';	
}	
async function * g(){	
  const a = yield* f();  // a => 'leo'	
}

与同步 Generator 函数一样， forawait...of循环会展开 yield*。

(async function () {	
  for await (const x of gen2()) {	
    console.log(x);	
  }	
})();	
// a	
// b