ES6进阶版

文章目录

• 前言
• 一、类
• • 1.创建类
• 二、模块化
• • 1.export 导出和import导入
• 三、可迭代对象
• • 1.set 数组去重
  • 2.WeakSet
  • 3.Map
  • 4.for of
  • 4.Promise
  • • 异步处理
    • Promise解决回调地狱
    • Promise实现网络请求
• 总结

前言

ES6 的出现主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念

目前存在少数低版本浏览器的 JavaScript 是 ES5 版本，大多数的浏览器已经支持 ES6

ES6基础链接: http://t.csdn.cn/xUElx.

一、类

ES6 中有 class 语法。值得注意是，这里的 class 不是新的对象继承模型，它只是原型链的语法糖表现形式。

1.创建类

代码如下：

//创建一个类
class Animal {
       constructor(color,age){
           this.color = color;
           this.age = age;
       }
       yeil(){
           alert("我大声咆哮");
       }
   }

  class Cat extends Animal{
       constructor(color,age,name){
            //父类构成函数
            //调用Animal构造函数constructor
           super(color,age); 
           this.name = name;
       }
       skill(){
           alert("我超级会卖萌");
       }
   }
   // 实例化猫类
   var c1 = new Cat("黄色",2,"kitty");
   var c2 = new Cat("黑色",1,"可乐");
   c1.skill();
   c1.yeil();

二、模块化

1.export 导出和import导入

在html中模块化引入js 
1. 有http服务器
2. <script type="module">

HTML代码如下：

//导入
import{name,fun} from"./js/utils.js"
console.log(name);
//导入函数
import{fun} from'./js/utils.js'
fun()
//导入默认  名称可以随便起
import Cat from'./js/utils.js'
var c1=new Cat("小不点")
console.log(c1);

			
			

导入所有内容

//导入所有内容 起一个别名叫utils 从url里面找到
		import * as utils from './js/utils.js';
			 console.log(utils.name);
			 utils.fun()
			 var c=new utils.default("小白")
			 console.log(c); 
			

JS代码如下：

var name="索隆";
export{name}
//导入name
function fun(){
	console.log('我叫'+name+"我要成为世界第一大剑豪");
}
//导出函数
export{fun}

//导出默认
class Cat{
	constructor(name) {
		this.name=name
	    
	}
}
//一个文件里面只能导出一个默认
export default Cat

三、可迭代对象

1.set 数组去重

代码如下（示例）：

var s2 = new Set([1, 2, 3,2]); 
console.log(s2);
//  {1, 2, 3}

var arr=[1,2,3,4,5,1,1,2]
var s2=new Set(arr)
//把数组展开放入新数组内
arr=[...new Set(arr)]		
console.log(arr);
//{1,2,3,4,5}

2.WeakSet

WeakSet结构与Set类似，也是不重复的值的集合。
WeakSet的成员只能是对象，而不能是其他类型的值

3.Map

ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键

var m = new Map([[‘Michael’, 95], [‘Bob’, 75], [‘Tracy’, 85]]);

方法

set get delete clear has size

WeakMap 就是一个 Map，只不过它的所有 key 都是弱引用，意思就是 WeakMap 中的东西垃圾回收时不考虑，使用它不用担心内存泄漏问题。
另一个需要注意的点是，WeakMap 的所有 key 必须是对象。没有size

4.for of

for in 循环用于遍历数组，类数组或对象，ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值。

    var arr = ["路飞", "索隆", "山治", "乌索普"]
        for (let a of arr) {
            console.log(a);
        }
        var str = "富士山什么时间爆发啊：）"
        //一些生僻字一个字占两个字符长度； 避免出错可以用for of
        for (let s of str) {
            console.log(s);
        }

        //keys（）键的集合
        for (let k of arr.keys()) {
            console.log(k);
        }
        //values 值的集合
        for (let v of arr.values()) {
            console.log(v);
        }
        //entries 键与值的集合
        for (let [k, v] of arr.entries()) {
            console.log(k, v);
        }

可以被 for of 遍历的元素

字符串，数组，set，map

4.Promise

ES6 对 Promise 有了原生的支持，一个 Promise 是一个等待被异步执行的对象，当它执行完成后，其状态会变成 resolved 或者rejected。

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

异步处理

 //Promise 主要做异步处理
        //索隆对路飞说要成为世界第一大剑豪（现在还未完成）
        //索隆不能立即执行成为世界第一大剑豪 需要3000毫秒后完成
        var p = new Promise((resolve, reject) => {
            setTimeout(() => {
                var num = Math.random();//随机数
                if (num > 0.5) {
                    //大于0.5时完成承诺
                    resolve("成为世界第一大剑豪")
                } else {
                    //未完成承诺
                    reject("鹰眼手下打猩猩")
                }
            }, 3000);
        })
        //一段时间后（3000毫秒）路飞问索隆然后呢
        p.then(res => {
            //箭头函数简写 完成承诺
            console.log(res);
        })
            .catch(function (err) {
                //回调函数  未完成承诺
                console.log(err);
            })

Promise解决回调地狱

 //2秒后对女生说“你好，很高兴认识你”
        //3秒后 说“能加个微信吗”
        //5秒后被警察抓走 和凣凣做室友

        function say(msg, time) {
            return new Promise((resolve, reject) => {
                setTimeout(() => resolve(msg), time)
            })
        }
        //调用函数 2秒后执行
        say("你好，很高兴认识你", 2000)
            .then(res => {
                console.log(res);
                return say("咱俩能加个微信吗", 3000)
            })
            .then(res => {
                console.log(res);
                return say("被警察抓走，和凣凣做室友", 5000);
            })
            .then(res => {
                console.log(res);
            })

Promise实现网络请求

找到当前城市地址

 function getApi(url){
    return new Promise((resolve,reject)=>{
        $.ajax({
            url,
            dataType:"jsonp",
            success(res){resolve(res)  },
            error(err){reject(err)}
         })
     })
 }
   var url = " https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5&output=jsonp"
   getApi(url);

获取当前城市的天气

 <span class="city"></span>
    <span class="weather"></span>

    <script>

        function getApi(url) {
            return new Promise((resolve, reject) => {
                //发送ajax请求 url请求的地址 datatype请求数据类型 success成功后回调 error失败后回调
                $.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的文本为获取的城市
                $(".city").text(res.result.ad_info.city)
                //获取该城市的天气
                var url2 = `http://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=${res.result.ad_info.province}&city=${res.result.ad_info.city}`
                return getApi(url2)
            })
            .then(res => {
                console.log("天气", res);
                var str = `${res.data.observe.degree}度,${res.data.observe.weather}`
                $(".weather").text(str)
            })
            //失败后控制台输出失败的结果
            .catch(err => console.log(err))

    </script>

总结

• 创作不易，深夜肝文，如果对大家有帮助，还请大家支持一波~
• 点赞，关注，收藏走一波，感激不尽！
• 好人一生平安，一胎生八个！