前端面试系列六：手写程序算法题

快来加入我们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。

"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！

面试系列不定期更新，请随时关注

前言

本篇专栏重点在于讲解面试中 手写程序题/算法题 的面试题内容。

注意： 本篇专栏至只会涉及到重点内容，并不会进行拓展。某些题目需要拓展知识点的，我们会将拓展内容、整体详细信息放置与每个题目的最前面，可以自行查看。

手写程序题/算法题

手写程序题/算法题
程序输出题目：构造函数与实例对象间的属性问题
程序编程题：flat、拍平数组、自己实现拍平数组的效果
程序编程题：自己实现 promise all
程序编程题：自己实现 reducer
程序编程题：URL 解析为对象
程序编程题：使用 setTimeout 写一个 setInterval
算法题：无重复字符最大子串的问题
算法题：二叉树的前中后遍历
算法题：迷宫问题
算法题：手写冒泡排序
算法题：不完全的二叉树的倒置

题目解析

构造函数与实例对象间的属性问题

以下代码输出什么？

function Otaku() {
   
  this.b = 1
  this.c = 2
}
var person = new Otaku()
Otaku.prototype.b = 4
person.c = 5
console.log('1:', person.b)
console.log('2:', person.c)
person.__proto__.b = 10
console.log('3:', person.b)
console.log('4:', Otaku.prototype.b)

这道题目涉及到构造函数与实例对象之间的知识点，背后同样涉及原型与原型链的问题，详细见JavaScript 深入之从原型到原型链。

我们先来揭晓答案：

1: 1
2: 5
3: 1
4: 10

你有全答对吗？下面我们一起来看看这道题。这道题首先给了一个构造函数 Otaku，这个构造函数有两个属性 b 和 c，然后使用 new 创建了它的实例对象 person,如果你了解原型，那么你肯定知道实例对象 person 已经获得了构造函数中的属性。

function Otaku() {
   
  this.b = 1
  this.c = 2
}
var person = new Otaku() // person.b = 1; person.c = 2

看到这里你会发现构造函数 Otaku 有一个属性 prototype，这个构造函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型，也就是这个例子中的 person 原型。也就是说 Otaku.prototype.b = 4; 这条语句中的 b 实际指向的是原型的 b。

function Otaku() {
   
  this.b = 1
  this.c = 2
}
var person = new Otaku()
Otaku.prototype.b = 4 // 修改的是 person 的原型的属性 b
person.c = 5 // 修改的是 person 的 c
console.log('1:', person.b) // person.b = 1
console.log('2:', person.c) // person.c = 5

看到这里，我们又发现 person 的属性 __proto__, 这个属性也指向 person 的原型，所以这句话的 b 属性也是指向原型的 b

function Otaku() {
   
  this.b = 1
  this.c = 2
}
var person = new Otaku() // person.b = 1; person.c = 2
Otaku.prototype.b = 4 // 修改的是 person 的原型的属性 b
person.c = 5 // 修改的是 person 的 c
console.log('1:', person.b) // person.b = 1
console.log('2:', person.c) // person.c = 5
person.__proto__.b = 10 // 修改的事 preson 的原型的属性b
console.log('3:', person.b) // person.b = 1
console.log('4:', Otaku.prototype.b) // Otaku.prototype.b = 10

这就是结果了，关于这道题涉及的知识点，重点还是在原型以及原型链上。

程序编程题

1. flat、拍平数组、自己实现拍平数组的效果

这里只提供两个比较简单的实现，后面还会涉及到使用reduce和栈、使用Generator、原型链等等，详细见：面试官连环追问：数组拍平（扁平化） flat 方法实现 - 知乎 (zhihu.com)

1. 最简单的遍历实现

const arr = [1,