133. 面试官：JSBridge是什么？

133期

1. JSBridge是什么？

2. 前端开发中，有哪些跨端开发方案？

3. 给定二叉树中的2个节点，请查找最近的公共节点？

132期问题及答案

1. vite为什么比webpack快？

Vite相比Webpack更快的原因主要有几个方面，让我们从不同的角度来看：

1. 开发服务器速度：

• Vite： Vite利用ES模块的特性，采用了基于浏览器原生模块系统的开发服务器。这样在开发过程中，每个模块可以被单独请求，而不需要像Webpack那样将整个应用打包成一个大的文件。这带来了更快的热更新和启动速度。

• Webpack： Webpack则采用了热模块替换（HMR）的方式，通常需要维护一个运行时的模块图，而且在热更新时可能会涉及到整个包的重新构建，导致速度较慢。

依赖解析：

• Vite： Vite通过将依赖关系推迟到运行时，只在需要时去解析模块，这减少了启动时的不必要的工作，提高了速度。

• Webpack： Webpack在构建时就需要解析整个依赖图，这可能导致构建速度较慢。

按需编译：

• Vite： Vite在开发过程中，只编译你实际需要的部分，而不是整个应用。这就意味着你修改一个文件时，只有该文件会被重新编译，而不是整个项目。

• Webpack： Webpack通常需要一次性编译整个应用，这在大型项目中可能会导致较长的构建时间。

示例代码（HTML格式）：

综上所述，Vite的快速主要来自于对ES模块的利用，按需编译以及更高效的开发服务器。在小型到中型项目中，Vite可能会更加迅速，但对于大型项目，两者性能的差距可能会减小。选择使用哪个工具还需考虑到项目的具体需求和复杂性。

2. vue3如何设置全局变量？

在Vue 3中，你可以使用provide和inject来实现全局变量的设置和访问。这一模式允许你在整个Vue应用程序中共享变量而无需通过props一层层传递。以下是从多个角度详细解释如何设置全局变量：

1. 使用 provide 和 inject：

设置全局变量的文件（例如main.js）：

import { createApp, provide } from 'vue';
import App from './App.vue';

// 创建app实例
const app = createApp(App);

// 全局变量
const globalVar = '我是全局变量';

// 通过provide设置全局变量
app.provide('globalVar', globalVar);

// 挂载应用
app.mount('#app');

在组件中使用全局变量：

import { inject } from 'vue';

export default {
  // 在组件中通过inject获取全局变量
  setup() {
    const globalVar = inject('globalVar');

    // 现在globalVar在组件中可用
    console.log(globalVar);

    // ...其他逻辑

    return {
      // 返回组件需要的变量或方法
    };
  },
};

2. 使用 Vue 实例属性：

设置全局变量的文件（例如main.js）：

import { createApp } from 'vue';
import App from './App.vue';

// 创建app实例
const app = createApp(App);

// 全局变量
const globalVar = '我是全局变量';

// 将全局变量挂载到Vue实例的config.globalProperties上
app.config.globalProperties.$globalVar = globalVar;

// 挂载应用
app.mount('#app');

在组件中使用全局变量：

export default {
  setup() {
    // 在组件中通过this.$globalVar获取全局变量
    const globalVar = this.$globalVar;

    // 现在globalVar在组件中可用
    console.log(globalVar);

    // ...其他逻辑

    return {
      // 返回组件需要的变量或方法
    };
  },
};

以上两种方法都可以在整个Vue应用程序中方便地使用全局变量。选择其中一种方法通常取决于你的项目结构和个人偏好。

3 for in和for of的区别？

for...in 和 for...of 是 JavaScript 中两种不同的循环语句，它们有一些关键的区别。让我们从多个角度详细解释这两者之间的区别：

1. 遍历的对象类型：

• for...in：

  • 用于遍历对象的可枚举属性（包括继承的属性）。

  • 通常用于遍历对象的键名。

• for...of：

  • 用于遍历可迭代对象（Array，Map，Set，字符串等）的值。

  • 不会遍历对象的属性，而是访问对象的 [Symbol.iterator] 属性。

2. 使用场景：

• for...in：

  • 适合遍历对象属性，例如遍历对象的键名。

  • 不建议用于遍历数组，因为它可能会包括原型链上的属性。

• for...of：

  • 适合遍历具有迭代器的可迭代对象，例如数组、字符串、Map、Set 等。

  • 不适用于普通的对象，因为它们没有内置的迭代器。

3. 遍历顺序：

• for...in：

  • 遍历顺序是不确定的，因为它依赖于对象属性的插入顺序。

• for...of：

  • 遍历顺序是按照对象的迭代器定义的顺序，通常是按照对象元素的插入顺序。

4. 示例代码：

// for...in 遍历对象属性
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // 输出 a, b, c
}

// for...of 遍历数组元素
const arr = [1, 2, 3];
for (const value of arr) {
  console.log(value); // 输出 1, 2, 3
}

综上所述，for...in 适用于遍历对象的属性，而 for...of 适用于遍历可迭代对象的值。选择使用哪个循环应该基于你的具体需求和遍历的对象类型。

我要提问

如果你遇到有趣的面试题，或者有想知道的前端面试题，可以在下面的小程序提问，收到问题后会在第一时间为你解答。

我要出题

学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。