深入理解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 '模块路径'

巴特西

深入理解es6（下）

一、symbol

二、Set和Map

1、Set()

Set实例的属性和方法

set对象的操作

2、Map()

map对象的操作

三、promise

四、Generator函数和 async函数

1、Generator函数

2、async函数（es7）

五、Class类

1、基本用法

2、class的继承

六、Module语法

1、export 导出

2、import 导入

3、export default 导出默认成员

最新文章

热门文章

巴特西

深入理解es6（下）

一、symbol

二、Set和Map

1、Set()

Set实例的属性和方法

set对象的操作

2、Map()

map对象的操作

三、promise

四、Generator函数 和 async函数

1、Generator函数

2、async函数（es7）

五、Class类

1、基本用法

2、class的继承

六、Module语法

1、export 导出

2、import 导入

3、export default 导出默认成员

最新文章

热门文章

四、Generator函数和 async函数