0430 手打基础丸

145 阅读2分钟

手打基础丸 🧆 => 精选基础知识,经过多道工序精心制作而成,口感鲜嫩多汁。一口咬下,香气四溢,加上传统前端风味,令人回味无穷...... 助力食用者厚积薄发,夯实根基进阶上层。

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}`)
    }
  }
}