前端面试instanceof_毕业/跳槽季：前端老司机教你如何从容应对面试官-CSDN博客

本文链接：https://blog.csdn.net/weixin_39756696/article/details/112351805

前言

金三银四跳槽旺季，并且马上毕业季到了，竞争力(特别是1-2年从业者)逐渐加大。但是大家也都知道今年的互联网大环境较之前来说比较差，那么这个时候如何脱颖而出就是我们急需去解决的问题，在我看来，不管环境如何变化，前端面试中的考察知识点还是有迹可循的，接下来我们就分为五个大的模块来详细介绍一下前端面试中的高频考点。

js基础知识点和常考面试题

变量类型

JavaScript 是一种弱类型脚本语言，所谓弱类型指的是定义变量时，不需要什么类型，在程序运行过程中会自动判断类型。

ECMAScript 中定义了 6 种原始类型：

Boolean
String
Number
Null
Undefined
Symbol(ES6 新定义)

注意：原始类型不包含 Object。

题目：类型判断用到哪些方法？

typeof

typeof xxx得到的值有以下几种类型：undefined boolean number string object function、symbol ，比较简单，不再一一演示了。这里需要注意的有三点：

typeof null结果是object ，实际这是typeof的一个bug，null是原始值，非引用类型
typeof [1, 2]结果是object，结果中没有array这一项，引用类型除了function其他的全部都是object
typeof Symbol() 用typeof获取symbol类型的值得到的是symbol，这是 ES6 新增的知识点

instanceof

用于实例和构造函数的对应。例如判断一个变量是否是数组，使用typeof无法判断，但可以使用[1, 2] instanceof Array来判断。因为，[1, 2]是数组，它的构造函数就是Array。同理：

function Foo(name) { this.name = name}var foo = new Foo('bar')console.log(foo instanceof Foo) // true

Tips:那么这里追问一句instanceof的原理是什么呢?这里你可以自己先想一下，然后在看我下面给出的代码：

function myInstanceof(target, source) { let prototype = source.prototype target = target.__proto__ //while(true)会一直执行，知道返回true或者false while (true) {  if (target === null || target === undefined) return false if (prototype === target) return true target = target.__proto__ }}

这里target对应上面的foo,source对应上面的构造函数Foo

toString

我们也可以通过toString() 来获取每个对象的类型。为了每个对象都能通过 Object.prototype.toString() 来检测，需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用，传递要检查的对象作为第一个参数，称为thisArg。代码如下：

let toString = Object.prototype.toString;toString.call(new Date); // [object Date]toString.call(new String); // [object String]toString.call(Math); // [object Math]//Since JavaScript 1.8.5toString.call(undefined); // [object Undefined]toString.call(null); // [object Null]

类型转换

首先我们要知道，在 JS 中类型转换只有三种情况，分别是：

转换为布尔值
转换为数字
转换为字符串

转布尔值

在条件判断时，除了 undefined， null， false， NaN， ''， 0， -0，其他所有值都转为 true，包括所有对象。

对象转原始类型

对象在转换类型的时候，会调用内置的 [[ToPrimitive]] 函数，对于该函数来说，算法逻辑一般来说如下：

如果已经是原始类型了，那就不需要转换了调用 x.valueOf()，如果转换为基础类型，就返回转换的值调用 x.toString()，如果转换为基础类型，就返回转换的值如果都没有返回原始类型，就会报错。

this

先搞明白一个很重要的概念 —— this的值是在执行的时候才能确认，定义的时候不能确认！为什么呢 —— 因为this是执行上下文环境的一部分，而执行上下文需要在代码执行之前确定，而不是定义的时候。看如下例子

var a = { name: 'A', fn: function () { console.log(this.name) }}a.fn() // this === aa.fn.call({name: 'B'}) // this === {name: 'B'}var fn1 = a.fnfn1() // this === window

this执行会有不同，主要集中在这几个场景中

作为构造函数执行，构造函数中
作为对象属性执行，上述代码中a.fn()
作为普通函数执行，上述代码中fn1()
用于call apply bind，上述代码中a.fn.call({name: 'B'})

题目：如何正确判断 this？箭头函数的 this 是什么？首先箭头函数其实是没有 this 的，箭头函数中的 this 只取决包裹箭头函数的第一个普通函数的 this。其次关于this的指向，这里有一句万能的判断方法就是this永远指向最后调用的它的对象

闭包

讲完这些内容，我们再来看一个例子，通过例子来理解闭包。

function F1() { var a = 100 return function () { console.log(a) }}var f1 = F1()var a = 200f1()

自由变量将从作用域链中去寻找，但是依据的是函数定义时的作用域链，而不是函数执行时，以上这个例子就是闭包。闭包主要有两个应用场景：

函数作为返回值，上面的例子就是函数作为参数传递，看以下例子

function F1() { var a = 100 return function () { console.log(a) }}function F2(f1) { var a = 200 console.log(f1())}var f1 = F1()F2(f1)

原型

先写一个简单的代码示例。

// 构造函数function Foo(name, age) { this.name = name}Foo.prototype.alertName = function () { alert(this.name)}// 创建示例var f = new Foo('zhangsan')f.printName = function () { console.log(this.name)}// 测试f.printName()f.alertName()

执行printName时很好理解，但是执行alertName时发生了什么？这里再记住一个重点当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__(即它的构造函数的prototype)中寻找，因此f.alertName就会找到Foo.prototype.alertName。

那么如何判断这个属性是不是对象本身的属性呢？使用hasOwnProperty，常用的地方是遍历一个对象的时候。

var itemfor (item in f) { // 高级浏览器已经在 for in 中屏蔽了来自原型的属性，但是这里建议大家还是加上这个判断，保证程序的健壮性 if (f.hasOwnProperty(item)) { console.log(item) }}

原型链

还是接着上面的示例，如果执行f.toString()时，又发生了什么？

// 省略 N 行// 测试f.printName()f.alertName()f.toString()

因为f本身没有toString()，并且f.proto(即Foo.prototype)中也没有toString。这个问题还是得拿出刚才那句话——当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__(即它的构造函数的prototype)中寻找。

如果在f.__proto__中没有找到toString，那么就继续去f.proto.__proto__中寻找，因为f.__proto__就是一个普通的对象而已嘛！

f.__proto__即Foo.prototype，没有找到toString，继续往上找 f.proto.__proto__即Foo.prototype.proto。Foo.prototype就是一个普通的对象，因此Foo.prototype.__proto__就是Object.prototype，在这里可以找到toString 因此f.toString最终对应到了Object.prototype.toString 这样一直往上找，你会发现是一个链式的结构，所以叫做“原型链”。如果一直找到最上层都没有找到，那么就宣告失败，返回undefined。最上层是什么 —— Object.prototype.proto === null

ES6知识点和常考面试题

var、let 及 const

var、let 及 const的区别

对于这个问题，我们应该先来了解提升(hoisting)这个概念。

console.log(a) // undefinedvar a = 1

从上述代码中我们可以发现，虽然变量还没有被声明，但是我们却可以使用这个未被声明的变量，这种情况就叫做提升，并且提升的是声明。

对于这种情况，我们可以把代码这样来看

var aconsole.log(a) // undefineda = 1

接下来我们再来看一个例子

var a = 10var aconsole.log(a)

对于这个例子，如果你认为打印的值为 undefined 那么就错了，答案应该是 10，对于这种情况，我们这样来看代码

var avar aa = 10console.log(a)

到这里为止，我们已经了解了 var 声明的变量会发生提升的情况，其实不仅变量会提升函数也会被提升。

console.log(a) // ƒ a() {}function a() {}var a = 1

对于上述代码，打印结果会是 ƒ a() {}，即使变量声明在函数之后，这也说明了函数会被提升，并且优先于变量提升 。

说完了这些，想必大家也知道 var 存在的问题了，使用 var 声明的变量会被提升到作用域的顶部，接下来我们再来看 let 和 const 。

我们先来看一个例子：

var a = 1let b = 1const c = 1console.log(window.b) // undefinedconsole.log(window. c) // undefinedfunction test(){ console.log(a) let a}test()

首先在全局作用域下使用 let 和 const 声明变量，变量并不会被挂载到 window 上，这一点就和 var 声明有了区别。

再者当我们在声明 a 之前如果使用了 a，就会出现报错的情况

你可能会认为这里也出现了提升的情况，但是因为某些原因导致不能访问。

首先报错的原因是因为存在暂时性死区，我们不能在声明前就使用变量，这也是 let 和 const 优于 var 的一点。然后这里你认为的提升和 var 的提升是有区别的，虽然变量在编译的环节中被告知在这块作用域中可以访问，但是访问是受限制的。

箭头函数

箭头函数是 ES6 中新的函数定义形式，function name(arg1, arg2) {...}可以使用(arg1, arg2) => {...}来定义。示例如下：

// JS 普通函数var arr = [1, 2, 3]arr.map(function (item) { console.log(index) return item + 1})// ES6 箭头函数const arr = [1, 2, 3]arr.map((item, index) => { console.log(index) return item + 1})

箭头函数存在的意义，第一写起来更加简洁，第二可以解决 ES6 之前函数执行中this是全局变量的问题，看如下代码

function fn() { console.log('real', this) // {a: 100} ，该作用域下的 this 的真实的值 var arr = [1, 2, 3] // 普通 JS arr.map(function (item) { console.log('js', this) // window 。普通函数，这里打印出来的是全局变量，令人费解 return item + 1 }) // 箭头函数 arr.map(item => { console.log('es6', this) // {a: 100} 。箭头函数，这里打印的就是父作用域的 this return item + 1 })}fn.call({a: 100})

模块化

题目：ES6 模块化如何使用？

ES6 中模块化语法更加简洁，直接看示例。

如果只是输出一个唯一的对象，使用export default即可，代码如下

// 创建 util1.js 文件，内容如

export default { a: 100}

// 创建 index.js 文件，内容如

import obj from './util1.js'console.log(obj)如果想要输出许多个对象，就不能用default了，且import时候要加{...}，代码如下// 创建 util2.js 文件，内容如export function fn1() { alert('fn1')}export function fn2() { alert('fn2')}

// 创建 index.js 文件，内容如

import { fn1, fn2 } from './util2.js'fn1()fn2()

map, filter, reduce

涉及面试题：map, filter, reduce 各自有什么作用？

map 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后放入到新的数组中。

[1, 2, 3].map(v => v + 1) // -> [2, 3, 4]

另外 map 的回调函数接受三个参数，分别是当前索引元素，索引，原数组

filter 的作用也是生成一个新数组，在遍历数组的时候将返回值为 true 的元素放入新数组，我们可以利用这个函数删除一些不需要的元素

let array = [1, 2, 4, 6]let newArray = array.filter(item => item !== 6)console.log(newArray) // [1, 2, 4]

和 map 一样，filter 的回调函数也接受三个参数，用处也相同。

最后我们来讲解 reduce 这块的内容，同时也是最难理解的一块内容。reduce 可以将数组中的元素通过回调函数最终转换为一个值。

如果我们想实现一个功能将函数里的元素全部相加得到一个值，可能会这样写代码

const arr = [1, 2, 3]let total = 0for (let i = 0; i < arr.length; i++) { total += arr[i]}console.log(total) //6

但是如果我们使用 reduce 的话就可以将遍历部分的代码优化为一行代码

const arr = [1, 2, 3]const sum = arr.reduce((acc, current) => acc + current, 0)console.log(sum)

对于 reduce 来说，它接受两个参数，分别是回调函数和初始值，接下来我们来分解上述代码中 reduce 的过程,首先初始值为 0，该值会在执行第一次回调函数时作为第一个参数传入回调函数接受四个参数，分别为累计值、当前元素、当前索引、原数组，后三者想必大家都可以明白作用，这里着重分析第一个参数在一次执行回调函数时，当前值和初始值相加得出结果 1，该结果会在第二次执行回调函数时当做第一个参数传入所以在第二次执行回调函数时，相加的值就分别是 1 和 2，以此类推，循环结束后得到结果 6 想必通过以上的解析大家应该明白 reduce 是如何通过回调函数将所有元素最终转换为一个值的，当然 reduce 还可以实现很多功能，接下来我们就通过 reduce 来实现 map 函数

const arr = [1, 2, 3]const mapArray = arr.map(value => value * 2)const reduceArray = arr.reduce((acc, current) => { acc.push(current * 2) return acc}, [])console.log(mapArray, reduceArray) // [2, 4, 6]

Class

在 ES6 中，我们可以使用 class 去实现继承，并且实现起来很简单

class Parent { constructor(value) { this.val = value } getValue() { console.log(this.val) }}class Child extends Parent { constructor(value) { super(value) this.val = value }}let child = new Child(1)child.getValue() // 1child instanceof Parent // true

class 实现继承的核心在于使用 extends 表明继承自哪个父类，并且在子类构造函数中必须调用 super，因为这段代码可以看成 Parent.call(this, value)。

当然了，之前也说了在 JS 中并不存在类，class 的本质就是函数。

React 和 Vue 常考基础知识点

React 常考基础知识点

写 React 项目时为什么要在组件中写 key，其作用是什么

key的作用是为了在diff算法执行时更快的找到对应的节点，提高diff速度，key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。

React 中 setState 什么时候是同步的，什么时候是异步的

在React中，如果是由React引发的事件处理(比如通过onClick引发的事件处理)，调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。

**原因：**在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是，有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。

那么这里看一道非常常见的React面试题

class Example extends React.Component { constructor() { super(); this.state = { val: 0 }; }  componentDidMount() { this.setState({val: this.state.val + 1}); console.log(this.state.val); // 第 1 次 log this.setState({val: this.state.val + 1}); console.log(this.state.val); // 第 2 次 log setTimeout(() => { this.setState({val: this.state.val + 1}); console.log(this.state.val); // 第 3 次 log this.setState({val: this.state.val + 1}); console.log(this.state.val); // 第 4 次 log }, 0); } render() { return null; }};

四次输出分别是什么 => 0 0 2 3

1、第一次和第二次都是在 react 自身生命周期内，触发时 isBatchingUpdates 为 true，所以并不会直接执行更新 state，而是加入了 dirtyComponents，所以打印时获取的都是更新前的状态 0。

2、两次 setState 时，获取到 this.state.val 都是 0，所以执行时都是将 0 设置成 1，在 react 内部会被合并掉，只执行一次。设置完成后 state.val 值为 1。

3、setTimeout 中的代码，触发时 isBatchingUpdates 为 false，所以能够直接进行更新，所以连着输出 2，3。

react 生命周期函数

初始化阶段：
getDefaultProps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount：组件即将被装载、渲染到页面上
render:组件在这里生成虚拟的 DOM 节点
componentDidMount:组件真正在被装载之后
运行中状态：
componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了)
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘
componentDidUpdate:组件已经更新
销毁阶段：
componentWillUnmount:组件即将销毁

Vue常考基础知识点

Vue是如何实现双向绑定的

Vue双向绑定的原理简单来说就是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。更多详细的内容这里篇幅有限，我们就不展开说了，我找了一篇写的非常详细的文章，供大家参考。

computed 和 watch 区别

computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容。

watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。

所以一般来说需要依赖别的属性来动态获得值的时候可以使用 computed，对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch。

另外 computed 和 watch 还都支持对象的写法，这种方式知道的人并不多。

vm.$watch('obj', { // 深度遍历 deep: true, // 立即触发 immediate: true, // 执行的函数 handler: function(val, oldVal) {}})var vm = new Vue({ data: { a: 1 }, computed: { aPlus: { // this.aPlus 时触发 get: function () { return this.a + 1 }, // this.aPlus = 1 时触发 set: function (v) { this.a = v - 1 } } }})

keep-alive 组件有什么作用

如果你需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。

对于 keep-alive 组件来说，它拥有两个独有的生命周期钩子函数，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

v-show 与 v-if 区别

v-show 只是在 display: none 和 display: block 之间切换。无论初始条件是什么都会被渲染出来，后面只需要切换 CSS，DOM 还是一直保留着的。所以总的来说 v-show 在初始渲染时有更高的开销，但是切换开销很小，更适合于频繁切换的场景。

v-if 的话就得说到 Vue 底层的编译了。当属性初始为 false 时，组件就不会被渲染，直到条件为 true，并且切换条件时会触发销毁/挂载组件，所以总的来说在切换时开销更高，更适合不经常切换的场景。

并且基于 v-if 的这种惰性渲染机制，可以在必要的时候才去渲染组件，减少整个页面的初始渲染开销。

常考算法题解析

冒泡排序

该算法的操作次数是一个等差数列 n + (n - 1) + (n - 2) + 1 ，去掉常数项以后得出时间复杂度是 O(n * n)

function bubble(array) {

checkArray(array);

for (let i = array.length - 1; i > 0; i--) {

// 从 0 到 `length - 1` 遍历

for (let j = 0; j < i; j++) {

if (array[j] > array[j + 1]) swap(array, j, j + 1)

}

return array;

}

插入排序

该算法的操作次数是一个等差数列 n + (n - 1) + (n - 2) + 1 ，去掉常数项以后得出时间复杂度是 O(n * n)

function insertion(array) { if (!checkArray(array)) return for (let i = 1; i < array.length; i++) { for (let j = i - 1; j >= 0 && array[j] > array[j + 1]; j--) swap(array, j, j + 1); } return array;}

选择排序

该算法的操作次数是一个等差数列 n + (n - 1) + (n - 2) + 1 ，去掉常数项以后得出时间复杂度是 O(n * n)

function selection(array) { if (!checkArray(array)) return for (let i = 0; i < array.length - 1; i++) { let minIndex = i; for (let j = i + 1; j < array.length; j++) { minIndex = array[j] < array[minIndex] ? j : minIndex; } swap(array, i, minIndex); } return array;}

归并排序

该算法的操作次数是可以这样计算：递归了两次，每次数据量是数组的一半，并且最后把整个数组迭代了一次，所以得出表达式 2T(N / 2) + T(N) (T 代表时间，N 代表数据量)。根据该表达式可以套用该公式得出时间复杂度为 O(N * logN)

function sort(array) { if (!checkArray(array)) return mergeSort(array, 0, array.length - 1); return array;}function mergeSort(array, left, right) { // 左右索引相同说明已经只有一个数 if (left === right) return; // 等同于 `left + (right - left) / 2` // 相比 `(left + right) / 2` 来说更加安全，不会溢出 // 使用位运算是因为位运算比四则运算快 let mid = parseInt(left + ((right - left) >> 1)); mergeSort(array, left, mid); mergeSort(array, mid + 1, right); let help = []; let i = 0; let p1 = left; let p2 = mid + 1; while (p1 <= mid && p2 <= right) { help[i++] = array[p1] < array[p2] ? array[p1++] : array[p2++]; } while (p1 <= mid) { help[i++] = array[p1++]; } while (p2 <= right) { help[i++] = array[p2++]; } for (let i = 0; i < help.length; i++) { array[left + i] = help[i]; } return array;}

快排

该算法的复杂度和归并排序是相同的，但是额外空间复杂度比归并排序少，只需 O(logN)，并且相比归并排序来说，所需的常数时间也更少。

function sort(array) { if (!checkArray(array)) return quickSort(array, 0, array.length - 1); return array;}function quickSort(array, left, right) { if (left < right) { swap(array, , right) // 随机取值，然后和末尾交换，这样做比固定取一个位置的复杂度略低 let indexs = part(array, parseInt(Math.random() * (right - left + 1)) + left, right); quickSort(array, left, indexs[0]); quickSort(array, indexs[1] + 1, right); }}function part(array, left, right) { let less = left - 1; let more = right; while (left < more) { if (array[left] < array[right]) { // 当前值比基准值小，`less` 和 `left` 都加一 ++less; ++left; } else if (array[left] > array[right]) { // 当前值比基准值大，将当前值和右边的值交换 // 并且不改变 `left`，因为当前换过来的值还没有判断过大小 swap(array, --more, left); } else { // 和基准值相同，只移动下标 left++; } } // 将基准值和比基准值大的第一个值交换位置 // 这样数组就变成 `[比基准值小, 基准值, 比基准值大]` swap(array, right, more); return [less, more];}

动态规划

动态规划背后的基本思想非常简单。就是将一个问题拆分为子问题，一般来说这些子问题都是非常相似的，那么我们可以通过只解决一次每个子问题来达到减少计算量的目的。

一旦得出每个子问题的解，就存储该结果以便下次使用。

斐波那契数列

斐波那契数列就是从 0 和 1 开始，后面的数都是前两个数之和

0，1，1，2，3，5，8，13，21，34，55，89....

那么显然易见，我们可以通过递归的方式来完成求解斐波那契数列

function fib(n) { if (n < 2 && n >= 0) return n return fib(n - 1) + fib(n - 2)}fib(10)

以上代码已经可以完美的解决问题。但是以上解法却存在很严重的性能问题，当 n 越大的时候，需要的时间是指数增长的，这时候就可以通过动态规划来解决这个问题。

动态规划的本质其实就是两点

自底向上分解子问题通过变量存储已经计算过的解根据上面两点，我们的斐波那契数列的动态规划思路也就出来了

斐波那契数列从 0 和 1 开始，那么这就是这个子问题的最底层通过数组来存储每一位所对应的斐波那契数列的值

function fib(n) { let array = new Array(n + 1).fill(null) array[0] = 0 array[1] = 1 for (let i = 2; i <= n; i++) { array[i] = array[i - 1] + array[i - 2] } return array[n]}fib(10)

反转单向链表

该题目来自 LeetCode，题目需要将一个单向链表反转。思路很简单，使用三个变量分别表示当前节点和当前节点的前后节点，虽然这题很简单，但是却是一道面试常考题

以下是实现该算法的代码

var reverseList = function(head) { // 判断下变量边界问题 if (!head || !head.next) return head // 初始设置为空，因为第一个节点反转后就是尾部，尾部节点指向 null let pre = null let current = head let next // 判断当前节点是否为空 // 不为空就先获取当前节点的下一节点 // 然后把当前节点的 next 设为上一个节点 // 然后把 current 设为下一个节点，pre 设为当前节点 while(current) { next = current.next current.next = pre pre = current current = next } return pre};

总结

算法是一个需要长时间积累的过程，所以这部分只是列举了一些典型的基础题，更多的还是要大家把精力放在平时