百度智能客服日常实习3.4前端一面+二面秒挂

分享一下，希望能帮到你，替我进没进去的百度

投递后反馈挺快的，hr过了三天就给我打电话了，约了3.4面试

一面

一面听着是个挺年轻的男的，语气温柔，面试问的题目也不难，给的反馈也很积极，但是不开摄像头！！！（感觉不尊重人，因为我开了你不开）

数组去重=》使用的set，但是{}对象无法被去重，估计是内存地址不一样所以判断两个{}空对象不同，打算用新建一个数组来做，但是面试官觉得我的思路也差不多就没让我写使用 Set 是 JavaScript 中一种简单有效的方法来对数组进行去重操作。Set 是一种集合数据结构，它只包含唯一的值，因此可以用来快速去重。下面是使用 Set 进行数组去重的示例：

function uniqueArray(arr) {
    return [...new Set(arr)];
}

// 示例
const array = [1, 2, 3, 4, 4, 5, 5, 6];
const uniqueArrayResult = uniqueArray(array);
console.log(uniqueArrayResult); // 输出 [1, 2, 3, 4, 5, 6]

在这个示例中，uniqueArray 函数接受一个数组作为参数，然后使用 Set 来创建一个不含重复值的新集合，最后通过扩展运算符 ... 将 Set 转换为数组返回。

$nextTick

在 Vue.js 中，$nextTick 是一个用于在下次 DOM 更新循环结束之后执行延迟回调的方法。它主要用于获取 DOM 更新后的状态，例如当你修改数据后想要立即获取更新后的 DOM 元素的状态或执行一些操作时，可以使用 $nextTick 来确保 DOM 已经更新完毕。

this.$nextTick(function () {
  // DOM 更新后的操作
})

$nextTick 接受一个回调函数作为参数，该回调函数会在 DOM 更新循环结束之后执行。这意味着在回调函数中可以安全地访问更新后的 DOM 元素。

示例用法：

new Vue({
  // ...
  methods: {
    updateData() {
      this.message = 'Updated'; // 修改数据
      this.$nextTick(function () {
        // DOM 更新后的操作
        console.log('DOM updated');
      });
    }
  }
})

在 updateData 方法中，当数据 message 被更新后，我们使用 $nextTick 来确保在 DOM 更新完毕后执行某些操作，比如输出日志信息。宏任务微任务代码题

setTimeout(function () {
    console.log('1')
});

new Promise(function (resolve) {
    console.log('2');
    resolve();
    console.log('3');
}).then(function () {
    console.log('4')
});
console.log('5');

输出结果是 2 3 5 4 1
我答错了，我回答成了2 5 4 3 1，我以为resolve会让下面的代码变成异步，结果我搞混了，异步是async await的

这段代码会输出：

解释如下：

首先，代码从上至下依次执行。当执行到 new Promise() 时，会立即执行其内部的函数。所以首先输出 2，然后是 3。
接着，执行 resolve()，这个 Promise 对象被标记为已完成，之后会执行 .then() 方法的回调函数。但是 .then() 中的回调函数是微任务，会在当前执行栈执行完毕后执行。所以当前执行栈继续往下执行，输出 5。
执行栈执行完毕后，会立即执行所有微任务队列中的回调函数。所以此时会输出 4。
最后，由于 setTimeout() 是宏任务，会被放入宏任务队列，等待当前任务队列中的任务执行完毕后执行。所以最后输出 1。

数组扁平化，递归就好

以下是一个使用递归来实现数组扁平化的 JavaScript 函数：

function flattenArray(arr) {
    let flattened = [];

    arr.forEach(item => {
        if (Array.isArray(item)) {
            flattened = flattened.concat(flattenArray(item));
        } else {
            flattened.push(item);
        }
    });

    return flattened;
}

// 示例
const nestedArray = [1, [2, [3, 4], 5], 6];
const flattenedArray = flattenArray(nestedArray);
console.log(flattenedArray); // 输出 [1, 2, 3, 4, 5, 6]

这个函数接受一个多维数组作为参数，并返回一个扁平化后的一维数组。在函数中，我们遍历数组的每个元素，如果元素是数组，则递归地调用 flattenArray 函数来扁平化该数组，并将结果与 flattened 数组合并；如果元素不是数组，则直接将其添加到 flattened 数组中。最后返回 flattened 数组即可。

function flatten(arr) {
  const result = [];
    for (const key of arr) {
      if (Array.isArray(key)) {
        result.push(...flatten(key));
      } else {
        result.push(key);
      }
    }
  return result;
}

const arr = [1, [2, 3], [4, [5, 6]]];
const flattenedArr = flatten(arr);
console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]

其它的暂时想不到了，问的并不难，基本上都答上来了，反馈很快，面试完半小时就说约二面，约的第二天

二面

二面是个看上去三四十的leader，不怒自威很严肃，开了摄像头，但是全程很敷衍，漫不经心，并且通信质量很差，他那边很嘈杂，老是有人走动，感觉像刷kpi的

听了自我介绍问我怎么自学前端的
看我技术栈是vue问我vue的发展怎么样

js高阶函数，我没回答出来

高阶函数是指可以接受函数作为参数或者返回一个函数的函数。在 JavaScript 中，函数是一等公民，因此可以方便地创建和操作高阶函数。下面是一些常见的高阶函数的示例：

map() 函数： map() 函数接受一个函数作为参数，该函数会被应用到数组的每个元素上，并返回一个新的数组。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(num) {
    return num * 2;
});
console.log(doubledNumbers); // 输出 [2, 4, 6, 8, 10]

filter() 函数： filter() 函数接受一个函数作为参数，该函数用于过滤数组中的元素，返回一个满足条件的新数组。

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(num) {
    return num % 2 === 0;
});
console.log(evenNumbers); // 输出 [2, 4]

reduce() 函数： reduce() 函数接受一个函数作为参数，该函数用于将数组中的元素归约为单个值。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(acc, num) {
    return acc + num;
}, 0);
console.log(sum); // 输出 15

forEach() 函数： forEach() 函数接受一个函数作为参数，该函数会被应用到数组的每个元素上，但它没有返回值。

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(num) {
    console.log(num * 2);
});

这些都是 JavaScript 中常用的高阶函数，它们可以提高代码的简洁性和可读性，同时也能更方便地处理各种数据操作需求。

让我写了三道题，在人家的如流平台，感觉那平台的代码不好写，只有js，没有css和vue之类的

第一题，不定宽高水平垂直居中，还算简单

要实现不定宽高元素的水平垂直居中，可以使用 CSS 的 flexbox 布局。以下是一个示例：

HTML 结构：

<div class="container">
  <div class="centered">
    <!-- 这里是居中的内容 -->
  </div>
</div>

CSS 样式：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100vw; /* 设置容器宽度为视口宽度 */
  height: 100vh; /* 设置容器高度为视口高度 */
}

.centered {
  /* 可以根据需要设置元素的样式，例如背景色、边框等 */
}

这样设置后，.centered 内的内容就会在 .container 容器中水平垂直居中显示。这种方法适用于不知道内容宽高的情况下，能够将内容始终保持在视口的中央。

第二题父子组件通信，我菜了紧张了，导致有很多关键语法错误，其实是因为准备面试一直在看八股，都少了很多动手实践，一定一定要边学边实践

在 Vue.js 中，父子组件之间的通信可以通过 props 和 events 来实现。

Props： 父组件可以通过 props 将数据传递给子组件。

父组件：

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent!'
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

Events： 子组件可以通过 events 向父组件发送消息。

子组件：

<template>
  <div>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-to-parent', 'Hello from child!');
    }
  }
}
</script>

父组件：

<template>
  <div>
    <ChildComponent @message-to-parent="handleMessageFromChild" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessageFromChild(message) {
      console.log('Message from child:', message);
    }
  }
}
</script>

这两种方法可以单独使用，也可以结合使用，根据实际需要进行选择。

第三题分割字母和数字，字符串'123ab12'分割为'123 ab 12'，当时写的时候有个bug，结果在写这篇面经的时候突然知道怎么写了，晕

您可以使用正则表达式来实现将字母和数字分割开的需求。以下是一个 JavaScript 函数的示例：

function splitAlphaNumeric(str) {
    return str.replace(/([a-zA-Z]+)(\d+)/g, '$1 $2 ').trim();
}

const input = '123ab12';
const output = splitAlphaNumeric(input);
console.log(output); // 输出 '123 ab 12'

在这个函数中，我们使用了正则表达式 /([a-zA-Z]+)(\d+)/g，其中 ([a-zA-Z]+) 匹配一个或多个字母，(\d+) 匹配一个或多个数字，g 表示全局匹配。然后我们使用 replace() 方法将匹配到的字母和数字分别用 $1 和 $2 引用，并在它们之间插入一个空格。最后使用 trim() 方法去除首尾的空格。

然后问了一些无关紧要的问题，全程给的反馈都很少，也很敷衍，就说错了也不说错哪了，也不引导一下，点名表扬字节一面的一个面试官，人好态度好耐心好语气好面试的最舒服的一次（虽然也没过）
最后反问我知道自己过不了了，就问下我有什么需要改进的地方吗，人家一脸不耐烦说问工作的事，行吧我就随便问了工作是干啥的技术栈是啥等等就结束了，面试完后晚上上官网看就挂了

面试是面试完了，但还是很烦，能不能来点尊重人的面试官，不要全是那种刷kpi的，服了都，我全程态度都很好虚心请教，不会的就一直道歉不好意思跟个舔🐕一样

作者：bulletganggang
链接：www.nowcoder.com/discuss/594…
来源：牛客网

前端面试题详解整理48|数组去重，分割字母和数字，父子通信，不定宽高水平垂直居中nextTick,数组扁平化，js高阶函数，

百度智能客服 日常实习3.4前端一面+二面秒挂