每日三问-前端（第十八期）

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

2023年6月7日

1. 组件间通信是指在 Vue.js 中，不同组件之间进行数据或事件的传递和交互的过程。常用的组件通信方式包括：

• 父子组件通信：通过 props 属性将数据从父组件传递给子组件，子组件通过监听 props 的变化来获取父组件传递的数据。

• 子父组件通信：通过在子组件中触发事件并通过 $emit 方法将数据传递给父组件。

• 兄弟组件通信：可以通过共享一个 Vue 实例、使用事件总线、使用 Vuex 状态管理等方式来实现兄弟组件之间的通信。

• 跨层级组件通信：可以使用 provide/inject 或者使用全局事件总线来实现跨层级组件之间的通信。

2. Flexbox 布局和 Grid 布局都是 CSS 中用于布局的强大工具，它们有一些区别和适用场景：

• Flexbox 布局：Flexbox 是一维布局模型，适用于构建灵活的、基于方向的布局。通过将容器元素设置为 display: flex，可以通过 flex-direction、justify-content、align-items 等属性来控制子元素的排列和对齐方式。

• Grid 布局：Grid 是二维布局模型，适用于构建复杂的网格布局。通过将容器元素设置为 display: grid，可以通过 grid-template-columns、grid-template-rows 等属性来定义网格的列和行，通过 grid-column、grid-row 等属性来控制子元素在网格中的位置。

区别：

• Flexbox 布局适用于一维布局，Grid 布局适用于二维布局。

• Flexbox 更适用于对齐和分布弹性盒子，Grid 更适用于网格化布局。

• Flexbox 布局对于一维的排列更加灵活，而 Grid 布局对于二维的布局更加强大。

适用场景：

• 使用 Flexbox 布局可以轻松实现垂直或水平居中、等高列布局等一维布局需求。

• 使用 Grid 布局可以更好地处理复杂的网格布局，例如页面的栅格化布局、响应式布局等。

3. 深拷贝（Deep Copy）和浅拷贝（Shallow Copy）是在 JavaScript 中用于复制对象或数组的概念。它们之间的区别如下：

• 浅拷贝是创建一个新对象或数组，并复制原始对象或数组中的引用，而不是复制引用指向的对象或数组本身。因此，如果原始对象或数组中的引用对象发生变化，浅拷贝的对象或数组也会受到影响。

深拷贝是创建一个全新的对象或数组，并递归地复制原始对象或数组中的所有值和引用对象。这意味着如果原始对象或数组中的引用对象发生变化，深拷贝的对象或数组不会受到影响。

以下是一个实现深拷贝的示例代码：

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  
  let copy;
  
  if (Array.isArray(obj)) {
    copy = [];
    
    for (let i = 0; i < obj.length; i++) {
      copy[i] = deepCopy(obj[i]);
    }
  } else {
    copy = {};
    
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        copy[key] = deepCopy(obj[key]);
      }
    }
  }
  
  return copy;
}

上述代码通过递归地遍历对象或数组，并复制每个属性或元素来实现深拷贝。这样就能够创建一个全新的对象或数组，确保拷贝后的对象与原始对象完全独立，互不影响。

2023年6月8日

1. es6中增加了哪些扩展？

2. 前端自适应布局有哪些方案？

3. 静态文件css，js会阻塞页面加载吗？

上面问题的答案会在第二天的公众号推文中公布，大家可以关注公众号：程序员每日三问，第一时间获得推送内容。

学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题（死磕自己，愉悦大家） 希望大家在这浮夸的程序员圈里保持冷静，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。