ES进阶(3)

完全靠猜

已于 2022-02-24 09:42:01 修改

阅读量146

点赞数 1

文章标签：前端 javascript es6

于 2022-02-23 20:44:38 首次发布

本文链接：https://blog.csdn.net/Wpl6666/article/details/123098721

版权

Promise承诺

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

promise 承诺

resolve 完成解决

reject 拒绝兑现

Promise解决回调地狱

//2s 后对控制台说 其实我观察你
//3s 后对控制台说 很久了
//5s 后对控制台说  我很中意你啊
function say(msg,time){
	return new Promise((resolve,reject)=>{
		setTimeout(()=>resolve(msg),time)
	})
}
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)}
         })
     })
 }

// 接口 城市 https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5&output=jsonp
// 接口 天气 http://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=河南省&city=郑州市

asyc与await

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个语法错误

async function helloAsync(){
    return "helloAsync";
  }

helloAsync().then(res=>{
console.log(res)
})

function say(msg,time){
	return new Promise((resolve,reject)=>{
		setTimeout(()=>resolve(msg),time)
	})
} 
async function doit(){
	let m1 = await say("其实我观察你",2000);
	console.log(m1);
	let m2 = await say("很久了",3000)
	console.log(m2);
	let m3 = await say("我很中意你啊",5000)
	console.log(m3)
	return m1+m2+m3;
}
 doit()
 .then(res=>{console.log(res)})

Symbol符号

Symbol 是一种新的数据类型，它的值是唯一的，不可变的

var sym = Symbol( "符号" );
console.log(typeof sym); // symbol
//这里 Symbol 前面不能使用 new 操作符。
//如果它被用作一个对象的属性，那么这个属性会是不可枚举的

迭代器（Iterators）

迭代器允许每次访问数据集合的一个元素，当指针指向数据集合最后一个元素时，迭代器便会退出。它提供了 next() 函数来遍历一个序列，这个方法返回一个包含 done 和 value 属性的对象。

var arr = [11,12,13];
var itr = arr[Symbol.iterator]();
 
itr.next(); // { value: 11, done: false }
itr.next(); // { value: 12, done: false }
itr.next(); // { value: 13, done: false }
 
itr.next(); // { value: undefined, done: true }

Generator生成器

Generator 函数是 ES6 的新特性，它允许一个函数返回的可遍历对象生成多个值。

在使用中你会看到 * 语法和一个新的关键词 yield:

function *infinite() {
  var n = 1;
  while (true){
    yield n++;
  }
} 

var numbers = infinite(); // 返回可 迭代对象
numbers.next(); // { value: 1, done: false }
numbers.next(); // { value: 2, done: false }
numbers.next(); // { value: 3, done: false }
//每次执行 yield 时，返回的值变为迭代器的下一个值

Proxy 代理

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

Proxy(target, handler), 这里的 handler 可以是 set get has hasOwn keys 等等方法更多：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

var plain = {
    name : "木木"
};
var proxy = new Proxy(plain, {
    get: function(target, property) {
        return property in target ? target[property] : "你好";
    }
});

proxy.name // "木木"
proxy.title // "你好"