快手前端|24秋招|面试合集

一面：70min

• 自我介绍
• 性能优化的两个问题，度量的手段？性能优化的方法中提升最大的方法是什么？
• 实习遇到的最大的挑战是什么，给你带来最深印象的是什么
• 平时用到的git操作
• 对懒加载的原理有了解吗
• 选课系统项目体积优化的方法
• Electron的应用场景？现在给你一个场景，你要怎么用electron去设计他们之间的交互
• 给一个小白讲明白electron是什么，你会怎么讲
• Electron有代表性的feature
• JS事件循环的过程

手撕题1：用html和css写这个面试界面的结构和样式

    // 手撕题2 统计一个复杂对象value中的英文字符a-z以及A-Z的个数
    let object = {
      name:'code',
      obj : {
        name: 'CODE',
        age: [12,45,20],
        info : {
          nick: 'haha!'
        }
      },
      hooby: ['a','B']
    }
    let res = 0;
    const countLetter = (obj) => {
      for(let key in obj) {
        if(obj[key] instanceof Array){
          obj[key].forEach(val => {
            if(val >= 'a' && val <= 'z' || val >= 'A' && val <= 'Z'){
              res++;
            }
          });
        } else if(obj[key] instanceof Object) {
          countLetter(obj[key]);
        } else if(typeof obj[key] === 'string') {
          let arr = obj[key].split('');
          arr.forEach(val => {
            if(val >= 'a' && val <= 'z' || val >= 'A' && val <= 'Z'){
                res++;
              }
            }
          )
        }
      }
    }
    countLetter(object);
    console.log(res);

二面：40min

想看此处的段子可移步前面的动态

• 优化bundle体积怎么优化的
• 是否了解过版本升级是怎么部署的
• Ts的类型和接口有什么区别

//问答题1：
{} == {}
{} === {}
// 回答这俩的结果：都是错的
// 因为，对象使用 = 进行比较的时候是比较两个对象的引用
// 由于这两个对象是独立创建的，无论是全等比较还是内容相等的比较都不成立

// 问答题2
const a = 1;
function a() {}

// 这样的代码执行之后会出现什么情况？
// 答案：const a = 1 会报错，因为函数先进行声明
// 使用了a作为函数名，之后再声明常量a浏览器会提示重复定义

//手撕1：请你编写一个异步函数 promisePool
//它接收一个异步函数款组functions 和 池限制 n，
//它应该返回一个 promise 对象，当所有输入函数都执行完毕后，promise 对象就执行完毕
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function promisePool(functions, n) {
  const results = [];
  let index = 0;

  async function executeNext() {
    const currentIndex = index;
    index++;

    if (currentIndex >= functions.length) {
      return; // 所有函数都已执行完毕
    }

    const currentFunction = functions[currentIndex];
    const result = await currentFunction();
    results[currentIndex] = result;

    await delay(0); // 让事件循环得以执行

    // 递归执行下一个函数
    await executeNext();
  }

  // 开始执行初始函数，不超过并发限制
  const initialPromises = [];
  for (let i = 0; i < Math.min(n, functions.length); i++) {
    initialPromises.push(executeNext());
  }

  // 等待所有初始 promises 完成
  await Promise.all(initialPromises);

  return results;
}

// 示例用法
async function asyncFunction1() {
  await delay(1000);
  return '函数 1 已完成';
}

async function asyncFunction2() {
  await delay(1500);
  return '函数 2 已完成';
}

async function asyncFunction3() {
  await delay(500);
  return '函数 3 已完成';
}

const functions = [asyncFunction1, asyncFunction2, asyncFunction3];
const concurrencyLimit = 2;

promisePool(functions, concurrencyLimit)
  .then(results => {
    console.log('所有函数已执行完毕:', results);
  })
  .catch(error => {
    console.error('出现错误:', error);
  });

// 手撕2
// 请你编写一个函数，它接收一个其他的函数，并返回该图教的 柯里化 后的形式
function curry(fn, ...args) {
  if (args.length >= fn.length) {
    return fn(...args);
  } else {
    return (...newArgs) => curry(fn, ...args, ...newArgs);
  }
}

// 示例函数
function sum(a, b, c) {
  return a + b + c;
}

const curriedSum = curry(sum);

console.log(curriedSum(1)(2)(3)); // 输出：6
console.log(curriedSum(1, 2)(3)); // 输出：6
console.log(curriedSum(1)(2, 3)); // 输出：6
console.log(curriedSum(1, 2, 3)); // 输出：6

三面：技术终面（50min）

• 问的更多是个人情况，技术视野相关的东西
• 比如为什么选前端，最让你眼前一亮的技术，java和electron有什么区别等等问题，参考价值不大，就不细说了
• 两个手撕，一个低代码相关，一个是把vue组件转化成react组件，也都挺抽象

总结

• 一面面的挺烂，手撕很简单但没写出来，面试官还给我过了，后来问二面面试官一面的面评，他竟然说面试官评价还可以？？？
• 二面就面的更烂了，问啥都不会，然后稀里糊涂地过了...
• 三面技术 ld 问技术视野，我就没有技术视野，又是xjb说，想到啥说啥，但是面试官给我的面试体验还不错，甚至让我回去等电话和邮件，让我抱着不切实际的幻想，最后果然收到了感谢信真不如当场就让我知道要挂，反差太大让人怪难受的