前端算法

最新推荐文章于 2024-08-27 10:39:36 发布
最新推荐文章于 2024-08-27 10:39:36 发布
阅读量171 收藏 1
点赞数
文章标签： 数据结构 算法 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QueRly/article/details/108166662
版权

数据结构

栈

  • 后进先出
  • Javascript 中可以利用 Array 数组实现栈结构
class Stack {
  constructor() {
    this.stack = []
  }

 // 入栈
  push(item) {
    this.stack.push(item)
  }

 // 出栈
  pop() {
    if (this.stack.length) return this.stack.pop()
    throw new Error('stack is empty')
  }

 // 获取栈顶元素
  peek() {
    if (this.stack.length) return this.stack[this.stack.length - 1]
    throw new Error('stack is empty')
  }

  isEmpty() {
    return this.stack.length === 0
  }
  
  size() {
  	return this.stack.length
  }
}

队列

  • 先进先出
  • Javascript 中可以利用 Array 数组实现队列结构
class Queue {
  constructor() {
    this.queue = []
  }
  
  // 入队
  push(item) {
    this.queue.push(item)
  }
  
  // 出队
  shift() {
  	if (this.queue.length) return this.queue.shift()
    throw new Error('queue is empty')
  }
  
  // 获取队首元素
  peek() {
  	if (this.queue.length) return this.queue[0]
    throw new Error('queue is empty')
  }
  
  isEmpty() {
    return this.queue.length === 0
  }
  
  size() {
  	return this.queue.length
  }
}

链表

  • 元素存储不连续，用 next 指针连在一起
  • Javascript 中可以利用 Object 或 Function 实现单个节点，最终组成链表
链表与数组的对比
  • 数组：增删非首尾元素时需要移动元素
  • 链表：增删非首尾元素，只需要更改 next 的指向，不需要移动元素
const node1 = { val: 'node1' }
const node2 = { val: 'node2' }
const node3 = { val: 'node3' }

node1.next = node2
node2.next = node3

function ListNode(val) {
	this.val = val
	this.next = null
}

const node1 = new ListNode(1)
const node2 = new ListNode(2)
node1.next = node2

集合

  • 一种无序且唯一的数据结构
  • Javascript 中可以利用 ES6 中的 Set 实现集合
const mySet = new Set()

// 增
mySet.add(1)
mySet.add('2')
const obj = { a: 1, b: 2 }
mySet.add(obj)

// 删
mySet.delete('2')

// 查
const flag = mySet.has(obj)  // true

// 遍历
for(let item of mySet) console.log(item)
for(let item of mySet.keys()) console.log(item)
for(let item of mySet.values()) console.log(item)
for(let [key, value] of mySet.entries()) console.log(key, value)

字典

  • 一种存储唯一值的数据结构，但是是以键值对的形式来存储
  • Javascript 中可以利用 ES6 中的 Map 实现字典
const map = new Map()

// 增
map.set('a', 1)
map.set('b', 2)

// 改
map.set('b', 22)

// 删除
map.delete('a')
map.clear()

// 查
console.log(map.get('a'))

树

  • 一种分层数据的抽象模型
  • Javascript 中可以利用 Object 实现树
const tree = {
    val: 'a',
    children: [
        {
            val: 'b',
            children: [
                {
                    val: 'd',
                    children: [],
                },
                {
                    val: 'e',
                    children: [],
                }
            ],
        },
        {
            val: 'c',
            children: [
                {
                    val: 'f',
                    children: [],
                },
                {
                    val: 'g',
                    children: [],
                }
            ],
        }
    ],
};
深度优先遍历
const dfs = (root) => {
    console.log(root.val)
    root.children.forEach(dfs)
}
广度优先遍历
const bfs = (root) => {
    const q = [root]
    while (q.length > 0) {
        const n = q.shift()
        console.log(n.val)
        n.children.forEach(child => {
            q.push(child)
        })
    }
}

二叉树

  • 树中每个节点最多只能有两个子节点
const binaryTree = {
    val: 1,
    left: {
        val: 2,
        left: {
            val: 4,
            left: null,
            right: null,
        },
        right: {
            val: 5,
            left: null,
            right: null,
        },
    },
    right: {
        val: 3,
        left: {
            val: 6,
            left: null,
            right: null,
        },
        right: {
            val: 7,
            left: null,
            right: null,
        },
    },
}
先序遍历
  • 访问根节点
  • 先对根节点的左子树进行先序遍历
  • 再对根节点的右子树进行先序遍历
const preorder = (root) => {
    if (!root) return
    console.log(root.val)
    preorder(root.left)
    preorder(root.right)
}

const preorder = (root) => {
    if (!root) return
    const stack = [root]
    while (stack.length) {
    	const n = stack.pop()
        console.log(n.val)
        if (n.right) stack.push(n.right)
        if (n.left) stack.push(n.left)
    }
}
中序遍历
  • 先对根节点的左子树进行中序遍历
  • 再访问根节点
  • 最后对根节点的右子树进行中序遍历
const inorder = (root) => {
    if (!root) return
    inorder(root.left)
    console.log(root.val)
    inorder(root.right)
}

const inorder = (root) => {
    if (!root) return
    const stack = []
    let p = root
    while (stack.length || p) {
    	while (p) {
        	stack.push(p)
            p = p.left
        }
        const n = stack.pop()
        console.log(n.val)
        p = n.right
    }
}
后序遍历
  • 先对根节点的左子树进行后序遍历
  • 再对根节点的右子树进行后序遍历
  • 最后访问根节点
const postorder = (root) => {
    if (!root) return
    postorder(root.left)
    postorder(root.right)
    console.log(root.val)
}

const postorder = (root) => {
    if (!root) return
    const outputStack = []
    const stack = [root]
    while (stack.length) {
    	const n = stack.pop()
        outputStack.push(n)
        if (n.left) stack.push(n.left)
        if (n.right) stack.push(n.right)
    }
    while(outputStack.length){
    	const n = outputStack.pop()
        console.log(n.val)
    }
}

图

  • 图是网络结构的抽象模型，是一组由边连接的节点
  • 图的表示法：邻接矩阵、邻接表、关联矩阵
// 邻接表
const graph = {
    0: [1, 2],
    1: [2],
    2: [0, 3],
    3: [3]
}
module.exports = graph
深度优先遍历
  • 先访问根节点
  • 对根节点的没访问过的相邻节点逐个进行深度优先遍历
const graph = require('./graph')

const visited = new Set()
const dfs = (n) => {
    console.log(n)
    visited.add(n)
    graph[n].forEach(c => {
        if(!visited.has(c)){
            dfs(c)
        }
    })
}
广度优先遍历
  • 新建一个队列，把根节点入队
  • 把队头出队并访问
  • 把队头的没访问过的相邻节点入队
  • 重复第二、三步，直到队列为空
const graph = require('./graph')

const visited = new Set()
const q = [2] // 根节点入队
visited.add(2)
while (q.length) {
    const n = q.shift()
    console.log(n)
    graph[n].forEach(c => {
        if (!visited.has(c)) {
            q.push(c)
            visited.add(c)
        }
    })
}

堆

  • 一种特殊的完全二叉树
  • 所有的节点都大于等于或小于等于它的子节点。分别称为最大堆或最小堆
  • Javascript 中可以利用 Array 实现堆
规律
  • 假设当前节点下标为index
  • 左侧子节点的位置是2 * index + 1
  • 右侧子节点的位置是2 * index + 2
  • 父节点的位置是(index - 1) / 2
最小堆类
  • 插入
    • 将值插入堆的底部，即数组的尾部
    • 然后上移：将这个值和它的父节点进行交换，直到父节点小于等于这个插入的值
  • 删除堆顶
    • 用数组尾部元素替换堆顶
    • 然后下移：将新堆顶和它的子节点进行交换，直到子节点大于等于这个新堆顶
class MinHeap {
    constructor() {
        this.heap = []
    }
    
    // 交换两元素
    swap(item1, item2) {
        const temp = this.heap[item1]
        this.heap[item1] = this.heap[item2]
        this.heap[item2] = temp
    }
    
    // 获取父节点下标
    getParentIndex(i) {
        return (i - 1) >> 1
        // return Math.floor((i - 1) / 2)
    }
    
    // 获取左子节点下标
    getLeftIndex(i) {
        return i * 2 + 1
    }
    
    // 获取右子节点下标
    getRightIndex(i) {
        return i * 2 + 2
    }
    
    // 上移
    shiftUp(index) {
        if (index == 0) return
        const parentIndex = this.getParentIndex(index)
        if (this.heap[parentIndex] > this.heap[index]) {
            this.swap(parentIndex, index)
            this.shiftUp(parentIndex)
        }
    }
    
    // 下移
    shiftDown(index) {
        const leftIndex = this.getLeftIndex(index)
        const rightIndex = this.getRightIndex(index)
        if (this.heap[leftIndex] < this.heap[index]) {
            this.swap(leftIndex, index)
            this.shiftDown(leftIndex)
        }
        if (this.heap[rightIndex] < this.heap[index]) {
            this.swap(rightIndex, index)
            this.shiftDown(rightIndex)
        }
    }
    
    // 插入
    insert(item) {
        this.heap.push(item)
        this.shiftUp(this.heap.length - 1)
    }
    
    // 删除
    pop() {
        this.heap[0] = this.heap.pop()
        this.shiftDown(0)
    }
    
    // 获取堆顶（最小元素）
    peek() {
        return this.heap[0]
    }
    
    size() {
        return this.heap.length
    }
}

搜索与排序

冒泡排序

  • 比较所有相邻元素，如果第一个比第二个大，则交换它们
  • 每轮结束后，可以保证参与排序的最后一个数是最大的
  • 执行 n-1轮，就可以完成排序
const bubbleSort = (arr) => {
	const res = [...arr]
    for (let i = 0; i < res.length - 1; i += 1) {
        for (let j = 0; j < res.length - 1 - i; j += 1) {
            if (res[j] > res[j + 1]) {
                const temp = res[j]
                res[j] = res[j + 1]
                res[j + 1] = temp
            }
        }
    }
    return res
}

选择排序

  • 找到数组中的最小值，选中它并将其放置在第一位
  • 接着找到第二小的值，选中它并将其放置在第二位
  • 以此类推，执行 n - 1 轮
const selectionSort = (arr) => {
	const res = [...arr]
    for (let i = 0; i < res.length - 1; i += 1) {
        let indexMin = i
        for (let j = i; j < res.length; j += 1) {
            if (res[j] < res[indexMin]) {
                indexMin = j
            }
        }
        if (indexMin !== i) {
            const temp = res[i]
            res[i] = res[indexMin]
            res[indexMin] = temp
        }
    }
    return res
}

归并排序

  • 分：把数组分成两半，再递归地对子数组进行“分”操作，直到分成一个个单独的数
  • 合：把两个数合并为有序数组，再对有序数组进行合并，直到全部子数组合并为一个完整数组
const mergeSort = (arr) => {
    const rec = (arr) => {
        if (arr.length === 1) return arr
        const mid = Math.floor(arr.length / 2)
        const left = arr.slice(0, mid)
        const right = arr.slice(mid, arr.length)
        const orderLeft = rec(left)
        const orderRight = rec(right)
        const res = []
        while (orderLeft.length || orderRight.length) {
            if (orderLeft.length && orderRight.length) {
                res.push(orderLeft[0] < orderRight[0] ? orderLeft.shift() : orderRight.shift())
            } else if (orderLeft.length) {
                res.push(orderLeft.shift())
            } else if (orderRight.length) {
                res.push(orderRight.shift())
            }
        }
        return res
    }
    return rec(arr)
}

快速排序

  • 分区：从数组中任意选择一个“基准”，所有比基准小的元素放在基准前面，比基准大的元素放在后面
  • 递归：递归地对基准前后的子数组进行分区
const quickSort = (arr) => {
    const rec = (arr) => {
        if (arr.length === 1) return arr
        const left = []
        const right = []
        const mid = arr[0]
        for (let i = 1; i < arr.length; i += 1) {
            if (arr[i] < mid) {
                left.push(arr[i])
            } else {
                right.push(arr[i])
            }
        }
        return [...rec(left), mid, ...rec(right)]
    }
    return rec(arr)
}

顺序搜索

  • 遍历数组，找到跟目标值相等的元素，就返回它的下标
  • 遍历结束后，如果没有搜索到目标值，就返回 -1
Array.prototype.sequentialSearch = function (item) {
    for (let i = 0; i < this.length; i += 1) {
        if (this[i] === item) return i
    }
    return -1
}

const res = [1, 2, 3, 4, 5].sequentialSearch(0)

二分搜索

  • 前提：数组是有序数组
  • 从数组的中间元素开始，如果中间元素正好是目标值，则搜索结束
  • 如果目标值大于或小于中间元素，则在大于或小于中间元素的那一半数组中搜索
Array.prototype.binarySearch = function (item) {
    let low = 0
    let high = this.length - 1
    while (low <= high) {
        const mid = Math.floor((low + high) / 2)
        const element = this[mid]
        if (element < item) {
            low = mid + 1
        } else if (element > item) {
            high = mid - 1
        } else {
            return mid
        }
    }
    return -1
}

const res = [1, 2, 3, 4, 5].binarySearch(0)
立青FTK
关注
JavaScript前端算法.zip
06-12
JavaScript前端算法是Web开发中的重要组成部分，特别是在面试和日常开发中，掌握良好的算法能力能显著提升代码质量和效率。本压缩包包含了一系列与JavaScript算法相关的学习资料和代码示例，主要涉及了数据结构如...
前端常见算法
weixin_46061399的博客
06-14 1758
括冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序 搜索算法 二分查找、广度优先搜索、深度优先搜索 动态规划算法 贪心算法 字符串算法
前端常用算法
qq_42994986的博客
07-28 3420
1，时间复杂度 通常使用最差的时间复杂度来衡量一个算法的好坏。常数时间 O(1) 代表这个操作和数据量没关系，是一个固定时间的操作，比如说四则运算。对于一个算法来说，可能会计算出如下操作次数 aN + 1，N 代表数据量。那么该算法的时间复杂度就是 O(N)。因为我们在计算时间复杂度的时候，数据量通常是非常大的，这时候低阶项和常数项可以忽略不计。当然可能会出现两个算法都是 O(N) 的时间复杂度，那么对比两个算法的好坏就要通过对比低阶项和常数项了。 2，位运算 位运算在算法中很有用，速度可以比四则运算快很多
前端常用算法集合
最新发布
weixin_47588164的博客
08-27 946
假设在今日头条里面，有很多工作人员检查新闻是不是属于虚假新闻，所有新闻真实率到达了98%，工作人员在检验一个真实的新闻把它检验为一个虚假的新闻的概率为2%，而一个虚假的新闻被检验为真实的新闻的概率为5%. 那么，一个被检验为真实的新闻确实是真实的新闻的概率是多大?从[a, b]到[a, b, c]，结果其实是[a, b]的结果加上c元素，然后将[a, b]结果中的每一个元素和c进行组合，得到[a, b, ab, c, ac, bc, abc]，总数为3+1+3 = 7。这步做完后，最后的元素会是最大的数。
前端算法总结
weixin_43910086的博客
11-09 438
排序 冒泡排序 冒泡排序的基本思想是，对相邻的元素进行两两比较，顺序相反则进行交换，这样，每一趟会将最小或最大的元素“浮”到顶端， 最终达到完全有序。 代码实现： function bubbleSort(arr) { if (!Array.isArray(arr) || arr.length <= 1) return; let lastIndex = arr.length - 1; while (lastIndex > 0) { // 当最后一个交换的元素为第一个时，说
10大前端常用算法，最全指南
m0_60197163的博客
07-21 2402
一面 6道基本技术问题，居中、闭包、块级元素和行内元素等（答案在下方） 某个项目的页面布局方式，缓存的设计和优化方式（本地存储和协议相关的） ajax 的原生写法（创建 XHR 对象， open() ， setRequestHeader() ， send() ， onreadystatechange ） vue-router 的原理（ hash ， HTML5 新增的 pushState ） 二面 面试官：“你觉得你擅长CSS还是JS？” 我：“JS。” 面试官：“好，那我问你一道CS
前端算法-移除元素.js
10-10
前端面试
前端算法修炼
02-22
直进大厂的前端算法描述，
前端算法-有效的括号.js
10-10
前端面试
前端算法-两数之和.js
10-10
前端面试
前端需要掌握的基础算法
cpa0701的博客
10-23 3787
目录排序基本排序算法冒泡排序选择排序插入排序高级排序算法快速排序希尔排序时间复杂度总结是否稳定辅助记忆递归Deep Clone实战例题Q1：Array数组的flat方法实现Q2 实现简易版的co，自动执行generatorQ3. 爬楼梯问题Q4.二分查找二叉树和二叉查找树树的基本概念二叉查找树二叉树的遍历中序遍历的实现前序遍历后序遍历二叉树的查找 排序 基本排序算法 基本排序的基本思想非常类似，重排列时用的技术基本都是一组嵌套的for循环: 外循环遍历数组的每一项，内循环则用于比较元素。 冒泡排序 func
前端常用入门算法
sun_qqq的博客
12-27 1496
好像很适合原地调换数组的位置，一个下标移动的快，一个移动的慢。快的指针用来往前走，慢的用来停在目标数据上。移动到数组的末尾，同时保持非零元素的相对顺序。，编写一个函数将所有。
20个常见的前端算法题，你全都会吗？
web全栈开发的博客
10-27 6811
现在面试中，算法出现的频率越来越高了，大厂基本必考今天给大家带来20个常见的前端算法题，重要的地方已添加注释，如有不正确的地方，欢迎多多指正????1、两数之和题目： 给定一个数组nums和一个目标值target，在该数组中找出和为目标值的两个数输入： nums: [8, 2, 6, 5, 4, 1, 3] ； target:7输出： [2, 5]// 时间复杂度O(n)、 空间复杂度O(n) f...
前端面试——走楼梯问题
xt_123456的博客
08-14 630
问题描述：一个人爬楼梯，只可以一步走一层或一步走两层，共多少种走法？ 输入：楼梯总层数 输出：有几种走法 解： 这个问题，是一个递归问题。 1.楼梯总层数为1，有一种走法，一步走一层。 2.楼梯总层数为2，有两种走法： 1）一步走一层，走两步 2）一步走两层，走一步 3.楼梯总层数为n的走法有多少种呢？ 走到n层只有两种可能： 1）在第n-1层往上走1步（一步一层）到第n层 2）在第n-2层往上走1步（一步两层）到第n层 所以： 楼梯总层数为n的走法=楼梯总层数为n-1的走法+楼梯总层数为n-2的走法 类似
前端10大经典算法
lbking666666的专栏
06-20 1284
但基数排序的性能比桶排序要略差，每一次关键字的桶分配都需要O(n)的时间复杂度，而且分配之后得到新的关键字序列又需要O(n)的时间复杂度。它的工作原理：首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。桶排序最好情况下使用线性时间O(n)，桶排序的时间复杂度，取决与对各个桶之间数据进行排序的时间复杂度，因为其它部分的时间复杂度都为O(n)。很显然，桶划分的越小，各个桶之间的数据越少，排序所用的时间也会越少。
前端常用算法全解：特征梳理、复杂度比较、分类解读与示例展示
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
01-05 1669
算法可以理解为有基本运算及规定的运算顺序所构成的完整的解题步骤，或者看成按照要求设计好的有限的确切的计算序列，并且这样的步骤和序列可以解决一类问题。算法代表着用系统的方法描述解决问题的策略机制，它能够对一定规范的输入在有限时间内获得所要求的输出。如果一个算法有缺陷，或不适合于某个问题，执行这个算法将不会解决这个问题。不同的算法可能用不同的时间、空间或效率来完成同样的任务。一个算法的优劣可以用空间复杂度与时间复杂度来衡量。
前端面试常见算法
Better_Xing的博客
03-17 3549
前端面试常见算法 文章目录前端面试常见算法1.数组去重2.数组排序2.1冒泡排序2.2 插入排序2.3 快速排序2.4 堆排序2.5 桶排序2.6 归并排序3.二叉树的遍历3.1广度优先遍历3.2深度优先遍历4.数组扁平化5.斐波那契数列 1.数组去重 //数组去重 let arr = [1, 3, 7, 5, 4, 5, 2, 1, 3]; // 方法一:Set数据结构，它类似于数组，其成员的值都是唯一的 function unique(arr) { //..
前端算法解析：inMap文字避让技术
"本文主要介绍了前端算法中的文字避让技术，特别是在大数据可视化的场景下，如inMap库的应用。inMap是一个基于canvas的库，用于大数据的可视化，提供散点、围栏、热力、网格和聚合等多种展示方式。文章讨论了在地图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值