ES6必知，速看！(2)

part 1 类

特点：用class 声明，本质是function，类名建议大写开头
为了更好的学习类，首先要掌握以下单词：

constructor 构造器
super 超级
extends 继承                       
new 实例化                               

实例：

class Cat extends Animal{
constructor(name,color){
    super(name);
    this.color = color;
    }
say(){}
}
var c1 = new Cat("小猫咪","五彩斑斓的黑")

part 2 模块化

script标签的type类型更改为module

<script type="module">

1.导出

导出一个

export {name}

导出多个

export {name,fun}

导出默认

export default Cat

2.导入

import {name} from url
import {name,fun} from url

导入默认

import Cat from url

合并默认

import Cat,{name,fun} from url

导入所有 as关键字

import * as utils from url

文件打开必须是http协议，不能是 D： C: file协议

prat 3 可迭代对象

可以被for of遍历

keys() 键集合
values() 值集合
enteries() 键与值集合

实例

for(let v of arr){
    console.log(v);
}

prat 3 set集合

set集合特点就是内容不重复
初始化

var s1 = new Set([1,1,2])

数组去重

var arr = Array.from(s);

利用set 特性去重

arr = [... new Set(arr)]

常用方法：

add 添加
delete 删除
clear 清空
has 检查是否有
size长度

prat 4 WeakSet 集合

内容不重复
内容必须是引用对象

new WeakSet([,,,])

prat 5 Map 图

类似对象
特点：键可以是任意类型
初始化：

new Map([["zql",20], ["mumu",30], [8,200]])

方法

set 添加
get获取
has 检测
size 长度
delete 删除
clear清空

可以被for of迭代对象还有String 字符串，Array 数组等。

part 6 WeakMap

特点：key都是弱引用

part 7 promise

定义：执行异步任务，避免回调地狱

promise 承诺
reslove 完成解决
reject  拒绝兑现

作用：
1.延期任务解决方案（promise|回调函数）
2.异步操作同步执行（顺序执行）

var p = new Promise(function(reslove,reject){}      
p.then(function(){},function(){})

其他

Promise.all([,,,])
.then()

等待异步列表中全部resolve执行

Promise.race([...])
.then()

异步列表中最resolve的值
实例1：
2s 后对控制台说 其实我观察你
3s 后对控制台说 很久了
5s 后对控制台说 我很中意你啊

function say1(){
   return new Promise(function(reslove,reject){
      setTimeout(function(){
          console.log("其实我观察你");
          reslove();
      },2000)
   })
 }
 say1()
.then(say2)
.then(say3);

实例2：
1.获取当前的地址
2.获取当前的天气（用到地址）
地址https://apis.map.qq.com/ws/lo...
天气http://wis.qq.com/weather/com...|forecast_24h|air&source=pc&province=${data.province}&city=${data.city}

<p>
    <span class="city"></span>
    <span class="weather"></span>
</p>
<script>
    // 定义一个获取api的方法
    function getApi(url) {
        // 返回一个promise实例
        return new Promise((resolve, reject) => {
        $.ajax({
                url,
                dataType: "jsonp",
                success(res) {
                    // 兑现成功 对应.then
                    resolve(res);
                },
                error(err) {
                    // 拒绝兑现 对应.catch
                    reject(err)
                }
            })
        })
    }
    var url = "https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5&output=jsonp"
    // 调用函数 传入url
    getApi(url)
        // 当resolve被执行通过时 .then获取resolve的结果
        .then(res => {
            console.log(res);
            // 设置.city的文字为获取的城市
            var ad_info = res.result.ad_info;
            $(".city").text(ad_info.city)
            var url2 =`http://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=${ad_info.province}&city=${ad_info.city}`;
            // 调用下一个getApi 返回下一个promise实例
            return getApi(url2)
        })
        // .then执行完毕后返回的是个新的promise实例 他也有.then方法(前面不能有;)
        .then(res => {
            console.log("天气", res);
            var str = `${res.data.observe.degree}°C,${res.data.observe.weather}`;
            $(".weather").text(str);
        })
        // 获取失败时 控制台输出失败的结果
        .catch(err => console.log(err))
    </script>