本文共 2460 字，大约阅读时间需要 8 分钟。

美团一面

1. 项目介绍及细节

• 项目介绍：涉及前端开发，主要使用Vue.js框架。
• 项目细节：涉及HTTP协议中的GET、POST请求类型，了解了301、304状态码的意义。
• 技术问题：询问了GET和POST请求的区别，具体涉及到请求方式、数据传输、应用场景等方面。

2. 组件间通信方式

• 组件间通信主要有三种方式：
• props传递：父子组件之间通过props传递数据。
• 事件发射与接收：通过自定义事件，如$emit和$on进行通信。
• vuex状态管理：使用集中存储来实现组件间的全局状态管理。

3. Vue.js中的for循环与索引问题

• 在Vue.js中使用for循环时，若直接使用index作为key，可能存在以下问题：
  • 会导致虚拟DOM中的元素重复渲染，影响性能。
  • 可能引发键值冲突，导致数据显示异常。
• 建议使用唯一的标识符（如对象的某个属性）作为key。

4. Vuex中的深度和即时性

• deep（深度复制）：用于在组件中深度复制数据，避免对象引用导致的数据绑定问题。
• immediate（立即性）：在watch中立即执行副作用函数，适用于需要立即响应数据变化的场景。

5. CSS选择器的优先级

• CSS选择器的优先级从高到低依次为：
• #id
• .class
• 标签name
• 通配符（如*）
• 属性选择器
• 后代选择器
• 子选择器
• 否定选择器
• 组合选择器

6. 两栏布局实现

• 常用布局方式：
  • 固定左边宽度，右边自适应：

    .left-panel{  width: 300px;  overflow-y: auto;  position: fixed;  height: 100%;}.right-panel{  margin-left: 300px;  padding: 20px;}

  • Flex布局：

    .container{  display: flex;  width: 100%;}.left{  width: 200px;  background: #f0f0f0;  padding: 20px;}.right{  flex: 1;  min-width: 300px;  padding: 20px;}

7. 作用域与Promise输出

• 作用域问题：
  • 在函数内部，变量声明的位置决定了它的作用域。
  • 块级作用域可以通过{}包裹代码实现。
  • 全局作用域适用于需要全局变量的场景。
• Promise输出：
  • Promise用于处理异步操作，返回一个then函数。
  • Promise的状态包括：未完成、成功、失败。
  • Promise链可以通过.then()方法连接多个操作。

8. 算法题

• 数组扁平化：

  const arr = [1, 2, [3,4], 5];const flatArr = [].concat(...arr);

• 求次数最多字母的前数字之和：

  function getMaxLetter(str){  let maxCount = 0;  let maxChar = '';  for(let char of str){    if( char.match(/[a-zA-Z]/) ){      let count = 0;      for(let i=0; i
       
         maxCount){        maxCount = count;        maxChar = char;      }    }  }  return maxChar + '的数量为' + maxCount;}
       

反问

• 是否有其他问题需要进一步探讨？

百度一面

1. 自我介绍

• 了解了我的前端开发背景，介绍了我的学习经历和项目经验。

2. position

• 询问了CSS中的position属性及其类型，包括：
  • static：默认位置。
  • relative：相对定位。
  • absolute：绝对定位。
  • fixed：固定定位。
  • inherit：继承父级定位。

3. 元素显示与隐藏的方法

• 元素隐藏的两种方法：
• display属性：

  .hidden{  display: none;}

• visibility属性：

  .hidden{  visibility: hidden;}

• 两者主要区别在于：display隐藏会移除元素，占用空间；visibility隐藏则保留元素，仅不显示。

4. 绑定点击事件

• 实现点击li元素并输出其内容：

       
    
        
      {{item}}  
       

  methods: {  clickHandler(item) {    console.log('点击了', item);  }}

5. ES6新特性

• ES6新增的主要特性包括：
• let、const、var声明变量。
• 箭头函数（=>）。
• 参数默认值。
• 解构赋值（如const [a, b] = array;）。
• 促进式语法（如for...of、for...in）。
• 模板字符串（）。
• 生成器函数与迭代器。
• async/await语法。

6. 数组平方处理

• 使用map和箭头函数：

  const result = arr.map(item => item * item);

7. 变量解构赋值示例

• const [a, ...b] = [1,2,3,4]; // a=1, b=[2,3,4]const [c, ...d] = [1]; // c=1, d=[]

8. 找出1~n中的质数

• 算法思路：
• 创建一个布尔数组，初始值为true，表示所有数都是质数。
• 从2开始，检查每个数是否为质数。
• 如果某个数不是质数，标记其倍数也为非质数。
• 最终筛选出所有为true的数。

9. 最长不重复子串长度

• 算法思路：
• 使用滑动窗口技术，记录窗口中出现的字符。
• 当发现重复字符时，滑动窗口左移一位。
• 维护最大长度。

最新web前端资料

• Vue.js全集教程
• 前端面试题解析
• ES6到ES12全面解析
• 算法与数据结构
• CSS高级技巧