字节前端实习二面 2.29 已挂

回忆一下还记得的

1.问项目

2.以你自己的理解说一下写vue和react的区别，不要背八股文

抱歉，接下来我将继续分析 Vue 和 React 的区别：

设计理念：
- Vue：Vue 的设计目标是简单、灵活和易于上手，它提供了一套渐进式框架，可以逐步引入到现有项目中，也可以作为完整的单页应用开发框架来使用。Vue 的核心概念包括数据驱动、组件化和响应式系统。
- React：React 更加注重组件化开发和声明式编程，它提供了一种使用 JavaScript 编写组件的方式，并通过虚拟 DOM 实现高效的 UI 渲染。React 的核心思想是一切皆为组件，通过组件的组合和嵌套来构建复杂的用户界面。
语法和模板：
- Vue：Vue 使用基于 HTML 的模板语法，允许开发者在模板中直接编写 HTML 和特定的指令（如 v-for、v-if 等），使得模板更加清晰和直观。
- React：React 使用 JSX 语法，它是一种 JavaScript 的语法扩展，允许在 JavaScript 中编写类似 HTML 的标记，将 UI 组件和逻辑混合在一起，使得代码更加直观和易于维护。
状态管理：
- Vue：Vue 提供了 Vuex 库用于集中式状态管理，可以方便地管理应用的状态，并通过单一的状态树来管理多个组件之间的状态共享。
- React：React 本身并不提供状态管理的解决方案，但常与 Redux 或者 MobX 等第三方库配合使用，来实现应用的状态管理。Redux 是一个单向数据流的状态管理库，适用于复杂的应用场景。
生态系统：
- Vue：Vue 生态系统相对较小，但也非常丰富和活跃，有大量的插件和工具可以供开发者选择，如 Vue Router、Vuex、Vue CLI 等。
- React：React 生态系统非常庞大和活跃，有丰富的第三方库和工具支持，如 React Router、Redux、Create React App 等。同时，React 还有一个庞大的社区和开发者社群，有大量的学习资源和教程可供参考。
学习曲线：
- Vue：Vue 的学习曲线相对较平缓，它的文档清晰易懂，可以快速上手，并且提供了丰富的教程和示例。
- React：React 的学习曲线略微陡峭一些，特别是对于初学者来说，需要理解 JSX 语法和单向数据流的概念，但一旦掌握了基本概念，就能够更好地理解 React 的工作原理和应用场景。

总的来说，Vue 和 React 都是优秀的前端框架，各有各的特点和优势，选择哪个框架取决于项目需求、团队经验和个人偏好。

3.zustand是怎么实现和其他组件通信交互的，什么原理

Zustand 是一个用于状态管理的库，它提供了一种简单而强大的方法来管理 React 应用程序中的状态。它的核心思想是将状态和状态更新函数封装在一个可重用的容器中，然后通过 React 的上下文（Context）机制使其他组件能够访问和更新这个状态。

下面是如何使用 Zustand 实现与其他组件通信交互的基本原理：

定义状态容器（Store）：首先，你需要定义一个状态容器，其中包含你想要共享的状态以及用于更新状态的函数。你可以使用 createStore 函数创建状态容器，如下所示：

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useStore;

在组件中使用状态容器：接下来，在需要访问该状态的组件中使用 useStore 钩子来获取状态和更新函数。通过这种方式，你可以访问状态并在需要时更新它。

import React from 'react';
import useStore from './useStore';

function Counter() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <span>{count}</span>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

与其他组件进行通信：现在，你可以在其他组件中导入 useStore 钩子并使用它来访问相同的状态和更新函数。这样，当状态在一个组件中发生变化时，其他组件也会相应地更新。
```
import React from 'react';
import useStore from './useStore';

function Display() {
  const { count } = useStore();

  return <div>Count: {count}</div>;
}

export default Display;
```

通过这种方式，你可以使用 Zustand 在不同的组件之间共享状态，并在状态发生变化时实现组件之间的通信交互。Zustand 通过 React 的上下文机制实现了状态的共享，因此当状态更新时，所有使用了该状态的组件都会得到更新。

4.你了解的css有哪些技术写法，你怎么做技术选型

CSS 技术涵盖了各种样式设计和布局方法，以下是一些常见的 CSS 技术写法：

基本样式设置：
- 设置字体样式：font-family, font-size, font-weight 等。
- 设置文本样式：color, text-align, text-decoration 等。
- 设置背景样式：background-color, background-image, background-size 等。
- 设置边框样式：border, border-radius, border-color 等。
布局技术：
- 使用盒模型：box-sizing, margin, padding 等。
- 使用弹性布局（Flexbox）：display: flex, flex-direction, justify-content, align-items 等。
- 使用网格布局（Grid）：display: grid, grid-template-columns, grid-template-rows, grid-gap 等。
动画和过渡：
- 使用 CSS 过渡（Transition）：transition-property, transition-duration, transition-timing-function 等。
- 使用 CSS 动画（Animation）：@keyframes, animation-name, animation-duration, animation-timing-function 等。
响应式设计：
- 使用媒体查询（Media Queries）：@media 规则，根据不同的屏幕尺寸应用不同的样式。
前缀处理：
- 使用 Autoprefixer 或 PostCSS 等工具自动添加 CSS 前缀，以确保在不同浏览器下的兼容性。
预处理器：
- 使用 CSS 预处理器（如 Sass、Less、Stylus）来提高 CSS 的可维护性和灵活性，使用变量、嵌套、Mixin 等功能。
模块化：
- 使用 CSS 模块化方案（如 BEM、SMACSS、OOCSS）来组织和管理 CSS 代码，提高代码的可复用性和可维护性。
性能优化：
- 使用合适的选择器，避免过度使用通配符和后代选择器，以提高渲染性能。
- 使用 CSS Sprite、图标字体等技术来减少 HTTP 请求，提高页面加载速度。
- 使用合适的图像压缩技术来减小 CSS 中背景图片的大小，减少页面加载时间。

技术选型是根据项目的需求、团队的熟悉程度、技术栈的兼容性和性能等因素进行综合考虑的。在进行技术选型时，可以考虑以下几个方面：

需求分析：明确项目的需求和目标，包括功能要求、性能要求、兼容性要求等。
技术评估：评估不同 CSS 技术的特点、优劣势，以及其在当前项目中的适用性。
团队熟悉程度：考虑团队成员对不同 CSS 技术的熟悉程度和技能水平，选择团队熟悉的技术可以提高开发效率。
技术栈兼容性：考虑项目所使用的前端框架或工具的兼容性，选择与之兼容的 CSS 技术可以更好地与现有技术栈整合。
社区支持：考虑技术的社区活跃程度和支持度，选择有良好社区支持的技术可以获得更多的资源和帮助。
未来发展趋势：考虑技术的发展趋势和未来是否具有持续性，选择具有持续发展前景的技术可以降低项目的技术债务。

综合考虑以上因素，可以选择最适合当前项目需求和团队背景的 CSS 技术进行技术选型。\

还有一点什么忘了

手写题

1.实现一个类的私有属性，内部方法能访问，类外不能访问。不会，试了用symbol和闭包，不对，面试官提示用this和map，没写出来太菜了!

在 JavaScript 中，尽管没有内置的私有属性或方法的概念，但可以使用闭包和约定来模拟私有属性。以下是一个实现类的私有属性，并且只允许内部方法访问而类外部不能访问的示例：

const MyClass = (() => {
  // 定义一个闭包内的私有符号
  const privateProperty = Symbol('privateProperty');

  class MyClass {
    constructor() {
      // 初始化私有属性
      this[privateProperty] = '私有属性值';
    }

    // 内部方法可以访问私有属性
    internalMethod() {
      return this[privateProperty];
    }
  }

  return MyClass;
})();

const instance = new MyClass();

console.log(instance.internalMethod()); // 输出: 私有属性值
console.log(instance.privateProperty); // 输出: undefined

在这个示例中：

我们使用闭包创建了一个立即执行函数，这样就创建了一个私有的作用域。
在私有作用域内部，我们定义了一个 Symbol，用作私有属性的键。
在类内部的构造函数中，我们将私有属性设置为实例的一部分。
类内部的 internalMethod 方法可以访问并返回私有属性的值。
当我们尝试在类外部访问 privateProperty 时，会返回 undefined，因为它是类的私有属性。

这种方法虽然能模拟私有属性，但并不是真正意义上的私有，因为 JavaScript 并没有提供完全私有的机制。

2.实现lodash的_.get(object, path, [defaultValue])方法

_.get(object, path, [defaultValue]) 方法是 Lodash 提供的一个非常有用的方法，用于安全地获取对象的属性值，即使对象的某些属性不存在也不会报错。下面是一个简单的实现：

function get(object, path, defaultValue) {
  // 检查 object 是否为有效对象
  if (typeof object !== 'object' || object === null) {
    return defaultValue;
  }

  // 将路径字符串拆分为路径数组
  const pathArray = path.split('.');

  // 循环遍历路径数组，逐层获取属性值
  let value = object;
  for (const key of pathArray) {
    if (value && typeof value === 'object' && key in value) {
      value = value[key];
    } else {
      // 若属性不存在或对象已经为 null 或 undefined，则返回默认值
      return defaultValue;
    }
  }

  return value;
}

这个实现的思路是：

首先检查传入的对象是否为有效对象，若不是，则直接返回默认值。
将路径字符串拆分为路径数组。
循环遍历路径数组，逐层获取对象的属性值。
如果路径中某一层的属性不存在，或者对象已经为 null 或 undefined，则返回默认值。
如果成功获取到路径上的所有属性值，则返回最终的属性值。

使用这个实现，你可以像下面这样安全地获取对象的属性值：

const obj = {
  a: {
    b: {
      c: 42
    }
  }
};

console.log(get(obj, 'a.b.c', 'default')); // 输出: 42
console.log(get(obj, 'x.y.z', 'default')); // 输出: 'default'

这个实现虽然简单，但可以实现类似 Lodash 的 _.get 方法的功能。菜就多练

前端面试题详解整理39|vue和react的区别，zustand通信交互，lodash.get方法，一个类的私有属性，内部方法能访问，类外不能访问

字节前端实习二面 2.29 已挂

2.以你自己的理解说一下写vue和react的区别，不要背八股文

3.zustand是怎么实现和其他组件通信交互的，什么原理

4.你了解的css有哪些技术写法，你怎么做技术选型

1.实现一个类的私有属性，内部方法能访问，类外不能访问。不会，试了用symbol和闭包，不对，面试官提示用this和map，没写出来太菜了!