这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道
HTML
-
HTML5有哪些新特性？
-
Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?
-
如何实现浏览器内多个标签页之间的通信？
-
⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？
-
简述⼀下src与href的区别？
-
cookies,sessionStorage,localStorage 的区别？
-
HTML5 的离线储存的使用和原理？
-
怎样处理 移动端 1px 被 渲染成 2px 问题？
-
iframe 的优缺点？
-
Canvas 和 SVG 图形的区别是什么？
JavaScript
-
问：0.1 + 0.2 === 0.3 嘛？为什么？
-
JS 数据类型
-
写代码：实现函数能够深度克隆基本类型
-
事件流
-
事件是如何实现的？
-
new 一个函数发生了什么
-
什么是作用域？
-
JS 隐式转换，显示转换
-
了解 this 嘛，bind，call，apply 具体指什么
-
手写 bind、apply、call
-
setTimeout(fn, 0)多久才执行，Event Loop
-
手写题：Promise 原理
-
说一下原型链和原型链的继承吧
-
数组能够调用的函数有那些？
-
PWA使用过吗？serviceWorker的使用原理是啥？
-
ES6 之前使用 prototype 实现继承
-
箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？
-
事件循环机制 （Event Loop）
let myArray = [1, 2, 3];console.log(myArray.length); // 输出 3
访问（遍历）数组元素
let myArray = [1, 2, 3];
console.log(myArray[0]); // 输出 1
console.log(myArray[1]); // 输出 2
console.log(myArray[2]); // 输出 3
修改数组元素
let myArray = [1, 2, 3];
myArray[1] = 4;
console.log(myArray); // 输出 [1, 4, 3]
删除数组元素
let myArray = [1, 2, 3];
delete myArray[1];
console.log(myArray); // 输出 [1, 3]
数组尾部添加
let myArray = [1, 2, 3];
myArray.push(4);
console.log(myArray); // 输出 [1, 2, 3, 4]
数组尾部删除
let myArray = [1, 2, 3];
myArray.pop();
console.log(myArray); // 输出 [1, 2]
includes（）方法
⭐对于数组中是否包含某个元素，我们可以使用 includes() 方法。includes() 方法用于判断数组中是否包含某个指定的元素，如果包含，则方法返回 true，否则返回 false。
以下是 includes() 方法的语法：
array.includes(searchElement[, fromIndex])
其中：
searchElement：需要查找的元素，必选。
fromIndex：可选，从该索引处开始查找元素。如果省略该参数，则从数组的头开始查找。如果fromIndex大于或等于数组长度，则返回 false。
举例说明
当我们使用includes()方法时，可以通过传入一个元素作为参数来判断数组中是否包含该元素。
⭐⭐⭐第一例：判断数组中是否包含某个数字
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3));
console.log(numbers.includes(6));
数组numbers包含数字3，因此includes(3)返回true。而数组numbers不包含数字6，因此includes(6)返回false。
⭐⭐⭐第二例：判断数组中是否包含某个字符串
const fruits = ['长生界', '神墓', '遮天'];
console.log(fruits.includes('遮天'));
console.log(fruits.includes('完美世界'));
数组fruits包含字符串’遮天’，因此includes('banana')返回true。而数组fruits不包含字符串’grape’，因此includes('grape')返回false。
⭐⭐⭐⭐⭐第三例：判断数组中是否包含某个对象
const users = [
{ name: '叶天帝', age: 225 },
{ name: '石昊', age: 130 },
{ name: '辰南', age: 135 }
];
const user = { name: '石昊', age: 130 };
console.log(users.includes(user)); // false
数组users包含了一个与user对象相等的对象，但返回的却是false，为什么呢？
这是因为JavaScript 中的 includes() 方法用于检查一个数组是否包含某个特定的元素，它并不适用于检查对象。因此，在上述代码中使用 includes() 方法进行判断是不准确的。
为什么不准确呢？
因为 includes() 方法在比较对象时使用的是严格相等运算符（===），而不是按对象属性逐个匹配的方式。
如果想要检查数组中是否包含某个对象，可以使用 some() 方法，代码示例如下：
const users = [
{ name: '叶天帝', age: 225 },
{ name: '石昊', age: 130 },
{ name: '辰南', age: 135 }
];
const user = { name: '石昊', age: 130 };
const isUserIncluded = users.some(u => u.name === user.name && u.age === user.age);
console.log(isUserIncluded); //true
关键点
第一点：includes()方法在比较元素时使用的是严格相等（===）的方式。
第二点：如果数组中有多个相同的元素，includes()方法只会返回第一个匹配到的元素。
第三点：兼容性：
includes() 方法并不兼容所有的浏览器。如果需要在不支持 includes() 方法的浏览器中使用该方法，可以使用以下 polyfill 实现：
if (!Array.prototype.includes) {
Array.prototype.includes = function(searchElement /\*, fromIndex\*/ ) {
'use strict';
var O = Object(this);
var len = parseInt(O.length) || 0;
if (len === 0) {
return false;
}
var n = parseInt(arguments[1]) || 0;
var k;
if (n >= 0) {
k = n;
} else {
k = len + n;
if (k < 0) {
k = 0;
}
}
while (k < len) {
var currentElement = O[k];
if (searchElement === currentElement ||
(searchElement !== searchElement && currentElement !== currentElement)) {
return true;
}
k++;
}
return false;
};
}
在这个 polyfill 中，Array.prototype.includes() 方法首先通过对象来获取数组的长度，并使用 while 循环来遍历数组。如果搜索的元素存在则返回 true，否则返回 false。
最后
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。
-
技术要深入到什么程度？
-
做久了技术总要转型管理？
-
我能做什么，我想做什么？
-
一技之长，就是深耕你的专业技能，你的专业技术。（重点）
-
独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）
-
拥有事业，选择一份使命，带领团队实现它。（创业）
一技之长分五个层次
-
栈内技术 - 是指你的前端专业领域技术
-
栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识
-
工程经验 - 是建设专业技术体系的“解决方案”
-
带人做事 - 是对团队协作能力的要求
-
业界发声 - 工作经验总结对外分享，与他人交流
永远不要放弃一技之长，它值得你长期
信仰持有。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。
