手打基础丸 🧆 => 精选基础知识,经过多道工序精心制作而成,口感鲜嫩多汁。一口咬下,香气四溢,加上传统前端风味,令人回味无穷...... 助力食用者厚积薄发,夯实根基进阶上层。
Promise.all和Promise.race?
Promise.all: 并行多个异步操作,所有都成功则会最终返回一个Promise包含所有成功结果(返回顺序同传入顺序一致),如果有一个失败了那么就会立即返回一个Promise包含错误信息
Promise.race: 返回第一个完成的Promise,无论成功还是失败。
const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 1000, 'promise1'))
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'promise2'))
Promise.race([promise1, promise2])
.then(value => {console.log(value)})// “promise2”
async/await?
Promise的语法糖,同样用于处理异步操作
async: 用于声明一个异步函数
总是返回一个Promise
如果执行过程中内部发生错误,错误会一直向外传播,直到被捕获为之。
await: 与async搭配使用且只能在async函数中使用
暂停async函数的执行等待直到一个Promise完成才继续向下执行。
async/await可以和Promise.all结合使用处理多个异步操作并行
async function fetchData(){
return 'already fetchData'
}
async function processData(){
const [data1, data2] = await Promise.all(([fetchData(), fetchData()])
console.log(data1, data2) //already fetchData already fetchData
}
JS创建对象的方式?
// 对象字面量:最常用的方式,直接使用大括号创建
const food = {
name: 'banana',
color:'yellow'
expireDate: '20250430',
expire: function() { console.log(this.expireDate) }
}
// 构造函数,函数名一般大写
const Food_construct(name, color) {
this.name = name;
this.color = color
}
const newFood = new food_construct('apple', 'red');
// Object.create():以现有对象作为原型创建一个新对象
const newFood2 = Object.create(food)
newFood2.name = 'peach'
newFood2.color = 'pink'
// class关键字(ES6引入),类名一般大写,
class Food {
constructor(name, color) {
this.name = name
this.age = age
}
description() {
console.log(`name: ${this.name}, color: ${this.color}`)
}
}
const newFood3 = new Food('passionfruit', 'brown')
// 工厂函数,返回一个对象实例,与构造函数相似但是更适合管理更多对象
const createFood(name, color){
return {
name: name,
color: color,
description: function(){
console.log(`name: ${this.name}, color: ${this.color}`)
}
}
}