数据结构与算法-前端

已于 2022-02-20 17:17:27 修改
阅读量770 收藏
点赞数
分类专栏： 前端 算法 文章标签： 算法 数据结构 前端
于 2022-01-28 17:59:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41892205/article/details/122732772
版权

1. 时间空间复杂度

  1. 时间复杂度
  • 用大O表示，如O(1)、O(n)…
  • 定性描述算法的运行时间 在这里插入图片描述
  1. 空间复杂度
    运行过程中临时占用存储空间大小的量度

2. 栈：后进先出的结构 stack

push、pop
在这里插入图片描述

  • 有效的括号： https://leetcode-cn.com/problems/valid-parentheses
var isValid = function (s) {
    if (s.length % 2 === 1) { return false } // 奇数个
    const stack = []
    const map = new Map()
    map.set('{', '}')
    map.set('(', ')')
    map.set('[', ']')
    for (let i = 0; i < s.length; i++) {
        const item = s[i]
        if (map.has(item)) {
            stack.push(item)
        } else {
            const p = stack[stack.length - 1]
            if (map.get(p) === item) {
                stack.pop() // 匹配上的就剔除了
            } else {
                return false
            }
        }
    }
	//    如果最后栈为空，那么它是有效的括号
    return stack.length === 0 // 都是单边的情况
};

3. 队列：先进先出的结构 queue

push、shift

  • 写一个 RecentCounter 类来计算特定时间范围内最近的请求: https://leetcode-cn.com/problems/number-of-recent-calls
var RecentCounter = function () {
    this.q = []
};

/** 
 * @param {number} t
 * @return {number}
 */
RecentCounter.prototype.ping = function (t) {
    this.q.push(t)
    while (this.q[0] < t - 3000) {
        this.q.shift()
    }
    return this.q.length
};

4. 链表 link

元素存储不连续，用next指针连接。
237. 删除链表中的节点
206. 反转链表
2. 两数相加
83. 删除排序链表中的重复元素
141. 环形链表

实现一个instanceof查找实例是否在原型链上：

// params：A: 实例； B：构造函数
const instanceOf = (A，B) => {
  let p = A
  while (p) {
    // 原型链上的实例是否指向构造函数
    if (p === B.prototype) {
      return true
    }
    p = p.__proto__ // 沿着原型链查找
  }
  return false
}

5. 集合 Set

无序且唯一的数据结构。

  • 两个数组的交集：https://leetcode-cn.com/problems/intersection-of-two-arrays
/**
 * @param {number[]} nums1
 * @param {number[]} nums2
 * @return {number[]}
 * 时间复杂度：O(m * n)；空间复杂度：O(m)。m为nums1的长度
 */
var intersection = function (nums1, nums2) {
	// 交集：用集合对num1去重；筛选出num2也包含的值。
    return [...new Set(nums1)].filter(item => nums2.includes(item))
};

// 集合的一些操作方法
const s = new Set();
s.add(1); // 添加
s.has(1); // 值是否存在
s.delete(1); // 删除

6. 字典 Map

349. 两个数组的交集
20. 有效的括号
1. 两数之和
3. 无重复字符的最长子串
76. 最小覆盖子串
存储唯一值的数据结构。

const m = new Map()
m.set("a",1) // 增
m.get("a") // 查
s.has("a"); // 值是否存在
m.delete("a") // 删

两数之和：https://leetcode-cn.com/problems/two-sum/

/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number[]}
 * 时间复杂度：O(n），空间复杂度：O(n)
 */
var twoSum = function (nums, target) {
    const map = new Map()
    for (let i = 0; i < nums.length; i++) {
        const n = nums[i]
        const n1 = target - n
        if (map.has(n1)) {
            return [map.get(n1), i]
        } else {
            map.set(n, i)
        }
    }
};

无重复字符的最长子串: https://leetcode-cn.com/problems/longest-substring-without-repeating-characters/

/**
 * @param {string} s
 * @return {number}
 * 时间复杂度 O(n) 空间复杂度O(m) m为最长无重复字符
 * 双指针移动窗口确定字符串
 */
var lengthOfLongestSubstring = function (s) {
    const map = new Map()
    let l = 0 // 左指针
    let res = 0 // 最大值
    for (let r = 0; r < s.length; r++) { // 右指针移动
        //  当前值 需要在滑动窗口中 
        if (map.has(s[r]) && map.get(s[r]) >= l) {
            // 有值，说明重复了需要移动左指针到新的字符
            l = map.get(s[r]) + 1
        }
        res = Math.max(res, r - l + 1) // 最大值为当前窗口值，或者之前的最大值
        map.set(s[r], r) // 存储当前字符的下标
    }
    return res
};

7. 树 tree

分层数据结构。


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(item => dfs(item)); // 对children逐个递归
}

dfs(tree) // a b d e c f g
  • 广度优先遍历：先访问离根节点最近的节点。
const bfs = (root) => {
  const q = [root] // 队列
  while (q.length > 0) {
    const n = q.shift() // 出队
    console.log(n.val); // 访问
    n.children.forEach((item) => { // 对children推到队列中
      q.push(item)
    })
  }
}

bfs(tree) // a b c d e f g

二叉树：树中每个节点最多只能有两个子节点。

/**
 * @param {TreeNode} root
 * @return {number}
 * 时间复杂度 O(n)，空间复杂度 O(log n) 到 O(n)
 */
var maxDepth = function (root) {
    let res = 0; // 记录最大深度
    const dfs = (n, l) => {
        // l: 深度层级
        if (!n) return
        // console.log(n.val, l)
        if (!n.left && !n.right) { // 没有左节点跟右节点就是最深的节点
            res = Math.max(res, l) // 最大深度
        }
        dfs(n.left, l + 1)
        dfs(n.right, l + 1)
    }
    dfs(root, 1)
    return res
};

111. 二叉树的最小深度: 广度优先遍历

/**
 * @param {TreeNode} root
 * @return {number}
 * 时间复杂度 O(n) 空间复杂度 O(n)
 */
var minDepth = function (root) {
    if (!root) return 0
    const q = [[root, 1]]
    // 广度优先遍历，并记录节点层级
    while (q.length) {
        const [n, l] = q.shift()
        // console.log(n.val, l)
        if (!n.left && !n.right) {
            return l
        }
        if (n.left) q.push([n.left, l + 1])
        if (n.right) q.push([n.right, l + 1])
    }

    // 遇到叶子节点，返回节点层级，停止遍历

};

102. 二叉树的层序遍历：广度优先遍历

/**
 * @param {TreeNode} root
 * @return {number[][]}
 * 时间复杂度O(n) 空间复杂度O(n)
 */
var levelOrder = function (root) {
    if (!root) return []
    const q = [root]
    const res = []
    while (q.length) {
        let len = q.length
        res.push([])
        while (len--) {
            const n = q.shift()
            console.log(n.val)
            res[res.length - 1].push(n.val)  // 队列中都是同一个层级的
            if (n.left) q.push(n.left)
            if (n.right) q.push(n.right)
        }

    }
    return res
};

94. 二叉树中序遍历

/**
 * @param {TreeNode} root
 * @return {number[]}
 * 中序遍历：左 -> 根 -> 右
 */
//  递归
// var inorderTraversal = function(root) {
//     const res = []
//     const rec = (n)=>{
//         if(!n) return 
//         rec(n.left)
//         res.push(n.val)
//         rec(n.right)
//     }
//     rec(root)
//     return res
// };
// 非递归：栈实现; 时间复杂度、空间复杂度都是O(n)
var inorderTraversal = function (root) {
    const res = []
    const stack = []
    let p = root
    while (stack.length || p) {
        // 先把左节点都入栈
        while (p) {
            stack.push(p)
            p = p.left
        }

        const n = stack.pop()
        res.push(n.val)
        p = n.right
    }
    return res
};

遍历JSON的所有字典值

const json = {
  a: { b: { c: 1 } },
  d: [1, 2]
}

const bfs = (n, path) => {
  console.log(n, path); // 节点值，路径
  Object.keys(n).forEach((item) => {
    bfs(n[item], path.concat(item))
  })
}

bfs(json, [])

8. 图 graph

图：网络结构的抽象模型；可以表示任何二元关系，比如道路、航班…

数据：

const graph = {
    0: [1, 2],
    1: [2],
    2: [0, 3],
    3: [3]
}
  1. 深度优先遍历：
// 深度优先遍历
const visited = new Set()
const dfs = (n)=>{
    console.log(n)
    visited.add(n)
    graph[n].forEach(c => {
        if (!visited.has(c)) { // 需要遍历不是重复的
            dfs(c)
        }
    });
}

dfs(2) // 2 0 1 3
  1. 广度优先遍历：
// 广度优先遍历
const visited = new Set()
visited.add(2)
const q = [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) // 防止队列中出现重复的元素
        }
    });
}
// 2 0 3 1

9. 堆 heap

堆是一种特殊的完全二叉树
特点： 所有节点都大于等于（最大堆）或小于等于（最小堆）它的子节点。
js中： 用数组表示。左侧子节点位置：2index + 1，右侧：2index+2，父节点位置（index-1）/ 2。
应用： 快速找出最大值、最小值。

10. 排序和搜索

排序算法动图演示

  1. 排序
  • 冒泡排序：比较所有相邻元素，如果第一个比第二个大，则交换他们。
    时间复杂度：O(n^2)
const arr = [5, 4, 3, 2, 1]
for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - 1 - i; j++) {
        // 从小到大排序
        if (arr[j] > arr[j + 1]) {
            const temp = arr[j];
            arr[j] = arr[j + 1]
            arr[j + 1] = temp
        }
    }
}
console.log(arr); // [1, 2, 3, 4, 5]
  • 选择排序
    找到数组中的最小值，选中它并将其放在第一位；第二小值，放第二位。
// 选择排序
const arr = [5, 4, 3, 2, 1]
for (let i = 0; i < arr.length - 1; i++) {
    let indexMin = i
    for (let j = i; j < arr.length; j++) {
        if (arr[j] < arr[indexMin]) {
            indexMin = i
        }
    }
    if (indexMin !== i) {
        const temp = arr[i]
        arr[i] = arr[indexMin]
        arr[indexMin] = temp
    }
}
console.log(arr); // [1, 2, 3, 4, 5]

  • 插入排序

  • 归并排序

  • 快速排序

  1. 搜索

  • 顺序搜索

  • 二分搜索

七元八角oooo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js数组去重(看完就懂了)
HuangZeJunXXX的博客
09-12 697
一、利用ES6 Set去重（ES6中最常用） function unique (arr) { return Array.from(new Set(arr)) } var arr = [1,1,‘true’,‘true’,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,‘NaN’, 0, 0, ‘a’, ‘a...
前端面试数据结构与算法类.docx
08-31
在前端面试中，数据结构与算法是非常重要的知识点。了解数据结构和算法的基本概念、特性和设计目标，对于解决问题和编写高效率的代码非常重要。同时，掌握常用的数据结构和算法，如数组、链表、栈、队列等，也是前端...
剑指刷题笔记
suuuuuki98的博客
05-24 218
剑指 Offer 03. 数组中重复的数字 /** * @param {number[]} nums * @return {number} */ var findRepeatNumber = function(nums) { //对象属性的方法 // let mapList = {} // for(let i = 0;i<nums.length;i++){ // if(!mapList.hasOwnProperty(nums[i])){ //.
javascript基础小妙招
weixin_44523852的博客
08-05 172
将 indexOf() 与 for 循环一起使用，此循环可以返回第一个找到的索引或较新的 includes() 从数组中返回布尔值 true/false 以找出/删除重复项。我们经常需要通过创建计数器对象或映射来解决问题，此对象或映射将变量作为键进行跟踪，并将其频率/出现次数作为值进行跟踪。适合对象，可选的链接?用一些内置的方法，比如.toPrecision()或.toFixed()来实现许多帮助功能。“”, 0，undefined，null，false，''可以很容易地通过以下方法省略。
JS使用New map()数组去重
DDD4V的博客
07-06 1486
pointNoRepeat(arr) { const map = new Map() const result = [] for (let i = 0; i < arr.xxx; i++) { if (map.has(arr[i].xxx)) { map.set(arr[i].xxx, true) } else { map.set(arr[i].xxx, false) r...
数组遍历的方法
weixin_48181168的博客
09-07 1449
1. for 循环 let arr = [1, 2, 3] for(let i = 0; i < arr.length; i++){ console.log(arr[i]) } 2. forEach 方法 const arr1 = [1, 2, 3, 4, 5]; //声明数组 arr1.forEach(function(item) { console.log(item) //item为每一项，不是每一项的索引（切记） }) //使用箭头函数 arr1.forEa
前端面试 --数据结构与算法篇
weixin_47964837的博客
05-01 1427
数据结构算法
学习JavaScript 数据结构与算法
我是一只蘑菇17的博客
11-10 2375
学习链接：https://github.com/XPoet/js-data-structures-and-algorithms JavaScript 数据结构与算法 1.数据结构(data structure) 数据结构是数据对象，以及存在于该对象的实例和组成实例的数据元素之间的各种联系 ​ 是计算机中存储、组织数据的方式。通常情况下，精心选择的数据结构可以带来最优效率的算法 2.解决问题方法的效率，根据数据的组织方式有关 3.常见的数据结构：数组，栈，链表，图，散列表，队
前端工程师应该了解的数据结构和算法
weixin_45505615的博客
06-21 992
数据结构 前端 算法
Unity 3D 面试 数据结构与算法简述
喝口我的爽肤水的博客
02-11 3227
数据结构与算法简述一、线性表二、栈(Stack)和队列(Queue) 一、线性表 定义：一个线性表是n个具有相同特性的数据元素的有限序列，除了第一个和最后一个数据元素之外，其它数据元素都是首尾相接的（大部分是这样子）。线性表的实现有4种，顺序表、单链表、双向链表和循环链表。 线性表的接口定义： interface IListDS<T> { int GetLength();//求长度 void Clear();//清空操作 bool isEmpty()
数据结构与算法汇总.docx
02-08
"数据结构与算法汇总" 本篇文章将对数据结构和算法进行综合性总结，涵盖了常见的数据结构、算法思想、图算法、字符串算法、排序算法、动态规划、数论问题、排列组合等方面。 数据结构 数据结构是计算机科学中的一...
golang实现的数据结构与算法
07-17
golang实现的数据结构与算法
第2章 前端1 ：数据结构和算法上
03-13
在前端开发领域，数据结构和算法是至关重要的基础，它们是解决问题和优化代码效率的关键工具。本章将探讨数据结构和算法在前端开发中的应用，为大厂面试做准备。 一、数据结构 数据结构是组织和管理数据的方式，它...
javascript数据结构与算法实现合集.zip
最新发布
01-04
JavaScript数据结构与算法实现合集是一系列用于深入理解编程基础的资源集合，主要关注于如何在JavaScript中构建和操作各种数据结构以及应用不同算法。这个压缩包中的"DataStructuresAndAlgorithms-main"目录可能包含...
react 输入框 回车事件切换
七元八元
12-09 4382
在web项目中，多个输入框时，按tab 键是能够进行下一个切换聚焦的，回车也能够加上监听事件，方便用户处理多个输入的事件。 js 处理input 监听事件function changeEnter(inputs) { const init = () => { for (let i = 0; i < inputs.length; i++) { inputs[i].addEventListener('keydown', focus(i), false); // 每个input.
为什么要用typeScript
七元八元
05-29 2271
typeScript 冲冲冲1. ts 能带来什么好处？ 1. ts 能带来什么好处？ 静态类型能够在开发的时候发现潜在的问题 定义了函数，但是忘记传递参数 2. 编写时更友好的提示 3. 更好的可读性
workspace、使用本地包以及使用dumi自定义组件
七元八元
11-12 1842
workspaces workspaces 文档 创建文件： 根目录下的package.json文件中，workspaces 配置对应的子项目路径。 使用： 在根目录下执行yarn add cross-env 操作，就能够在 “workspace-a”、 "workspace-b"子项目中直接使用cross-env插件了（子项目不需要安装插件，根目录在安装的时候会生成node_modules的bin文件）。 使用本地包 ...
react-native中的scrollview的使用情况
七元八元
06-13 1293
啊 啊 啊 啊 啊 啊
微前端的一些实现方法
七元八元
12-16 1046
SOLID原则 单一功能、开闭原则、里氏替换、接口隔离以及依赖反转原则
JS数据结构与算法.pdf
11-01
"《JS数据结构与算法.pdf》是一本深度讲解JavaScript编程中数据结构与算法的专业书籍，由巴西作者Loiane Groner撰写，中文版由孙晓博、邓钢、吴双、陈迪和袁源翻译。该书旨在为前端Web开发人员以及所有对JavaScript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值