Set与Map数据结构
Set:类似于数组，但是成员的值都是唯一的，特点没有重复的值(内部是使用的===来进行比较的)
本身的话就是一个构造函数，用来生成Set数据结构，就收一个数组或者是实现了Iterator接口的数据结构作为参数，用来初始化，他也是实现了Iterator接口的，所以可以使用for...of来进行遍历，可以使用解构赋值来进行解构
举个栗子,去重
const objTow={name:'李华'}
const objThree=objTow
const objFour=objThree
const arr=[1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,objTow,objThree,objFour]
console.log([...new Set(arr)])//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, { name: '李华' } ]Set也提供了一些方法，比如add,delete,has,clear 和用来遍历的forEach,keys,values,entries
Map 对象plus版本，他的键的范围不限于字符串，各种类型的值都可以当做键，包括symbol
map也接收一个数组或者是实现了Iterator接口的数据结构作为参数，用来初始化，他也是实现了Iterator接口的，所以可以使用for...of来进行遍历，可以使用解构赋值来进行解构
举个栗子
const obj={
title:'lll'
}
const map = new Map([
['name', '张三'],
['age', 18],
[obj, 'Author']
]);
map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has(obj) // true
map.get(obj) // "Author"
map.has('age') // true
map.get('age') // "Author"
map的key是唯一的，如果重复的话，后面的会覆盖前面的，如果他是引用数据类型的话仍是对比的他的内存地址
举个栗子
const obj = {
title: 'lll'
}
const map = new Map([
[obj, '李华'],
[obj, 'Author']
]);
map.get(obj)// "Author"
map提供的方法与set差不多，包括遍历，新增，删除，清空等
map转数组
const myMap = new Map()
.set(true, 7)
.set({ foo: 3 }, ['abc']);其实也只需要解构就行，不过得到的是二元数组,不过可以使用数组的flat方法来进行扁平化
console.log([...myMap].flat(2))//[ true, 7, { foo: 3 }, [ 'abc' ] ]当然map也可以与对象，或者JSON互相转换
weak系列
包括weakSet和weakMap都是弱引用，我个人人为可以这样去理解
weakSet和weakMap都是弱引用，他们的key只能是对象，不能是其他的数据类型，他们的key是弱引用，也就是说，如果他的key是一个对象，
那么当这个对象在其他地方被删除的时候，weakSet和weakMap中的key也会被删除，这样就可以防止内存泄漏
其实也就是说如果一个对象没有在外部没有被引用的时候，即使weakSet和weakMap中有这个对象，也会被删除
其实实际开发中用的并不多，不过在vue3中的响应式原理中使用的就是weakMap
Promise
两个特点：1.对象的状态不受外界影响，只有异步操作的结果可以决定当前是哪一种状态，2.一旦状态改变，就不会再变，任何时候都可以得到这个结果
Promise的方法是存在与原型上的，所以可以使用then方法来进行链式调用，解决了回调地狱的问题
三种状态：pending(进行中) fulfilled(已成功) rejected(已失败)
Promise微任务，他的构造函数是同步执行的，但是then方法是异步执行的
Promise接收一个函数作为参数，这个函数有两个参数，分别是resolve和reject，他们都是函数，
resolve函数的作用是将Promise对象的状态从pending变成fulfilled，reject函数的作用是将Promise对象的状态从pending变成rejected
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
const myPromise = new Promise((resolve, reject) => {
//模拟异步操作
setTimeout(() => {
reject('成功')
}, 2000)
})
myPromise.catch((res) => {
console.log(res, '得到的异步结果')
})
使用promise简单的实现ajax
const queryData = function (methed = 'GET', url) {
const promise = new Promise(function (resolve, reject) {
const handler = function () {
//单状态变为4时，表示请求已完成
if (this.readyState !== 4) {
return;
}
//网络状态码为200时，表示请求成功
if (this.status === 200) {
//返回响应体中的数据
resolve(this.response?.data);
} else {
//抛出错误
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open(methed, url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
});
return promise;
};
promise实现并发请求，他提供了4个方法，all，race，allSettled，any
all方法用于将多个Promise实例，包装成一个新的Promise实例，只有所有的Promise实例的状态都变成fulfilled，
这个新的Promise实例的状态才会变成fulfilled，只要有一个变成rejected，这个新的Promise实例的状态就会变成rejected
举个栗子
const p1 = new Promise((resolve, reject) => {
setTimeout(() => reject(new Error('fail')), 3000)
})
const p2 = new Promise((resolve, reject) => {
setTimeout(() => resolve({
msg: '成功',
data: { name: '李华' }
}), 2000)
})
const p3 = new Promise((resolve, reject) => {
setTimeout(() => resolve({
msg: '成功',
data: { name: 'lili' }
}), 1000)
})
const allFailPromise = Promise.all([p1, p2, p3])
allFailPromise.then((res) => {
console.log(res, 'all')
}).catch((err) => {
console.log(err, 'all')
})//3秒后打印Error: fail all
const allSuccessPromise = Promise.all([p1, p2, p3])
allSuccessPromise.then((res) => {
console.log(res, 'all')
}).catch((err) => {
console.log(err, 'all')
})//2秒后打印[{ msg: '成功', data: { name: '李华' } }, { msg: '成功', data: { name: 'lili' } }]all
race方法用于将多个Promise实例，包装成一个新的Promise实例，只要有一个实例率先改变状态，那么新的Promise实例的状态就会跟着改变
const racePromise = Promise.race([p1, p2, p3]);
racePromise.then((res) => {console.log(res)}).catch((err) => {})//1秒后打印{ msg: '成功', data: { name: 'lili' } }
any方法用于将多个Promise实例，包装成一个新的Promise实例,只要参数实例有一个变成fulfilled状态，
包装实例就会变成fulfilled状态；如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态。
Promise.reject 方法的作用，等同于直接返回一个状态为 rejected 的 Promise 对象。
Promise.resolve方法的作用，等同于直接返回一个状态为 resolved 的 Promise 对象。
Generator函数是基于状态机的编程模型，执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了是状态机，还是一个遍历器对象生成函数。
与Promise相比，它的优势在于可以交出函数的执行权（即暂停执行）。Generator 函数是一个普通函数，
但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态，自己也是使用过云谦的Dava这个状态管理流的，其中对于异步的处理便是使用的generator函数
举一个简单的异步使用的栗子
function* myGen(x) {
var y = yield x + 2;
return y;
}
var g = myGen(1);
g.next() // { value: 3, done: false }
g.next() // { value: undefined, done: true }
async函数是Generator函数的语法糖，async函数就是将Generator函数的星号（*）替换成async，将yield替换成await 函数内部可以自执行，且有更好的语义，返回的是一个promise对象
举个栗子async function MyAsync()
{
const data=await Promise.resolve(
{data:{name:'李华'},msg:'成功'}
)
const res=await new Promise((resolve,reject)=>{
setTimeout(() => { resolve('resData') },2000) })
console.log(data,res,'data')
}
MyAsync()//两秒后打印 { data: { name: '李华' }, msg: '成功' } 'resData' 'data'
async function rejectAsync() {
await Promise.reject('错误');
await Promise.resolve('hello world'); // 不会执行 }
rejectAsync()
防止出错的方法是将其放在try...catch代码块之中。
async function rejectAsync() {
try {
await Promise.reject('错误');
// await Promise.resolve('hello world'); // 不会执行
} catch (err) {
console.log(err, 'err')
}
console.log('hello world')
}
rejectAsync()//错误 'hello world'
class类 基于原型的面向对象编程 他的本质是函数，类的所有方法都定义在类的prototype属性上面
基本使用 举个栗子
class Obj{
constructor(name,age){
this.name='李华'
this.age=18
}
say(){
console.log(this.name)
}
static sayHello(){
console.log('hello')
}//静态方法
}
Obj.sex='男'//静态属性
- THE END -
非特殊说明，本博所有文章均为博主原创。
如若转载，请注明出处：http://www.cx330.cloud/index.php/2023/03/14/es6-tow/
共有 0 条评论