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

前些天投了简历，收到一份面试邀约，也是我的第一个工作面试，写写面试的经历。投的上海的一家公司，这家公司做的是电商服务类的小程序，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）才开始。

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

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

答: https://www.cnblogs.com/caoshufang/p/10900081.html

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

答：https://blog.csdn.net/D_Z_Yong/article/details/99724911

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

答：https://blog.csdn.net/qq_41033913/article/details/99479731