15. Promise异步操作
-
使用promise封装Ajax
const p = new Promise(function (resolve, reject) { //1. 创建XMLHttpRequest对象 let xhr = new XMLHttpRequest(); //2. 初始化 xhr.open('GET','https://api.apiopen.top/getJoke') //3. 发送请求 xhr.send(); //4. 绑定事件,处理响应结果 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status < 300){ resolve(xhr.response) }else { reject(xhr.status) } } } }) //指定回调 p.then(function (value) { console.log(value) },function (reason) { console.error(reason) })调用then方法，then方法返回结果为Promise对象，所以可以进行链式叠加，对象状态由返回结果决定，PromiseStatus,PromiseValue
a.如果返回的是非promise类型结果，状态为成功，返回值为对象的成功的值-
es11中Promise.allSettled,返回是成功结果，Promise.all只要有一个失败，则返回失败
const p1 = new Promise((resolve, reject) => { resolve("成功") }) const p2 = new Promise((resolve, reject) => { reject("失败") }) const result = Promise.allSettled([p1,p2]) console.log(result)//总体是成功，值[PromiseResult]中有一个是失败， const res = Promise.all([p1,p2]) console.log(res);//失败，Error
16. Set集合,WeakSet
-
set是一种新的数据结构，跟数组类似，但是里边的值是唯一的,本身具有iterator函数，可以使用扩展运算符和for of遍历
// 创建Set, let s = new Set(); let s2 = new Set([1,2,2,3,4])//{1, 2, 3, 4} //元素个数 console.log(s2.size)//4 //添加元素 s2.add(6) //删除元素 s2.delete(4) //检测 console.log(s2.has(3)) //清空 s2.clear() console.log(s2) for (let i of s2){ console.log(i) } -
应用：去重，交集，并集，差集
let s1 = [1,2,3,4,5,4,3] let s2 = [4,5,6,4] //1. 去重 let s3 = [...new Set(s1)] console.log(s3)//[1,2,3,4,5] // 2. 交集 let s4 = [...new Set(s1)].filter(item => new Set(s2).has(item)) console.log(s4)//[4,5] // 3. 并集 let s5 = [...new Set([...s1,...s2])] console.log(s5)//[1,2,3,4,5,6] //4. 差集，s1中有,s2没有的 let s6 = [...new Set(s1)].filter(item => !new Set(s2).has(item)) console.log(s6)//[1,2,3] -
WeakSet集合与Set区别
- WeakSet只能用于对象
- WeakSet不能使用遍历
- WeakSet不能使用.clear
-
Set比WeakSet使用范围广，为什么还要使用WeakSet?
在weakSet中，将对象设为null后，就相当于就此对象进行垃圾回收（在js中创建新的值时会分配内存，不再使用时会释放内存，这种释放内存的过程称为垃圾回收），想要高效，轻便的去创建对象时就可以使用WeakSet
const s1 = {name:'lili',age:18} const s2 = {name:'zhangsan',age:20} let s3 = {name:'rose',age:25} const student = new WeakSet([s1,s2,s3]) let s3 = null console.log(student)//Uncaught SyntaxError: Identifier 's3' has already been declared
17. map
-
map类似与对象，对象的键值对，键只能是字符串，所以有时候就不方便，map的键可以是任一种类型（包括对象）;map也可以使用扩展运算符和for of遍历，增删改查
//创建map let m = new Map(); //1. 添加元素(键，值) m.set('name','lisi') m.set('change',function () { console.log('map键值对') }) let key = { adress: 'Adress' } m.set(key,['北京','上海']) //2. 个数 console.log(m.size);//3 //3. 删除 m.delete('name') //4. 获取 console.log(m.get(key))//['北京','上海'] //5. 清空 m.clear() console.log(m);
18. 类，生成实例对象的方法：构造函数，类
1.创建实例对象
-
使用构造函数生成实例对象
//1. 使用构造方法 let Phone = function (brand,price) { this.brand = brand; this.price = price; } //添加方法 Phone.prototype.call = function () { console.log("我可以打电话") } //创建实例对象 let Huawei = new Phone('huawei',3999) Huawei.call() console.log(Huawei) -
使用class
//2. 使用class class Shouji { //构造方法，必须使用constructor名字，不能修改 constructor(brand,price) { this.brand = brand; this.price = price; } //方法必须使用 函数名（）,不能使用es5写法 call(){ console.log("我可以打电话") } } //创建实例对象 let onePlus = new Shouji('1+',2999) onePlus.call() console.log(onePlus)
2. 静态成员
-
静态成员，只属于构造函数的属性，方法，实例对象使用不了
function Phone() { } Phone.name = 'Huawei'; let huawei = new Phone() console.log(huawei.name);//undefined -
class写法是static
class Shouji{ //静态成员static static name = '1+' } let onePlus = new Shouji() console.log(onePlus.name);//undefined
3. 继承
-
构造函数继承
function Phone(brand,price) { this.brand = brand; this.price = price; } //添加方法 Phone.prototype.call = function () { console.log("我可以打电话") } //子级函数 function SmartPhone(brand,price,size) { //将Phone中的this指向SmartPhone Phone.call(this,brand,price) this.size = size; } //设置子级构造函数的原型 SmartPhone.prototype = new Phone SmartPhone.prototype.constructor = SmartPhone; //声明子类的方法 SmartPhone.prototype.paizhao = function () { console.log("我可以拍照") } //创建实例对象 const Huawei = new SmartPhone('huawei',3999,'5.5inch'); console.log(Huawei) -
类继承，extends super，父类中的方法，不能用super调用，只能重写,在子类中super必须在this之前被调用
class Shouji { //构造方法，必须使用constructor名字，不能修改 constructor(brand,price) { this.brand = brand; this.price = price; } //方法必须使用 函数名（）,不能使用es5写法 call(){ console.log("我可以打电话") } } //在子类的构造函数中，只有调用super之后，才可以使用this关键字 class SmartPhone extends Shouji { constructor(brand,price,size){ super(brand,price);//super用作函数，super必须在this之前被调用，否则会出错 this.size = size; } call(){ super.call();//super用作对象 } photo (){ console.log("拍照") } } let xiaomi = new SmartPhone('小米','3999','5.5inch'); console.log(xiaomi)
4. get,set
class Phone {
get Price () {
console.log("价格被查到")
}
//set方法必须传参
set Price (p) {
console.log(p)
}
}
const xiaomi = new Phone()
xiaomi.Price = 2999
console.log(xiaomi)
5. 私有属性，只能在内部调用,#表示
class Obj {
name;
#age;
constructor(name,age) {
this.name = name;
this.#age = age;
}
info() {
console.log(this.#age)
}
}
const gril = new Obj('lili',18)
console.log(gril)//{name: "lili", #age: 18}
//console.log(gril.#age)//Error:Private field '#age' must be declared in an enclosing class
gril.info();//18
19. 对象的扩展
1. Object.is 判断两个值是否完全相等
console.log(Object.is(12,12))//true
console.log(Object.is(0.1+0.2,0.3))//false
console.log(0.1+0.2 === 0.3)//false
console.log(Object.is(NaN,NaN))//true,NaN跟其他都是false
console.log(NaN===NaN)//false
2. Object.assign对象的合并,后边的将前边的覆盖，前一个有后一个没有会报错,Object.assign不是深拷贝
const obj1 = {
host:'localhost',
port: 8000,
}
const obj2 = {
host: '127.0.0.1',
port: 8080,
}
let obj = Object.assign(obj1,obj2)
console.log(obj)//{host: "127.0.0.1", port: 8080}
//Object.assign不是深拷贝
const obj1 = {
name: 'lili',
age: 18,
school: {
city: 'beijing'
}
}
const obj2 = Object.assign(obj1)
console.log(obj2);
obj2.school.city = 'shanghai'
console.log(obj1.school.city);
3. Object.setPrototypeOf 设置原型对象 Object.getPrototypeOf,虽然可以，但是不建议使用
const school = {
name: '河工大'
}
const cities = {
city: ['北京','上海']
}
let obj = Object.setPrototypeOf(school,cities)
console.log(Object.getPrototypeOf(school))
console.log(school)
4. es8对象方法扩展Object.keys, Object.values, Object.entries, Object.getOwnPropertyDescriptors
const obj = {
name: 'lisi',
age: 18,
cities: ['北京','上海']
}
console.log(Object.keys(obj));//["name", "age", "cities"]
console.log(Object.values(obj));//["lisi", 18, Array(2)]
//entries是将键值放到一个数组中，第一个键，可以用作Map
let en = Object.entries(obj);
console.log(en);//[Array(2), Array(2), Array(2)]->第一个数组["name", "lisi"]
let m = new Map(en);
console.log(m)
//对象属性的描述对象
let getPro = Object.getOwnPropertyDescriptor(obj)
Object.entries将对象转化为数组
5. es10中 Object.fromEntries将数组转为对象
const arr = [
['name','lili'],
['age','18']
]
console.log(Object.fromEntries(arr));//{name: "lili", age: "18"}
20. 模块化
1. 模块的好处？
1. 防止命名冲突
2. 可复用性
3. 高维护性，可以只修改一部分代码
2. 暴露，引入（3种暴露，3种引入）
- 导出，分别导出
export let name = 'zhangsan'
export function getName(){
console.log('lisi')
}
通用的引入：必须写上.js，否则会出错；as是重新命名
import * as m1 from './js.js'
console.log(m1)
-
统一导出
let name = 'zhangsan' function getName() { console.log('lisi') } export {name,getName}解构赋值形式引入，没有加default的都需要加{}
import {name,getName} from "./js.js"; console.log(name); console.log(getName()) -
默认导出，export default
const obj = { name: 'lili', getName() { console.log(this.name) } } export default obj导入：默认导出不需要加{}
import obj from './js.js' console.log(obj)
3. 一般会新建一个js，将需要引入的在此页面引入，然后在html页面引入
html:
app.js
// import * as m1 from './js.js'
// console.log(m1);
// import {name,getName} from "./js.js";
// console.log(name);
// console.log(getName())
import obj from './js.js'
console.log(obj)
导出js页面不变
4. babel转换,es6转为es5
- 安装工具 npm install babel-cli babel-preset-env browserify -D，babel-cli是命令行工具，将es6转换为es5的包，browserify 打包工具，在项目中用webpack,都需要配置
- npx babel src/js -d dist/js 将src/js转换为dist/js
- 打包 npx browserify dist/js/app.js -o dist/bundle.js
21. 数组的扩展
1. es7增加的数组实例includes(),是否包含给定的值，es5中的indexOf返回的是-1
const arr1 = ['lisi','zhangsan','hahh']
console.log(arr1.includes('lili'));//false
2. flat将多维数组转为低维数组，如将二维数组转为一维数组
const arr = [1,2,3,[4,5]]
const arr2 = [1,2,3,[4,5,[6,7]]]
console.log(arr.flat());//[1, 2, 3, 4, 5]
console.log(arr2.flat(2));//[1, 2, 3, 4, 5,6,7]
22. async 和 await
1. async函数，异步操作更方便，是Generator的进一步优化
-
使用async,await;返回结果都是promise，如果返回的是promise对象，则resolve成功，reject失败；如果返回的不是promise类型，只要返回结果就等于成功,返回的值是PromiseResult的值，只有是error的时候才是reject
async function getName() { return 'lisi' } console.log(getName())[图片上传失败...(image-365706-1617184274425)]
-
await只能放在async中，相当于generator的yield
//await一般放置promise返回结果 const p = new Promise((resolve, reject) => { console.log('用户数据') }) async function getPerson() { let result = await p console.log(result) } getPerson()
23. 字符串的扩展
1. es10字符串的方法扩展,trimStart(清除字符串左侧空格), trimEnd(清除字符串右侧空格),es5中trim全部清除空格
let str = ' lisi ';
console.log(str);// 空格lisi空格
console.log(str.trimStart())//lisi空格
console.log(str.trimEnd())//空格lisi
24. 可选链操作 ?.
-
如在赋值时，需要先判断是否存在
function main(config) { //判断是否存在 //如果没有传值，则会报错 const dbHost = config && config.db && config.db.host //如果没有传值，是undefined const dbHost1 = config?.db?.host console.log(dbHost) console.log(dbHost1) } main({ db:{ host: '127.0.0.1' } })
25. Proxy代理，a通过c告诉b,c是代理
1. 使用get捕获器，使proxy能处理对属性访问权的调用
new Proxy(将要代理的对象, 被代理对象要处理方法的对象)
const richard = {status: 'looking for work'};
const handler = {
get(target, propName) {
console.log(target);//{status: "looking for work"}
console.log(propName);//status
return target[propName];
}
};
const agent = new Proxy(richard, handler);
console.log(agent.status);//looking for work
2. set捕获器，截获要更改的属性的代码，比如要更改payRate属性，就可以在set中
const richard = {status: 'looking for work'};
const handler = {
set(target, propName, value) {
if (propName === 'payRate') { // 如果工资正在确定，则需要15%作为佣金。
value = value * 0.85;
}
target[propName] = value;
}
};
const agent = new Proxy(richard, handler);
agent.payRate = 1000; // 将演员的工资设置为 1,000美元
agent.payRate; // 850美元是演员的实际工资
3. proxy和getter,setter
-
getter和setter需要初始化，当没有初始化时，获得的值只是新添加的
var obj = { _age: 5, _height: 4, get age() { console.log(`getting the "age" property`); console.log(this._age); }, get height() { console.log(`getting the "height" property`); console.log(this._height); } }; obj.age; // 打印 'getting the "age" property' 和 5 obj.height; // 打印 'getting the "height" property' 和 4 obj.weight = 120; // 在对象上设置一个新的属性 obj.weight; // 只打印120,不打印'getting the "weight" property'-
使用proxy就不用每次都初始化
const proxyObj = new Proxy({age: 5, height: 4}, { get(targetObj, property) { console.log(`getting the ${property} property`); console.log(targetObj[property]); } }); proxyObj.age; // 打印 'getting the age property' 和 5 proxyObj.height; // 打印 'getting the height property' 和 4 proxyObj.weight = 120; // 在对象上设置一个新的属性 proxyObj.weight; // 打印 'getting the weight property' 和 120
-