es6学习随笔

Generator函数

function* f() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var f1 = f();
f1.next();//{value: "hello", done: false}
f1.next();//{value: "world", done: false}
f1.next();//{value: "ending", done: true}

async是Generator函数的语法糖

async function f(){
    const a1 = await p1();
    const a2 = await p2(a1);
    console.log()
}
//返回一个promise
f.then((v)=>{console.log(v)}).catch((e)=>{console.log(e)})

async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

import、require区别：

import只能用于静态导入，就是必须在文件开始的时候，在最上层就写好。而require就可以实现动态加载。

加载方式	规范	命令	特点
运行时加载	CommonJS/AMD	require	社区方案，提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。
编译时加载	ESMAScript6+	import	语言规格层面支持模块功能。支持编译时静态分析，便于JS引入宏和类型检验。动态绑定。

import使用时，有没有大括号区别：

1. 当用export default people导出时，就用 import people 导入（不带大括号）

2. 一个文件里，有且只能有一个export default。但可以有多个export。

3. 当用export name 时，就用import { name }导入（记得带上大括号）

4. 当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age }

5. 当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example

Set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set 本身是一个构造函数，用来生成 Set 数据结构。

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

上面代码通过add方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值。

Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

// 例三
const set = new Set(document.querySelectorAll('div'));
set.size // 56

// 类似于
const set = new Set();
document
 .querySelectorAll('div')
 .forEach(div => set.add(div));
set.size // 56

上面代码中，例一和例二都是Set函数接受数组作为参数，例三是接受类似数组的对象作为参数。

上面代码也展示了一种去除数组重复成员的方法。

// 去除数组的重复成员
[...new Set(array)]

Set 实例的属性和方法

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

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

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

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

上面这些属性和方法的实例如下：

s.add(1).add(2).add(2);
// 注意2被加入了两次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2);
s.has(2) // false

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

const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);

遍历操作

Set 结构的实例有四个遍历方法，可以用于遍历成员。

• keys()：返回键名的遍历器
• values()：返回键值的遍历器
• entries()：返回键值对的遍历器
• forEach()：使用回调函数遍历每个成员

 

深克隆

方法一：

解构赋值就可以啦，不用那么复杂：

var obj = {name:"xiaofang",age:30}
var obj2 = {...obj}

obj2  //{name:"xiaofang",age:30}

obj2.name = "mimi"//修改克隆对象

obj2  //{name: "mimi", age: 30}克隆对象变了

obj  //{name: "xiaofang", age: 30}原对象未变

 

Array(9).fill(null) ;   //[null,null,null,null,null,null,null,null,null]

方法二：

》》数组X.slice()

var obj=Array(9).fill(null)
var b=obj.slice()
b[1] = "X"

b    //(9) [null, "X", null, null, null, null, null, null, null]
obj //(9) [null, null, null, null, null, null, null, null, null]

We call .slice() to copy the squares array instead of mutating the existing array. Jump ahead a section to learn why immutability is important.

方法三：

》》对象 Object.assign

var player = {score: 1, name: 'Jeff'};
var newPlayer = Object.assign({},player,{score:2})
newPlayer  //{score: 2, name: "Jeff"}

player //{score: 1, name: "Jeff"}