23秋招-深信服前端一面-面经

时间：9 月 9 日

时长：1 h

base：深圳

全程基本上在做题，边做边问，在面试开始和结束前问了几个八股。

JavaScript

1. == 和 ===

a === 1 && a === 2 如何实现

/* 劫持 a 属性 */
let current = 0;
Object.defineProperty(window, 'a', {
  get() {
    current++;
    return current;
  }
})
console.log(a === 1 && a === 2); // true


var obj = new Proxy({ a: 0 }, {
  get(target, key, value, proxy) {
    target.a++
    return target.a
  },
});
console.log(obj.a === 1 && obj.a === 2 && obj.a === 3)

2. arr.map(parseInt)

const arr = ['1', '2', '3'];
arr.map(parseInt) 的输出是什么？
[1, NaN, NaN]

解释：上述代码可以翻译如下
arr.map((item, index) => parseInt(item, index));

parseInt(item, index)：

• item: 要被解析的值。如果参数不是一个字符串，则将其转换为字符串 (使用 ToString 抽象操作)。字符串开头的空白符将会被忽略。
• index: 从 2 到 36 的整数，表示进制的基数。parseInt 是将 item 中的数字逐个按 index 指定的进制进行转换的，如 item=‘2’，index=‘2’，那此时的结果是 NaN，因为二进制只有 0 和 1。如果 parseInt 遇到的字符不是指定 index 参数中的数字，它将忽略该字符以及所有后续字符，并返回到该点为止已解析的整数值。parseInt 将数字截断为整数值。允许前导和尾随空格。

3. 一个考察事件循环的题，说输出

async function async1() {
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2() {
    console.log('async2')
}
console.log('script start')
setTimeout(function () {
    console.log('settimeout')
})
async1()
new Promise(function (resolve) {
    console.log('promise1')
    resolve()
}).then(function () {
    console.log('promise2')
})
console.log('script end')

/*输出顺序:
script start
async1 start
async2
promise1
script end
async1 end
promise2
settimeout
*/

4. 场景题：有一个 ul，其中有很多 li，怎样给每个 li 添加自定义事件。（使用事件委托机制，在 ul 上绑定 li 需要触发的事件）

5. 场景题：搜索框中输入文字，每次输入都会触发 http 请求，如何优化？（使用防抖进行优化，但是具体讲的时候拉跨了，把防抖和节流两个东西搞混了，然后面试官就要求我手写一下防抖节流）

6. 扁平化数组转树

7. 给一个数组 arr 和 一个指定的值 target，找到数组中的和为 target 的两个数的下标。（就是两数之和，只是要找到所有满足条件的组合的下标）。

const arr = [1, 3, 5, 4, 2];
const target = 5;
let idx1 = 0,
  idx2 = 0;
const res = [];

const map = new Map();

for (let i = 0; i < arr.length; i++) {
  map.set(arr[i], i);
  if (map.get(target - arr[i]) !== undefined) {
    idx1 = map.get(target - arr[i]);
    idx2 = i;
    // break;
    res.push([idx1, idx2]);
  }
}
console.log(res);

CSS

1. 两列布局的实现方式有哪些？

2. flex 布局的一些属性

   • flex: 1 （flex-grow: 1, flex-shrink: 1, flex-basis: 0%）

   • flex: auto（flex-grow: 1, flex-shrink: 1, flex-basis: auto）

   • flex(default): （flex-grow: 0, flex-shrink: 1, flex-basis: auto）

   参考：

   • flex:1 和 flex:auto区别 - 简书 (jianshu.com)
   • flex:默认值；flex:1；flex:auto； 使用_uglyduckling0412的博客-CSDN博客_flex默认值

3. BFC

4. 水平垂直居中方式

Vue

1. Vue-Router 的原理，有哪两种模式；
2. 你项目里的权限控制是怎么做的（全局前置守卫进行判断）
   • Vue-Router 的路由守卫，讲一讲（全局和组件内的）

大概就记得这么多，可能有些都记混了。。。我是上午 10:30 开始的，在写防抖节流的时候面试官催我写快点，后面还有两个人，都不容易啊。反问的时候主要问了深信服的面试流程：一共三面。