前端面经总结合集（他人+本身）1

参考面经（字节）： https://segmentfault.com/a/11...

推荐几个学习的网站：
现代JS教程：：https://zh.javascript.info/
JS词典：https://developer.mozilla.org...
阮一峰老师的ES6入门：https://es6.ruanyifeng.com/#d...

问题区

1.JS

1. ES6基本类型 ？
2. Set，Map区别？ Set无序，相似于数组。能够用于数组快速去重。Map相似于json数据，键值对，可是键能够是对象。
3. 判断数组的几种方法？为何要用Object.prototype.toString(),数组的.toString()不行吗，输出什么
4. 讲一下事件流，怎么阻止冒泡？如何移除事件绑定？
5. ES6 ，ES7新特性？

2.HTMl和CSS

1. flex常见属性，如何实现相似快手这种视频列表的瀑布流布局(一行两个) flex:1的含义
2. css动画的实现方式？具体一些
3. position每种属性的做用

3.编程题

1. 什么是面向对象？面向对象特性？与面向过程的区别？
   把大象放进冰箱 分别用面向对象，面向过程，函数式编程实现。
2. 求二叉树每层的最大节点，放入数组输出。(须要本身构造一棵二叉树去验证) 问优化：怎么只用一层循环实现层序遍历
3. 实现复杂版本的bind，可new可继承
4. 实现一个函数，将输入的数组转为链表，并实现一个方法向链表指定位置插入值
5. 两个无序数组合并成一个有序数组，问时间复杂度。 延伸：快排和冒泡排序的时间复杂度，使用场景
6. 实现toFix函数
7. 说一下instanceof的原理，实现一下
8. 知道map方法吗？实现一下。 reduce和基本版都写了
9. 实现ajax，至少实现get和post方法。这里深挖了get和post具体的传参方式以及ajax中具体是如何实现的
10. 实现一个模态框组件，用vue和react都可(要能传递肯定取消事件函数，有遮罩，居中)
11. 看代码输出（考察this和const，let区别）

4. 项目

1. 实习项目，主要关心作的项目的做用和难点
2. 本身写的最好的组件
3. react和vue的区别，各自的生命周期
4. vue 路由，hash和history的区别，大家项目中是怎么进行状态管理的，怎么配置路由的？
5. 常见的HTTP请求以及每一个请求的做用？GET和POST的区别
6. 前端安全措施，常见的安全问题，XSS？CSRF
7. https ca证书的做用，SSL层的做用
8. 路由切换页面的原理？
9. 如何尽量发现代码中的bug，有没有一些工具去辅助

5. 计算机相关知识

1. 你知道的数据结构有哪些？数组是数据结构吗？不是，那为何？什么是数据结构？你刚刚说到了堆，堆是一种新的数据结构吗？不是，是彻底二叉树。什么是彻底二叉树？
2. 树和图的区别？ 图的应用场景？
3. 网络模型以及每层的协议？

6. 其余

1. 别人的评价
2. 自身的优势和缺点
3. 压力最大的时候？怎么排解压力
4. 你对于之后前端学习的规划？

答案区

1.1 ES6基本类型

String，Bool，Undefined，Object，Symbol，Number，Null

1.2 Set对象详解

参见https://cloud.tencent.com/dev...

• Set 对象容许你存储任何类型的惟一值，不管是原始值或者是对象引用。
• Set特殊值：Undefined和Infinity只能存一个；NaN只能存一个，虽然不相等；
• Set可与Array互换 ：

let arr = new Array([...Set对象])  
let set=new Set(arr)

• Set做用：并交差集，数组去重。

let a=new Set([1,2,3]);
let b=new Set([2,3,4]); //并集
let union=new Set([...a,...b]);
console.log(union); //交集
let intersect=new Set([...a].filter(x=>b.has(x)));
console.log(intersect); //差集
let diff=new Set([...a].filter(x=>!b.has(x)));

// 数组快速去重
console.log([...new Set(arr)])

1.3 判断数组的几种方法

参见https://juejin.cn/post/684490...

下面几种方法前两个不许确

1. arr instanceof Array 缺点：不一样执行环境下，判断不正确问题
2. arr.constructor ===Arrray 缺点：constructor可被重写；不一样执行环境下，constructor判断不正确问题
3. Array.isArray(arr)
4. Object.prototype.toString
   如：Object.prototype.toString.call(arg)==='[object Array]'

instanceof 判断实例是否属于某种类型，逻辑上是按照该实例的__proto__一层层向上找，子类或者后代一样适用。
它假定只有一个全局环境。若是网页中包含多个框架，那实际上就存在两个以上不一样的全局执行环境，从而存在两个以上不一样版本的Array构造函数。若是你从一个框架向另外一个框架传入一个数组，那么传入的数组与在第二个框架中原生建立的数组分别具备各自不一样的构造函数。

toString 能够用toString封装一个函数，判断变量的类型

function getType(obj) {
    return Object.prototype.toString.call(obj).slice(8,-1);
}

var a = [1,2,3];
console.log(getType(a)); //Array 

var b = function(){};
console.log(getType(b)); //Function

**typeof(Arr) ** // Object    不可用于判断Array，通常用来判断基本类型

typeof基本用法参见下图

1.4 事件流，阻止冒泡，接触事件绑定

https://segmentfault.com/a/11...
1.事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。
2.事件就是用户或浏览器自身执行的某种动做。诸如click(点击)、load(加载)、mouseover(鼠标悬停)。
3.事件处理程序响应某个事件的函数就叫事件处理程序(或事件侦听器)。

addEventListener()和removeEventListener()。全部DOM节点中都包含这两个方法，而且它们都接收3个参数：要处理的事件名、做为事件处理程序的函数和一个布尔值。当这个布尔值为true时，表示在捕获阶段调用事件处理程序；若果是false，表示在冒泡阶段调用事件处理程序。

调用顺序：
捕获阶段，按照由外以内调用事件处理函数；
冒泡阶段，按照由内至内调用事件处理函数；
捕获阶段又在冒泡阶段调用事件处理程序时：事件按DOM事件流的顺序执行事件处理程序，且当事件处于目标阶段时，事件调用顺序决定于绑定事件的书写顺序（ps:目标阶段是指点中的最内节点）

阻止冒泡
参见红宝书（第4版P525）

1. 给子级加上 event.stopPropagation( )，阻止往上冒泡
2. 在事件处理函数中返回 false，组织了事件自己（默认事件）没搞懂
3. event.target==event.currentTarget，让触发事件的元素等于绑定事件的元素，也能够阻止事件冒泡；没搞懂

1.5 ES5，ES6新特性

属于基础知识，不赘述

2.1 flex

1. 常见属性：参见阮一峰老师的 http://www.ruanyifeng.com/blo...
2. 如何实现相似快手这种视频列表的瀑布流布局(一行两个)
3. flex:1的含义：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。这里至关于flex：1 1 auto。

flex-grow属性定义项目的放大比例，默认为0，即若是存在剩余空间，也不放大。若是全部项目的flex-grow属性都为1，则它们将等分剩余空间（若是有的话）。若是一个项目的flex-grow属性为2，其余项目都为1，则前者占据的剩余空间将比其余项多一倍。
flex-shrink属性定义了项目的缩小比例，默认为1，即若是空间不足，该项目将缩小。若是全部项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。若是一个项目的flex-shrink属性为0，其余项目都为1，则空间不足时，前者不缩小。
flex-basis属性定义了在分配多余空间以前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的原本大小。它能够设为跟width或height属性同样的值（好比350px），则项目将占据固定空间。

2.2 css动画的实现方式？具体一些

https://zh.javascript.info/js...

2.3 position每种属性的做用

positon和display是前端最重要的两个基本属性，必定得好好写
参见：阮一峰老师的https://www.ruanyifeng.com/bl...

3.11 (this、const/let/var）

// Q1 若是一个函数中有this，可是它没有被上一级的对象所调用，那么this指向的就是window
var a = 1;
function print () {
 console.log(this.a)
}            
print()  //a=1

// Q2 若是一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
const obj = {
 a: 2,
 print: function () { console.log(this.a) }
}
obj.print();  //2
​
// Q3 
const obj = {
 a: 3,
 print: function () { console.log(this.a) }
}
obj.print()  //3  与下面的foo()区别在因而全局环境仍是obj环境
const foo = obj.print; 
foo()     //undefind      全局状况下调用的，没有全局变量a

// Q3.1   若是一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象
const obj = {
    a: 3,
    printOut:{
        a:4,
        printIn: function(){ console.log(this.a)},
    },
}
obj.printOut.printIn()    //4 
const foo = obj.printOut.printIn;  
foo()     //undefind      全局状况下调用的，没有全局变量a
​
// Q4
const obj = {
 a: 4,
 print: () => { console.log(this.a) }
}
obj.print();                 //undefined     有箭头函数，对象不构成单独的做用域，致使`print`箭头函数定义时的做用域就是全局做用域。
​
// Q5
var a = 5
const obj = {
 a: 6,
 print: () => { console.log(this.a) }
}
obj.print.call({a: 7}); //5         理由同上
​
// Q6 不太会
function Person () {
 this.a = 8
 this.print = function () {console.log(this.a)}
 return {a: 9}
}
​
const p = new Person()
console.log(p.a)
console.log(p.print())
​
// Q7 不太会
'use strict';
var a = 1;
​
function print () {
 console.log(this.a)
}
print()    //1

//考察let，const
// 1.
a = 100;
let a;
a = 10;
function test(num) {
    console.log(a);
    a = num;
}
console.log(a);
test(5);
console.log(a);

// 2.
const a;
a = 10;      //报错