ES6.4set、map与模块化

一，class类基本用法

 class Animal {
        // 构造函数
        constructor(name, age) {
            this.name = name
            this.age = age
            this.eat = function () {
                // 当前的实例化对象
                console.log(this.name + '喜欢吃');
            }
        }
        // 自定义方法  实例化对象
        getName() {
            console.log(this);
        }
        setName(value) {
            this.name = value
            console.log(value);
        }
        // 静态方法  只能由类去调用
        static getNa() {
            // 当前的类
            console.log(this);
        }
    }

二，set的用法

1.set里面放可遍历对象 不能有重复项

    let set = new Set([1, 2, 3, [4], { name: 'zs' }])
    console.log(set);

2.使用add方法添加成员

   let set = new Set([1, 2, 3, [4], { name: 'zs' }])
 
    set.add('4')
    set.add(2)
    set.add([3])
    var obj = {
        age: 18
    }
    set.add(obj)
    console.log(set);//Set(8)

3.size属性：获取成员的个数。

  console.log(set.size);//8

4.delete( )方法：用户删除Set结构中的指定值，删除成功返回：true，删除失败返回：fasle。

	    console.log(set.delete([4]));//false
  console.log(  set.delete(3));//ture
	 

5.clear( )方法：清除所有成员。

  set.clear()
      console.log(set);//Set(0) {size: 0}

6.has( )方法：判断set结构中是否含有指定的值。如果有，返回true；如果没有，返回fasle。

    console.log(set.has(1));//ture
    console.log(set.has([4]));//false

7.entries( )方法：返回一个键值对的遍历器。

    console.log(set.entries());

8. keys( )方法：返回键名的遍历器。 values( )方法：返回键值的遍历器。

9.Weakset结构

    let wSet = new WeakSet([[1, 2, 3], { name: 'zs' }])
     console.log(wSet);//WeakSet {Array(3), {…}}

10.WeakSet 结构不会有keys( )，values( )，entries( )，forEach( )等方法和size属性。

三，map的用法

1.数组里放数组

  let map = new Map([[1, 2], ['name', 'zs']]) // key任意类型

2.set(key，value )方法作用：给实例设置一对键值对，返回map实例

 map.set(4, 5)
    map.set([4], [5])

3.get( )方法作用：获取指定键名的键值，返回键值。

    console.log(map.get(4));
    console.log(map.get([4]));  // undefined
    console.log(map.get('name'));

4. WeakMap的基本用法 不可遍历 key必需是引用类型

     let wMap = new WeakMap([[[1], 2]])

    wMap.set([3], 4)
    wMap.set(function () { }, 4)
    console.log(wMap);//WeakMap {ƒ => 4, Array(1) => 4, Array(1) => 2}

四，promise的初衷；解决回调地狱（回调函数层层嵌套）

1. promise本身不是异步的，但是then方法是异步的（重点）

  // 1、创建Promise对象
    let pro = new Promise(function (resolve, reject) {
 		 console.log(resolve);  // 成功的
         console.log(reject);  //  失败的时候
         resolve()
         reject('失败了')   // catch
         resolve(123)   //then
       
   
          2、promise的状态：（重点）
                pending: 等待中（初始化）
                fulfilled: 成功  resolve()
                rejected: 失败    reject()
                    等待中（初始化）===> 成功  等待中（初始化）===> 失败 (不可逆转)
       
    })
 1. 参数是resolve里面的数据
 2. 链式调用

2. 下一个.then的参数是上一个.then的返回值 （重点）

     let pro = new Promise(function (resolve, reject) {
        resolve(123)  
    })
        pro.then(function (res) {
        console.log(2);//2
        console.log(res);//123
        return 1
    }).then(function (res1) {
        console.log(res1);//1
    }).catch(function (error) {
        console.log(error);
    })

五，promise的应用

1. Promise.all( )方法：接受一个数组作为参数，数组的元素是Promise实例对象，当参数中的实例对象的状态都为fulfilled时，Promise.all( )才会有返回。

2.Promise.race()方法：它的参数要求跟Promise.all( )方法一样，不同的是，它参数中的promise实例，只要有一个状态发生变化（不管是成功fulfilled还是异常rejected），它就会有返回

六，async await 的基本使用

    function fn_1() {
        return 'fn_1'
    }
    function fn_2() {
      
        return new Promise((resolve) => {
            setTimeout(() => {
                num = 10
                return resolve('fn_2')
            }, 2000)
        })
    }
    function fn_3() {
        console.log(num);
        return 'fn_3'
    }

    async function fn() {
        // await  等待
        console.log(fn_1());
        console.log(await fn_2());
        console.log(fn_3());
    }

七，导出Export：作为一个模块，它可以选择性地给其他模块暴露（提供）自己的属性和方法，供其他模块使用。

 function getUserInfo(){
    console.log('拿到个人信息了');
}

 var age = 10

 var obj = {
    name:'ls',
    age:1
 }
 export let age = 10

 export let name = 'name'
 let name = 'name'

1. 批量导出 普通导出

export {age,name,getUserInfo,obj}

2. 默认导出 （只能导出一次）

export default{
    name:'zs',
    function(){
        console.log(123);
    }
}

八，导入Import：作为一个模块，可以根据需要，引入其他模块的提供的属性或者方法，供自己模块使用

 import {getUserInfo,name,obj} from 'xxx.js'

1.重命名导出的变量

import {age as myAge} from 'xxx.js'

2.整体导入 我们还可以使用星号*实现整体导入：

import * as object from 'xxx.js'

九，默认导出 ，普通导出的区别

1.普通导出：使用关键字 export 将模块中的变量、函数或类等一次性批量导出，可以导出多个；默认导出：每个模块支持我们导出一个没有名字的变量，我们使用关键语句export default来实现

2.普通导出可以导出可以包括变量、函数、类等；默认导出可以是任何JavaScript类型，包括对象、函数、类等

3.导入默认导出时，可以使用任何名称来引用；普通导出时，需要使用花括号来引用每个导出，并且需要使用相应的名称来引用每个导出。