web前端面试经验和面试题分享

太过爱你忘了你带给我的痛 2023-07-24 08:35 28阅读 0赞

前些天投了简历，收到一份面试邀约，也是我的第一个工作面试，写写面试的经历。投的上海的一家公司，这家公司做的是电商服务类的小程序，APP，还有PC端。

**面试流程**：约的下午两点半，提前五分钟到，先填简历表，然后发了一份web前端面试题，40分钟做完，五个选择，五个简答，都是比较基础的知识。随后项目经理来面试，根据简历问了一些问题，也都是前端相关的知识，不难，四点左右面试完。

**面试感受**：面试官看着很年轻（可能是一面随便找了个人来面），比较平易近人。因为没怎么实战过，项目经历的问题很多都没回答上来，面试官提了些建议，让多看看面试题，刷刷题。

**面试心得**：实战经验少的一定要多刷刷面试题啊！！！

笔试题我当时拍了写来，在这里写一写吧

## 1.输出结果是（） ##

function sayHi() { 
      console.log(name)
      console.log(age)
      var name = 'Lydia'
      let age = 21
    }
    sayHi()

A: Lydia 和 undefined
    B: Lydia 和 ReferenceError
    C: ReferenceError 和 21
    D: undefined 和 ReferenceError
    答案：D

**解析**：在函数内部，我们首先通过 var 关键字声明了 name 变量。这意味着变量被提升了（内存空间在创建阶段就被设置好了），直到程序运行到定义变量位置之前默认值都是 undefined。因为当我们打印 name 变量时还没有执行到定义变量的位置，因此变量的值保持为 **undefined**。  
通过 let 和 const 关键字声明的变量也会提升，但是和 var 不同，它们不会被初始化。在我们声明（初始化）之前是不能访问它们的。这个行为被称之为暂时性死区。当我们试图在声明之前访问它们时，JavaScript 将会抛出一个 **ReferenceError** 错误。

## 2.输出结果是（） ##

for (var i = 0; i < 3; i++) { 
      setTimeout(() => console.log(i), 1)
    }
    
    for (let i = 0; i < 3; i++) { 
      setTimeout(() => console.log(i), 1)
    }

A: 0 1 2 和 0 1 2
    B: 0 1 2 和 3 3 3
    C: 3 3 3 和 0 1 2
    答案：C

解析：  
由于 JavaScript 的事件循环，setTimeout 回调会在遍历结束后才执行。因为在第一个遍历中遍历 i 是通过 var 关键字声明的，所以这个值是全局作用域下的。在遍历过程中，我们通过一元操作符 ++ 来每次递增 i 的值。当 setTimeout 回调执行的时候，i 的值等于 3。

在第二个遍历中，遍历 i 是通过 let 关键字声明的：通过 let 和 const 关键字声明的变量是拥有块级作用域（指的是任何在 \{\} 中的内容）。在每次的遍历过程中，i 都有一个新值，并且每个值都在循环内的作用域中。

## 3.事件传播的三个阶段是什么？ ##

A: Target > Capturing > Bubbling
    B: Bubbling > Target > Capturing
    C: Target > Bubbling > Capturing
    D: Capturing > Target > Bubbling
    答案：D

解析：  
第一阶段：从window对象传导到目标节点，称为“捕获阶段”（capture phase）。

第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。

第三阶段：从目标节点传导回window对象，称为“冒泡阶段”（bubbling phase）。

在捕获（capturing）阶段中，事件从祖先元素向下传播到目标元素。当事件达到目标（target）元素后，冒泡（bubbling）才开始。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgxNDAyMA_size_16_color_FFFFFF_t_70]

## 4.输出结果是（） ##

let number = 0
    console.log(number++)
    console.log(++number)
    console.log(number)

A: 1 1 2
    B: 1 2 2
    C: 0 2 2
    D: 0 1 2

答案：C

解析:一元后自增运算符 ++：

返回值（返回 0）  
值自增（number 现在是 1）

一元前自增运算符 ++：

值自增（number 现在是 2）  
返回值（返回 2）

结果是 0 2 2.

## 5.输出结果是（） ##

const sum = eval('10*10+5')

A: 105
    B: "105"
    C: TypeError
    D: "10*10+5"
    答案：A

解析：代码以字符串形式传递进来，eval 对其求值。如果它是一个表达式，就像本例中那样，它对表达式求值。表达式是 10 \* 10 + 5。这将返回数字 105。

## 6.简述HTTP的缺陷？ ##

答：

1.  通信使用明文（不加密），内容可能会被窃听
2.  不验证通信方的身份，因此有可能遭遇伪装
3.  无法证明报文的完整性，所以有可能已遭篡改

## 7.map forEach filter的用法？ ##

答：[https://blog.csdn.net/qq\_23143555/article/details/82458273][https_blog.csdn.net_qq_23143555_article_details_82458273]

## 8.router跳转和location.href跳转有什么区别? ##

答: [https://www.cnblogs.com/caoshufang/p/10900081.html][https_www.cnblogs.com_caoshufang_p_10900081.html]

## 9.列举几种实现div在页面内的垂直水平居中的方法 ##

答：[https://blog.csdn.net/D\_Z\_Yong/article/details/99724911][https_blog.csdn.net_D_Z_Yong_article_details_99724911]

## 10.react/vue项目中为什么要用key，key的作用是什么？ ##

答：[https://blog.csdn.net/qq\_41033913/article/details/99479731][https_blog.csdn.net_qq_41033913_article_details_99479731]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgxNDAyMA_size_16_color_FFFFFF_t_70]: /images/20230528/e46e3f43b7604b6e8fefb1784e280079.png
[https_blog.csdn.net_qq_23143555_article_details_82458273]: https://blog.csdn.net/qq_23143555/article/details/82458273
[https_www.cnblogs.com_caoshufang_p_10900081.html]: https://www.cnblogs.com/caoshufang/p/10900081.html
[https_blog.csdn.net_D_Z_Yong_article_details_99724911]: https://blog.csdn.net/D_Z_Yong/article/details/99724911
[https_blog.csdn.net_qq_41033913_article_details_99479731]: https://blog.csdn.net/qq_41033913/article/details/99479731