2022年前端面试题目及知识点

前端复习导图

1. Javascript基础
2. Typescript
3. ES系列
4. CSS基础
5. 框架（React、Vue）
6. 小程序
7. Node.js
8. 工程化
9. 数据结构
10. 算法
11. 安全
12. 设计模式

前言

兜兜转转在前端好几年，之前也分享过很多前端小点的文章，现在打算把前端需要的基础知识、面试的内容做一个前面的整理。

---

Javascript基础

数据结构

1. 数据结构类型

前端一共有5种基础数据结构，Null，undefined，Boolean，Number，String
ES6新增：Symbol：每一个 Symbol 的值都是不相等的，所以 Symbol 作为对象的属性名，可以保证属性不重名。
ES10新增：BigInt：该数据类型的目的是比Number数据类型支持的范围更大的整数值

2. 引用数据类型

引用数据类型: Object。
Object类型包含Object、Array、 function、Date、RegExp。
引用数据类型可以添加和删除属性，同时引用属性的值可以改变

3. 判断数据结构类型的方法
   常用的方法有三种，其中各有利弊

typeof：最普通的判断方法，可以判断基础数据类型，但是无法判断引用数据类型。返回一个字符串，表示未经计算的操作数的类型
Object.prototype.toString.call()：常用的判断方式，基本可以做到准确判断
Instanceof、constructor：可以判断引用数据类型 而不能判断基本数据类型，本质上是判断prototype 属性是否出现在某个实例对象的原型链上 e.g object instanceof constructor

console.log(typeof 1);    // number
console.log(typeof Math.LN2); // number
console.log(typeof Infinity); // number
console.log(typeof NaN); // number
console.log(typeof 'bla'); // string
console.log(typeof true); // boolean
console.log(typeof false); // boolean
console.log(typeof undefined); // undefined
console.log(typeof new Date()); // object
console.log(typeof null); // object
console.log(typeof {}); // object
console.log(typeof [1,2,3]); // object
console.log(typeof function(){}); // function

let nonObj = Object.create(null);
console.log(nonObj instanceof Object);  // false，一种创建非 Object 实例的对象的方法
console.log({test：1} instanceof Object);  // true
console.log(({test：1}).constructor === Object); // true
console.log((1).constructor === Number); // true
console.log([] instanceof Array);    // true
console.log(([]).constructor === Array); // true
console.log(function(){} instanceof Function);       // true
console.log((function() {}).constructor === Function); // true
console.log((true).constructor === Boolean); // true
console.log(('string') instanceof String); // false 并不是对象
console.log(('string').constructor === String); // true

let strFunc = Object.prototype.toString;
console.log(strFunc.call(1)); // [object Array]
console.log(strFunc.call(null)); // [object Null]
console.log(strFunc.call(true)); // [object Boolean]
console.log(strFunc.call('str')); // [object String]
console.log(strFunc.call([])); // [object Array]
console.log(strFunc.call({})); // [object Object]
console.log(strFunc.call(undefined)); // [object Undefined]
console.log(strFunc.call(function(){})); // [object Function]
console.log(strFunc.call(/^\[object (.*)\]$/)); // [object RegExp]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

4. null和undefined

相同：undefined 和 null 都是基本数据类型，if条件中均返回false
不同：undefined声明了变量，但未赋值；null代表空对象，一般可用于初始化
类型选择：null == undefined // true
null === undefined; // false

5. == 和 ===

==
两个操作书的数据结构是否相同；若相同，则比较操作数，若不同，则转换为相同数据类型再比较 ===
检查两个操作书的数据结构是否相同；若不同，则返回false，若相同，则比较操作数

6. 闭包、作用链、执行上下文

• [译] 理解 JavaScript 中的执行上下文和执行栈
• 一道js面试题引发的思考
• [译]发现 JavaScript 中闭包的强大威力
• 破解前端面试（80% 应聘者不及格系列）：从闭包说起
• 我从来不理解JavaScript闭包，直到有人这样向我解释它…
• JavaScript 的静态作用域链与“动态”闭包链
• JS 闭包经典使用场景和含闭包必刷题

7. this/apply/call/bind

8. Array
   为什么要把Array单独列出来呢？在面试和日常代码过程中Array相关的属性变换起到了重要的作用，能够很大程度上降低代码的复杂程度
   Array的基础方法：

var a1 = new Array(); // []
1