哈啰前端二面

哈啰前端二面_牛客网 (nowcoder.com)

1. 自我介绍

2. 数组去重（有七种） 在 JavaScript 中，有多种方法可以对数组进行去重。以下是其中的七种方法：

3. 使用 Set 数据结构：

const uniqueArray = [...new Set(array)];

2. 使用 filter 方法：

const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);

3. 使用 reduce 方法：

const uniqueArray = array.reduce((acc, current) => {
    if (acc.indexOf(current) === -1) {
        acc.push(current);
    }
    return acc;
}, []);

4. 使用对象属性：

const uniqueArray = Object.keys(array.reduce((obj, item) => {
    obj[item] = true;
    return obj;
}, {}));

5. 使用 Map 数据结构：

const map = new Map();
const uniqueArray = [];
array.forEach(item => {
    if (!map.has(item)) {
        map.set(item, true);
        uniqueArray.push(item);
    }
});

6. 使用 includes 方法：

const uniqueArray = [];
array.forEach(item => {
    if (!uniqueArray.includes(item)) {
        uniqueArray.push(item);
    }
});

7. 使用 indexOf 方法：

const uniqueArray = [];
array.forEach(item => {
    if (uniqueArray.indexOf(item) === -1) {
        uniqueArray.push(item);
    }
});

以上是常见的七种数组去重方法，每种方法都有其适用的场景和性能特点。

3. vue3中watch与watchEffect的区别 在 Vue 3 中，watch 和 watchEffect 都是用于监听数据变化的工具，但它们之间有一些重要的区别：

4. 响应式跟踪的方式：

   • watch 是一个侦听器，需要明确指定要监听的数据，并且可以在数据变化时执行特定的回调函数。它类似于 Vue 2.x 中的 $watch。
   • watchEffect 是一个立即执行的响应式追踪函数，它会自动追踪其依赖，并在依赖变化时重新运行。它类似于 Vue 2.x 中的 computed，但是没有缓存机制，每次数据变化都会重新执行。

5. 使用场景：

   • watch 适用于需要精确控制监听的场景，比如需要监听特定的数据变化并执行复杂的逻辑。
   • watchEffect 适用于需要自动追踪数据变化并执行副作用的场景，比如在模板中使用响应式数据、执行副作用代码或者调用异步操作。

6. 语法：

   • watch 的语法比较灵活，可以监听多个数据或深层次的数据，并且可以设置选项参数。
   • watchEffect 的语法比较简洁，只需要传入一个函数即可，并且没有其他选项参数。

举个简单的例子，假设我们有一个响应式数据 count：

import { watch, watchEffect, reactive } from 'vue';

const state = reactive({
  count: 0,
});

// 使用 watch 监听 count 的变化
watch(() => state.count, (newValue, oldValue) => {
  console.log(`count 变化了：${oldValue} -> ${newValue}`);
});

// 使用 watchEffect 自动追踪 count 的变化
watchEffect(() => {
  console.log(`count 的值是：${state.count}`);
});

在这个例子中，watch 会监听 state.count 的变化，并在变化时执行回调函数；而 watchEffect 会立即执行其函数体，并自动追踪其中使用的响应式数据 state.count 的变化。

5. 前端白屏可能的原因

前端白屏通常是由于以下几种可能的原因导致的：

1. 网络问题：如果浏览器无法获取HTML文件或其他关键资源，页面可能会一直处于白屏状态。这可能是由于网络连接问题、服务器故障或者DNS解析错误等引起的。

2. HTML代码问题：HTML代码中存在语法错误、缺少必要的标签或属性，导致浏览器无法正确渲染页面内容。

3. CSS问题：CSS代码中存在错误，例如语法错误、选择器错误或者属性值错误，导致页面样式无法正确应用。

4. JavaScript问题：JavaScript代码中存在错误，例如语法错误、变量未定义或者函数调用错误，导致页面无法正常执行JavaScript代码，进而导致页面无法加载或显示。

5. 资源加载问题：页面所需的资源（如图片、字体、JavaScript文件等）无法加载或者加载失败，导致页面无法正确显示。

6. 缓存问题：浏览器缓存中存在过期或损坏的缓存文件，导致页面无法正确加载。

7. 服务器问题：服务器端出现故障或者配置错误，无法正确响应请求，导致页面无法加载。

8. 性能问题：页面过于复杂或者资源过多，导致页面加载时间过长，用户在加载过程中可能会看到白屏。

针对这些可能的原因，可以逐一排查，比如检查网络连接、查看浏览器开发者工具中的控制台输出、检查HTML、CSS和JavaScript代码等，以确定并解决导致白屏的具体问题。

7. 现在在做的项目
8. 闲聊
9. 反问