每日三问-前端（第十七期）-CSDN博客

本文链接：https://blog.csdn.net/qq_30811721/article/details/131079013

文章介绍了JavaScript中的Promise.all和Promise.race的用法，解释了它们如何处理Promise数组。同时，讨论了Vue.js中的组件通信方法。在CSS布局方面，阐述了Flexbox和Grid布局的特点及应用场景，包括各自的居中策略。最后提到了前端开发中的深拷贝和浅拷贝概念，指出它们的区别，并提供了一种实现深拷贝的方法。

摘要由CSDN通过智能技术生成

先来回顾一下上期的问题及答案：

2023年6月6日

1. `if(a == '1' && a == '2' && a == '3')` 可能为 `true吗？`

可以，通过自定义对象的属性访问器（getter）可以实现。以下是一种可能的解决方案：

let a = {
  value: 1,
  toString() {
    return this.value++;
  }
};

if (a == '1' && a == '2' && a == '3') {
  console.log('条件成立');
}

在这个示例中，对象 a 的属性访问器 toString() 在每次比较时会自增 value 的值，因此可以使条件成立。

2. 在 CSS 中实现居中有哪些方式？

水平居中：
- 使用 text-align: center 将文本居中对齐。
- 使用 margin: 0 auto 将块级元素水平居中。
- 使用 Flexbox 布局，将容器的 justify-content 设置为 center。
- 使用 Grid 布局，将容器的 justify-items 和 align-items 设置为 center。
垂直居中：
- 使用 line-height 将单行文本垂直居中。
- 使用 Flexbox 布局，将容器的 align-items 设置为 center。
- 使用 Grid 布局，将容器的 align-items 设置为 center。
水平垂直居中：
- 使用 Flexbox 布局，将容器的 justify-content 和 align-items 设置为 center。
- 使用 Grid 布局，将容器的 justify-items 和 align-items 设置为 center。
- 使用绝对定位和 transform，结合 top: 50% 和 left: 50% 及 translate(-50%, -50%) 的方式实现居中。

3. 讲解`Promise.all` 和 `Promise.race` 。

Promise.all 接收一个 Promise 数组作为参数，返回一个新的 Promise 对象。它会等待所有的 Promise 都被解决（resolved）或有一个 Promise 被拒绝（rejected）。只有当所有 Promise 都解决时，Promise.all 才会返回一个解决值组成的数组；如果任何一个 Promise 被拒绝，它会立即拒绝并返回被拒绝的原因。
Promise.race 也接收一个 Promise 数组作为参数，返回一个新的 Promise 对象。它会等待第一个解决或拒绝的 Promise，并将其解决值或拒绝原因作为结果。无论第一个 Promise 是解决还是拒绝，Promise.race 都会返回相应的结果。

以下是使用 Promise.all 和 Promise.race 的示例：

// 使用 Promise.all
const promise1 = new Promise((resolve) =>

 setTimeout(() => resolve('Promise 1'), 2000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve('Promise 2'), 1000));

Promise.all([promise1, promise2]).then((values) => {
  console.log(values); // ['Promise 1', 'Promise 2']
});

// 使用 Promise.race
const promise3 = new Promise((resolve) => setTimeout(() => resolve('Promise 3'), 2000));
const promise4 = new Promise((resolve) => setTimeout(() => resolve('Promise 4'), 1000));

Promise.race([promise3, promise4]).then((value) => {
  console.log(value); // 'Promise 4'
});

在上述示例中，Promise.all 等待所有的 Promise 都解决后返回解决值的数组，而 Promise.race 则返回第一个解决或拒绝的 Promise 的结果。