前端面试总结

JS 基础

1. 五种原始类型：Number, Boolean, String, undefined, null.
2. 七种数据类型：Number, Boolean, String, undefined, null, Object, Symbol.
3. 类型判断方法
   typeof A: 多用于原始类型判断。
   A instanceOf B：原型链判断，B的原型是否存在于A的原型链中，不适用于多窗口判断。
   constructor：根据实例的constructor可以判断自定义类。
4. Array 方法
   isArray：判断是否为数组对象。
   indexOf：查找元素，并返回元素在数组的索引。
   slice：从数组中返回选定范围的元素。
   concat：返回拼接后的新数组。
   splice：修改原数组，并返回被移除的数组。
   push：修改原数组，尾部增加一个元素。
   pop：修改原数组，尾部删减一个元素。
   unshift: 修改原数组，头部增加一个元素。
   shift: 修改原数组，头部删减一个元素。
   sort: 排序，正序，支持排序函数。
   reverse：排序，反序，支持排序函数。
   toString：转换为字符串，以“,”连接元素。
   toLocaleString：每个元素调用toLocaleString。
   join：按指定连接符号转换为字符串。
   every, filter, forEach, map, some, reduce ...

[p1, p2, p3].reduce((acc, cur) => {
  return acc.then(cur).catch(console.log)
}, Promise.resolve(0))

5. String 方法
   charAt：返回字符串指定位置的字符。
   charCodeAt：返回字符串指定位置的字符编码。
   fromCharCode：字符编码构建字符串。
   substring，slice：返回指定范围的字符串。
   substr：指定起始位置和需要提取字符个数返回。
   indexOf：返回搜索字符串所在字符串中的索引。
   trim：删除字符串尾部空格。
   toLowerCase、toUpperCase：大小写转换。
   match：正则匹配，返回匹配结果。
   search：正则匹配，返回匹配字符的索引。
   replace：替换字符，支持正则。
   split：分隔符拆分字符串，支持正则。
6. 原型：一个可以实现对象属性继承的特殊对象 [[prototype]]，不可直接访问。每个函数都有一个prototype属性，实例化后通过proto保持对prototype的引用。
7. 原型继承

// 寄生(闭包)组合继承
function Child(name) {
 Supper.call(this); // 父类初始化
 this.name = name; // 初始化
}
(() => {
 const Bridge = function(){}; // 子、父类之间的桥接
 Bridge.prototype = Supper.prototype; 
 Child.prototype = new Bridge();
 Child.prototype.constructor = Child;
})();

8. 原型链
   image.png
9. 作用域、作用域链
   作用域分为全局作用域、函数作用域 和 eval 作用域，是在函数调用时在堆中分配的一个对象。作用域链式指在代码执行环境时的调用栈，全局作用域永远时在栈低，当关闭窗口时才会被销毁。
10. 闭包
    闭包，包含对外部作用域的引用，并在将来某一时间可能被调用的函数。
11. Ajax机制
    XMLHttpRequest是ajax的核心机制，主要是进行服务器数据的异步请求操作，浏览器对并发的请求是有限制的，一般10个左右。通过XHR实例的open方式设置请求参数，通过send来发送请求，通过onreadystatechange 来进行请求结果的判断，并通过responseText获取请求结果。
12. JSONP机制
    Jsonp跨域请求主要是通过script标签进行跨域请求，在跨域请求之前，在全局作用域中定义好相应的处理函数，并把函数名称告知后端。后端通过url获知该函数名称，并构造相应的调用代码进行响应。而获得响应后的script将自动运行。该方法只能用于get请求，并需要后端配合。
13. 事件机制
    DOM0：通过onclick进行一个事件绑定。
    DOM2：通过addEventListener，removeEventListener进行事件绑定管理，并且支持事件捕获和事件冒泡(父节点捕获，子节点捕获，子节点冒泡，父节点冒泡，按事件注册顺序执行)，默认为冒泡。而事件响应回调的参数为事件对象，包含dom信息，以及控制后续操作API。
    DOM3：类似DOM3，但事件有区分大小写。
14. 事件委托
    利用冒泡的原理，把子节点的事件交由父节点进行监听并处理，而在移除父节点时，只需对父节点绑定事件进行解绑即可，而且可以提高性能，支持动态节点的事件处理。

CSS 基础

1. 行内元素：无法设置宽高, marginTop/marginBottom无效，不会自动换行。
2. 块元素：可设置宽高，支持自动换行。
3. 行内块元素：可设置宽高，不支持自动换行。
4. float：元素浮动，脱了文档流，使用时需要清除浮动，避免布局错乱。
5. flex：二维布局，内部元素无法切换为行内元素。
6. rem, vw：手机端适配单位，rem需MediaQuery对不同分辨率的手机进行html的fontSize设置。vw为视口单位。

HTML5 基础

1. canvas：画布，通过getContext来获取操作环境。
2. svg：矢量图，放大不会失真。
3. iconfont：字体图标，放大会失真。
4. video，audio：音视频播放器，配合canvas进行界面美化。
5. transform：几何操作，借助GPU进行重新渲染。
6. key Frame：动画帧定义。
7. websocket：通讯机制，用于实现运算隔离。
8. index DB：本地数据库，存储大数据。
9. File Api：文件操作，Blob、URL、FileReader等。