[JavaScript知识库]ES6相关知识扩展

modul模块

导出：

     //默认：
 function format(date) {return date.toLocaleString();}；export default format;
    export function reverse(str){}
    //导出变量：
    export const PRISE = 500;
    //先声明再导出
    export {name,say}

导入：

   <script type="module">
        import format from ‘相对路径’（format可以和导出的时候不一致）
        import {reverse} from ‘相对路径’（reverse要和源文件方法一致）
        //导入所有
            import * as utils from '相对路径';
            utils.say();
            utils.reverse("我喜欢你")
            utils.default(new Date())
    </script>        

导入别名

import {reverse  as  r} from ‘相对路径’

默认和普通方法是一个文件

  import format, { reverse as c, PRISE ,name ,say } from '相对路径';

ES6新增数据类型

1. set：集合（不重复的数组）

   set对应的方法：
   add：添加
   delete：删除
   clear：清空
   size：大小

2. map：图（键名可以是任何类型的对象）
   map对应的方法：
   set（key，value）：设置
   get（key）：获取
   delete：删除
   clear：清空
   size：大小
   has：检测
   […newSet（arr）]：去重

3. symbol：符号（唯一的符号）

4. weekSet：值是引用类型

5. weekMap：值是引用类型

ES6新增类

由于type of class：检测的结果是function，所以类的本质是函数

1. 语法：class Block{ }
2. 构造函数：constructor（）{}
3. 实例化的时候 new 关键字调用的就是构造函数
4. super（）：调用父类的构造函数
5. extends：继承父类的方法
6. static：类的静态属性和方法
7. 类的this指向的是它的实例（也就是new出来的对象）

ES6的迭代类型

可以for of遍历的对象都是可迭代对象

如：String字符串、Array数组、Set集合、Map图

for（let v of myset）
for（let k of myArr.keys（））
for（let v of myArr.values（））
for（let [k,v] of myArr.entriess（））

Promise

// promise承诺 reject拒绝 resolve兑现
    var p = new Promise((resolve, reject) => {
        var n = Math.random();
        setTimeout(() => {
            if (n > 0.5) {
                resolve('买');
            } else {
                reject('不买')
            }
        }, 2000)
    })
    console.log(p);
    // 承诺3个状态 pending准备  rejected拒绝  resolved兑现
    // 状态发生变化就不能更改

    //.then回调函数拿到的是resolved兑现结果的状态
    //.catch回调函数拿到的是rejected拒绝的理由

    p.then(res => {
        console.log(res);
    }, err => console.error(err))

    // p.then(res => {
    //     console.log(res);
    // })
    //     .catch(err => console.error(err))

三个状态：pendding、resolved、rejected，状态的变化不可逆

all（全部）

function downImg(url) {
        //返回promise
        return new Promise((resolve, reject) => {
            //创建img标签
            var img = document.createElement("img");
            //指定src
            img.src = url;
            //加载成功返回图片
            img.onload = function () {
                resolve(img);
            }
            //加载失败返回错误原因
            img.onerror = function (err) {
                reject(err);
            }
        })
    }

    //同时加载三张
    var urls = [
        "https://img.alicdn.com/imgextra/i4/6000000006083/O1CN01tdjfJP1uo430zVbdp_!!6000000006083-2-octopus.png",
        "https://img.alicdn.com/imgextra/i1/6000000001569/O1CN0108sLbY1NSeCvAJtPL_!!6000000001569-0-octopus.jpg",
        "https://img.alicdn.com/imgextra/i3/6000000002368/O1CN01lbQxeC1TMafHbjdvd_!!6000000002368-0-octopus.jpg"
    ];
    
    //Promise.all 在promise参数列表中所有的promise，resolve才会reslove
    Promise.all(urls.map(item => downImg(item)))
        .then(res => {
            console.log(res);
            for (var k of res) {
                document.body.appendChild(k);
            }
        })
        .catch(err => {
            console.error(err);
        })

race（返回最先resolve的结果）

function downImg(url) {
        //返回promise
        return new Promise((resolve, reject) => {
            //创建img标签
            var img = document.createElement("img");
            //指定src
            img.src = url;
            //加载成功返回图片
            img.onload = function () {
                resolve(img);
            }
            //加载失败返回错误原因
            img.onerror = function (err) {
                reject(err);
            }
        })
    }

    //同时加载三张
    var urls = [
        "https://img.alicdn.com/imgextra/i4/6000000006083/O1CN01tdjfJP1uo430zVbdp_!!6000000006083-2-octopus.png",
        "https://img.alicdn.com/imgextra/i1/6000000001569/O1CN0108sLbY1NSeCvAJtPL_!!6000000001569-0-octopus.jpg",
        "https://img.alicdn.com/imgextra/i3/6000000002368/O1CN01lbQxeC1TMafHbjdvd_!!6000000002368-0-octopus.jpg"
    ];

     Promise.race(urls.map(item => downImg(item)))
         .then(res => {
             document.body.appendChild(res);
         })
         .catch(err => {
             console.error(err);
         })

实例P

//实例p
    .then（res=>{}）
        //回调函数获取resolved返回的结果
        //返回一个新的promise实例
    .catch（err=>{}）
        //获取rejected的原因

异步和同步

异步

异步是先执行主线程的代码，再执行其它线程（非阻塞式）

实现异步的方式

1. 回调函数
2. 事件响应
3. 订阅发布模式
4. Promise
5. sync和await

同步

同步是按顺序从上至下阻塞式执行代码（上一行代码不执行完毕，下行是不会执行）

async与await

async

async装饰的函数，返回的是一个promise对象，返回的结果是resolved的结果

await

await用来等待异步中的resolve结果，只能出现在async装饰的函数中

async function doit(){
	var m1 = await say("你笑起来真好看",2000);
	var m2 = await say("像春天的花一样",3000);
	return m1 + m2；
}
doit()
	.then(res => {})
	.catch(err => {})

//例：
function say(msg, delay) {
        return new Promise((resolve, reject) => {
            setTimeout(() => resolve(msg), delay);
        })
    }

    async function doit() {
        var m1 = await say("国庆快乐!", 2000);
        console.log(m1);
        var m2 = await say("祝祖国越来越繁荣昌盛", 3000);
        console.log(m2);
        return "举国欢庆!";
    }
    doit()
        .then(res => console.log(res))

generator生成器

就是在函数前面加个*

function *range(min,max){
	for(var i = min; i < max; i++){
		yield;
	}
}
//生成器执行的结果是一个迭代器
var iter = range(1,10)
//迭代器通过next方法返回一个对象，对象的value是yield生成的结果，在生成器里面遇到yield就停止等待下一次next调用

//结果
{value：1，done：false}
...
{value：undefined，done：false}

可以通过for来遍历迭代器

可以是String，Array，Set，Map的迭代器

for(var v of fange (1,100){
	console.log(v);
})

arr[Symbol.iterator]（）

Object.defineProperty

Object.defineProperty(obj,props,{
	set(v){
		//设置
	}，
	get(){
		//获取
	}，
	configurable : true,//是否能删除
	enumberable : true,//是否可以枚举
	value,//默认值
	writable : true,//是否可写
	...
})

//例：
// vue2响应式原理  Object.defineProperty 结合订阅发布模式，通过观察者链接视图与数据
    // Object.defineProperty 劫持对象的getter与setter
    // Object对象 define订阅 Proterty属性  throw抛出

    var obj = { _age: 18 };
    Object.defineProperty(obj, "age", {
        get() {
            return this._age;
        },
        set() {
            if (v > 200 || v < 1 || isNaN(v)) {
                throw "年龄设置错误"
            } else {
                this._age = v;
            }
        }
    })

proxy代理对象

//要被劫持的对象
    var obj = {
        price: 100
    }
    //处理器
    var handle = {
        get(target, property) {
            //对obj对象进行get或者set的劫持
            console.log(new Date().toLocaleString(), "又在看钱包了");
	//target目标处理对象
        },
        set(target, property, value) {
            target[property] = value;
            console.log(("我的钱包变成了" + value));
        }
    }
    //生成代理对象 proxy
    var proxy = new Proxy(obj, handle)