深入理解es6（下）

一、symbol

javascript基本数据类型:
null、undefined、number、boolean、string、symbol
ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值（随机生成的一个永远都不会重复的id串）

let s = Symbol();

typeof s
// "symbol"

二、Set和Map

1、Set()

是es6提供的一种新的数据结构，类似于数组，但是set里面的数据具有唯一性

const s = new Set();

Set实例的属性和方法

let set = new Set([1, 2, 3, 4, 4]);
//返回实例的总数
set.size //5

//操作方法
set.add(value) //添加某个值，返回结构本身
set.delete(value)  //删除某个值,返回一个布尔值
set.has(value) //返回一个布尔值，表示是否为set成员
set.clear() //清空所有成员，无返回值

//遍历方法
keys()，values()，entries()
// 注：Set 结构没有键名,只有键值，所以keys()，values()的行为完全一致

set对象的操作

// 数组去重
let arr = [1, 2, 3, 4, 4];
[...new Set(arr)]; // [1, 2, 3, 4]

//并集
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
let union = new Set([...a, ...b]); // {1, 2, 3, 4}

//交集
let c = new Set([1, 2, 3]);
let d = new Set([4, 3, 2]);
let intersect =new Set([...c].filter(x => d.has(x))) // {2, 3}

//差集
let e = new Set([1, 2, 3]);
let f = new Set([4, 3, 2]);
let difference =new Set([...e].filter(x => !f.has(x))) // {1}

2、Map()

Map 数据结构,它类似于对象,但是键的范围不限于字符串，可以为各种类型的值（对象或者原始值）

//key 是对象
let map = new Map();
let obj = {msg:'hello'}

//map设置和获取值（用一个对象作为了键）
map.set(obj, 'content')
map.set('key', 'value')
map.get(obj) // 'content'

//size 属性
map.size //2

//返回一个布尔值，表示某个键是否在当前 Map 对象之中
map.has(obj)  //true

//删除某个键，返回true。如果删除失败，返回false
map.delete(obj) //true

//清除所有成员，没有返回值。
map.clear()

//遍历方法
keys()，values()，entries()
//注：Map 的遍历顺序就是插入顺序

map对象的操作

//Map 与 Array的转换
//map构造函数 可以与一个 二维键值对数组 相互转换
let arr = [
  ['key1', 'val1'],
  ['key2', 'val2'],
]
let map = new Map(arr);
let outArr = Array.from(map);

//Map的克隆
let map1 = new Map(arr);
let cloneMap1 = new Map(map1);

//Map的合并
//如果有重复的键值，则后面的会覆盖前面的
let arr2 = [
  ['key1', 'val1'],
  ['key2', 'val2'],
  ['key3', 'val3'],
]
let first = new Map(arr);
let second = new Map(arr2);
let merged = new Map([...first,...second]);

三、promise

是异步编程的一种解决方案，可以处理多个异步请求的执行顺序等

//基本用法
let p1 = function(){
    return new Promise((resolve,reject)=>{
        //异步操作1，成功执行resolve函数，失败执行reject函数
    })
}
let p2 = function(){
    return new Promise((resolve,reject)=>{
        //异步操作2，成功执行resolve函数，失败执行reject函数
    })
}

p1.then((data)=>{
    console.log('成功的回调')
},(err)=>{
    console.log('失败的回调')
})

//Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例
let p = Promise.all([p1,p2])
p.then((data)=>{
    //两个都执行了resolve方法
}).catch((err)=>{
    //一个不满足就执行这里
})

四、Generator函数 和 async函数

1、Generator函数

ES6 提供的一种异步编程解决方案
操作繁琐，需要手动调用next方法，不常用

function* test(){
    yield 'hello'; //yield可以为一个异步函数的返回结果
    yield 'world';
        ...
}

let result = test();
console.log(result.next()); // { value: 'hello', done: false }
console.log(result.next()); // { value: 'world', done: false }
console.log(result.next()); // { value: undefined, done: true }

2、async函数（es7）

它就是 Generator 函数的语法糖
async函数返回一个 Promise 对象，可以使用then方法添加回调函数。

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, "finish");
  });
}
async function asyncTimeSys(){
    await timeout(1000);
    console.log("第一层异步结束！")
    await timeout(1000);
    console.log("第二层异步结束！")
    await timeout(1000);
    console.log("第三层异步结束！")
    await timeout(1000);
    console.log("第四层异步结束！")
    await timeout(1000);
    console.log("第五层异步结束！")
    return "all finish";
}
asyncTimeSys().then((value)=>{
    console.log(value);
});

五、Class类

通过class关键字，可以定义类

1、基本用法

//es6之前定义类（构造函数）
function Person(name,age){
    this.name = name;
    this.age = age;
}
let student = new Person('小明',18);
//定义共有方法
Person.prototype.say = function(){
    return this.name +'今年'+ this.age;
}
console.log(student.say()) //小明今年18

//通过class定义类
class Person {
    //静态属性，直接通过Person.type拿到值
    static type = '地球人';
    //静态方法，通过Person.eat()调用
    static eat(){
        console.log('吃点啥');
    }

    //构造器定义类的属性
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    //定义共有方法
    say(){
        return this.name +'今年'+ this.age
    }
}
let student = new Person('小明',18)
console.log(student.say()) //小明今年18

2、class的继承

可以通过extends关键字实现继承

class Person {
    constructor(name){
        this.name = name;
    }
    say(){}
}

class Teachaer extends Person{
    constructor(name,job){
        super(name); //需要用到this，则必须执行一次super函数，
        this.job = job;
    }
    work(){
        return `${this.name}的工作是${this.job}`;
    }
}
let xiaoming = new Teachaer('小明','教书')
console.log(xiaoming.work()) //小明的工作是教书

六、Module语法

ES6之前已经出现了js模块加载的方案，最主要的是CommonJS(用于服务器端，如nodeJS)和AMD规范(用于浏览器，如requireJS)

1、export 导出

export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口

//1、一个一个的导出
//导出多个变量
export var name = "小明";
export var age = 18;
//导出方法
export function say(){}
//导出类
export class Person{}

//2、多个一起导出
let a = 1;
let b = 2;
let c = 3;
export { a, b, c }
//通过向大括号中添加 a、b、c 变量并且export输出，就可以将对应变量值以 a、b、c 变量标识符形式暴露给其他文件而被读取到

2、import 导入

import用于在一个模块中加载另一个含有export接口的模块。

//1、引入所有成员
import * as items from '模块路径'
//注：* 代表所有，as后面跟别名

//2、引入指定成员
import { a, b } from '模块路径'

3、export default 导出默认成员

一个模块只能有一个export default

var name = '小明'
export default name;

//引入default成员
import name from '模块路径'