写在前面
正值金三银四，纵使疫情也阻挡不住各位奔(tiao)向(cao)大(zhang)厂(xin)的心。通往大厂道路的第一关，是笔试，而笔试，考的就是算法。
前端工程师，首先是一个软件工程师
数据结构与算法是软件工程师必备的技能之一，对于我们前端工程师而言也是如此。尽管你可能会说我在平时工作中根本用不到什么算法相关的知识，但是掌握算法，实际掌握的是它的逻辑思维能力，这点对于一个工程师而言是至关重要的。
所以，从今天起，我决定重学一下前端比较常用的数据结构与算法知识。
在此插播一条广告：前端算法小结 是我在阅读 修言大佬 的 前端算法与数据结构小册 后的读后感 + 自己一些相关积累结合而成的，强烈建议大家去订阅修言大佬的这本小册，生动形象，简明易懂。
（在线求催更...）
前端开(mian)发(shi)需要掌握的几种数据结构
先罗列一下前端开发所需要的掌握的数据结构：
- 数组
- 栈
- 队列
- 链表
- 树（二叉树）
本文将从前端开发者最熟悉的数组先说起。
数组
数组应该是日常开发中使用频率最高的数据结构之一了，也是大家最熟悉的一种。数组在数据结构中的应用十分广泛，从大家最熟悉的一维数组，到二维数组，再到栈和队列的实现，都需要依赖数组来完成。
创建数组
说到如何创建一个数组，大家脑海里应该已经浮现各种方法了，已创建一个空数组为例，就有下面这么多种：
// 1
const arr = [];
// 2
const arr = new Array()
// 3
const arr = Array.of()
// 4
const arr = Array.from([])
而在算法的场景中，往往需要我们创建一个指定长度的数组，同时为其填充初始值。常用的实现方式如下：
// 创建一个长度为3，元素值均为0的数组
const arr = (new Array(3)).fill(0) // [0, 0, 0]
访问数组
数组的访问复杂度是O(1)，因为我们可以直接通过下标来访问到数组中的某个元素。
const arr = (new Array(3)).fill(0) // [0, 0, 0]
// 访问第二个元素
arr[1] // 0
遍历数组
JS中遍历数组的方法有十几种：for循环、forEach、for of、for in、map、filter、reduce、every、some、find 等等等等。
如果没有特殊的需要，那么建议使用for循环来遍历数组。因为从性能上看for循环是最优的。
二维数组
二维数组，顾名思义就是一维数组中的每个元素都是数组。
const arr = [
[0,0,0],
[1,1,1],
[2,2,2]
]
而在算法题中，二维数组又有着其他更为常见的名称：矩阵 or 棋盘。（所以只要看到这两个关键字，直接创建二维数组就完事了）
创建二维数组
那么如何创建一个二维数组？很多人可能会想到用创建一维数组的 fill 方法来实现。
const arr = (new Array(3)).fill([]) // [[], [], []]
看起来没啥问题，但如果想给某一个元素赋值，问题就来了：
// 为二维数组中第一行第一列元素赋值为1
arr[0][0] = 1;
console.log(arr); // [[1], [1], [1]]
从结果上看，我们只为二维数组中一个元素赋值，但是却改变了所有元素的值。这是 fill 的填充机制造成的：当你传给 fill 的参数是一个引用类型（比如上面传的空数组），那么 fill 其实填充的是它的引用。也就是填充后的三个空数组指向的是同一块内存空间，它们其实是同一个数组。
所以对于如何创建二维数组，建议还是通过for 循环创建：
for(let i=0; i<arr.length; i++) {
arr[i] = []
}
访问二维数组
访问二维数组和一维数组一样，都是通过下标访问。要准确访问二维数组中的某个元素，你需要访问它所在的行与所在的列：
arr[0][1]; // 访问二维数组arr中 第一行，第二列的元素
遍历二维数组
遍历一维数组需要一层for循环，那么遍历二维数组自然就是两层for循环了：
let len = arr.length;
for(let i=0; i<len; i++) {
for(let j=0; j<len; j++) {
console.log(arr[i][j]) // 访问第i行，第j个元素
}
}
一道面试题
这里给大家分享一道我亲身经历过的面试题，大致题意如下：
现在有一个8 * 8的棋盘，棋盘格子上如果是车就标记为 1，其他的标记为 0。
如果纵向或者横向上同时存在两个车，那就获胜，否则就是失败。
求输出结果
看到棋盘，转为二维数组就对了。所以可以很轻松的将这道题转化为：一个8*8的二维数组，如果它的某一行或者某一列上同时存在两个1，那就输出true，否则为false。
const func = (arr) => {
let len = arr.length;
// 遍历二维数组
for(let i=0; i<len; i++) {
let num1 = 0; // 记录横向出现1的个数
for(let j=0; j<len; j++) {
let num2 = 0; // 记录纵向出现1的个数
// arr[i][j] 表示横向
if(arr[i][j] === 1) {
num1++;
}
// arr[j][i] 横向坐标反转，表示纵向
if(arr[j][i] === 1) {
num2++;
}
if(num1 > 1) return true
if(num2 > 1) return true
}
}
return false
}
JS中的数组是真正的数组吗？
关于这个问题，首先要知道什么是真正的数组。在各种官方定义中，真正的数组有着一个必要条件：存储在连续的内存空间里。
而在JS中，大部分情况下数组是真正的数组，比如：
const arr = [1, 2, 3]
但是当数组中的元素不止一种类型时，它就不是一个真正的数组：
const arr = ['1', 2, true]
此时的数组对应着一段不连续的内存空间，其底层是使用哈希映射分配内存空间，用链表对象来实现。
不过在实际算法题中，大多数情况下我们用到的都是真正的数组。而正由于数组拥有存储在连续内存空间的特点，我们在数组中任意一个位置添加或删除元素，都需要移动到它后续的元素，因此数组的添加/删除操作对应的复杂度就是O(n)。
几款常见的数组算法题
（部分题目来源leetcode）
两数求和
给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标
示例：
给定 nums = [2, 7, 11, 15], target = 9
因为 nums[0] + nums[1] = 2 + 7 = 9
所以返回 [0, 1]
敲黑板： 几乎所有求和问题，都可以转化为求差问题。
如果你是按照求和的思路来实现，那么很有可能就是通过两层 for循环，分别记录第一层的值为a，第二层的值为b，然后计算 a+b 是否等于 target。
很显然，两层循环的时间复杂度是 O(n²)，这绝对不是一个最优解。
转化为求差问题后，这道题解法有很多种，下面我们来一一分析：
法1：利用 Map
思路： 在遍历数组时，利用 Map 来记录遍历过的元素以及它对应的索。；然后再遍历到新元素时，计算它与target的差值diff，再查找 Map 中是否已经存在key值为diff的元素。如果已经存在，则可输出答案
const twoSum = function(nums, target) {
let targetMap = new Map(),
len = nums.length;
for(let i=0; i<len; i++) {
let diff = target - nums[i];
if(targetMap.has(diff)) {
return [i, targetMap.get(diff)]
}
targetMap.set(nums[i], i);
}
return []
};
法2：对撞指针
所谓对撞指针，就是在数组头部与尾部设定两个指针，各自往中间靠拢。双指针对应的数组元素值相加如果大于target，那么需要右指针往左走；反之左指针往右走；等于target时，就是我们要的结果。
但是这个方法有一个很重要的前提，必须是有序数组。
// 假设 nums 有序
const twoSum = function(nums, target) {
let left = 0,
right = nums.length-1;
while(left < right) {
let sum = nums[left] + nums[right];
if(sum === target) {
return [left, right]
}
if(sum > target) {
right--;
}
if(sum < target) {
left++
}
}
return []
};
三数求和
给你一个包含 n 个整数的数组 nums，判断 nums 中是否存在三个元素 a，b，c ，使得 a + b + c = 0 ？请你找出所有满足条件且不重复的三元组。
示例：
给定数组 nums = [-1, 0, 1, 2, -1, -4]，
满足要求的三元组集合为： [ [-1, 0, 1], [-1, -1, 2] ]
老套路，求和问题转化为求差问题。先固定一个值，再在剩下的元素中找到是否存在两个元素相加后与固定值的和为0。
这道题的解题思路可以看做上面那道题对撞指针解法的延伸：遍历数组，设定数组中遍历到的元素为固定元素，左指针设定在该元素后一个元素的位置上，右指针设定在数组尾部。三数相加如果大于0，右指针往左走；如果小于0，左指针往右走；等于0，则输出结果。
同时不要忘了双指针解法的一个重要前提，必须是有序数组
const threeSum = function(nums, target=0) {
// 排序
nums.sort((a,b) => a - b);
let len = nums.length,
res = []; // 结果数组
for(let i=0; i<len; i++) {
if(nums[i] > target) break
// 题干要求不重复
// 固定元素去重
if(i>0 && nums[i] === nums[i-1]) {
continue
}
let left = i+1,
right = len-1;
while(left < right) {
const sum = nums[i] + nums[left] + nums[right];
if(sum === target) {
res.push([nums[i], nums[left], nums[right]]);
// 左指针去重
while(left<right && nums[left] === nums[left+1]) {
left++;
}
// 右指针去重
while(left<right && nums[right] === nums[right-1]) {
right--;
}
left++;
right--;
} else if(sum < target) {
left++;
} else {
right--;
}
}
}
return res
}
合并两个有序数组
给你两个有序整数数组 nums1 和 nums2，请你将 nums2 合并到 nums1 中，使 nums1 成为一个有序数组。
说明:
初始化 nums1 和 nums2 的元素数量分别为 m 和 n 。 你可以假设 nums1 有足够的空间（空间大小大于或等于 m + n）来保存 nums2 中的元素。
示例：
输入:
nums1 = [1,2,3,0,0,0], m = 3
nums2 = [2,5,6], n = 3
输出: [1,2,2,3,5,6]
法1：JS合并数组再排序
对于熟悉JS数组操作的各位来说，一看到这道题第一想法想必是先合并数组，再排序。而题干中 nums1 有预留空间，所以应该使用 splice 操作将 nums2 插入到 nums1 中，具体实现如下：
const merge = function(nums1, m, nums2, n) {
nums1.splice(m, n, ...nums2); // nums2 插入到 nums1 中
let sortNums = nums1.sort((a, b) => a - b); // 排序
return sortNums.filter(i => i !== 0); // 预留空间 >= m+n，排序后需要过滤 0
}
法2：双指针
然而，这道题的标准解法（也就是面试官最想要看到的解法），其实是利用双指针来解决。
思路：
- 在两个数组的尾部各自设置一个指针
- 对比两个数组指针处元素大小，把较大的元素填充至容器数组nums1 尾部。从后往前填充元素的原因是：容器数组nums1头部是有元素的，而尾部是无元素的，也就是可以给我们填坑的
- 由于nums1和nums2有效元素长度不一定相等，所以当nums1遍历完毕时，如果nums2还有元素剩余，那么应该把剩余的nums2元素填充至nums1头部
- 反之，nums2遍历完毕，nums1还有元素剩余，则无需处理。因为nums1本身就是我们要得到的结果数组
const merge = function(nums1, m, nums2, n) {
let i = m-1,
j = n-2,
k = m + n -1; // k 表示容器数组nums1尾部索引
// 循环边界为其中一个数组遍历完毕
while(i>=0 && j>=0) {
// 向容器数组nums1尾部填充较大元素
if(nums1[i] >= nums2[j]) {
nums1[k] = nums1[i];
i--;
k--;
} else {
nums1[k] = nums2[j];
j--;
k--;
}
}
// 如果nums2还有元素剩余
while(j>=0) {
nums1[k] = nums2[j];
j--;
k--;
}
}
数组展开
实现一个数组的展开，即多维数组变为一维数组
输入：[1,[2,[3,4,2],2],5,[6]],
输出：[1,2,3,4,2,2,5,6]
相信这道题很多人都接触过，实现的方法也有很多，比如利用ES2019里面数组的新api —— flat
法1： Array.prototype.flat
let arr = [1,[2,[3,4,2],2],5,[6]];
console.log(arr.flat(Infinity)); // [1,2,3,4,2,2,5,6]
而如果要自己实现一个flat应该怎么做？如果你的脑海中已经形成了算法的思维，那么应该很快就会想到：利用递归实现。（这应该也是面试官更想看到的答案）
法2：递归
function flatten(arr){
var array = [];
arr.forEach(ele => {
if(Array.isArray(ele)){
// 如果元素为数组，递归
array.push(...flatten(ele));
} else {
array.push(ele);
}
})
return array;
}
写在最后
本文只是简单总结了数组与二维数组，以及一些比较常见的数组相关的算法题及其解题方法与思路。
修言老师在数组篇章有句话说的好：在 JavaScript 数据结构中，数组几乎是“基石”一般的存在。 事实上而关于数组在前端算法中的使用远远不止这些。比如前文提及过的栈和队列，到字符串相关的一些特殊操作，再到常见的排序查找算法，都是需要基于数组来实现的。这些我会在后续学习过程中一一进行总结。
