前端八股大全
观察者模式（Observer Pattern）和订阅-发布模式（Publish-Subscribe Pattern）都是常见的用于解耦组件之间通信的设计模式，它们有一些相似之处，但也有一些区别。1. 观察者模式（Observer Pattern）：定义：观察者模式定义了一种一对多的依赖关系，当被观察者（主题）的状态发生变化时，所有依赖于它的观察者都会收到通知并自动更新。角色：主题（Subject）负责管理所有观察者，并在状态变化时通知观察者；观察者（Observer）负责订阅主题的状态变化，并在接收到通知时执行相应的逻辑。场景：适用于一对多的场景，例如事件监听、GUI 组件的状态更新等。...
字符串仅由小写字母和 [] 组成，且字符串不会包含多余的空格。示例一: 'abc' --> {value: 'abc'}示例二：'[abc[bcd[def]]]' --> {value: 'abc', children: {value: 'bcd', children: {value: 'def'}}}const normalize = (str) => { var result = {} str.split(/[\[\]]/g).filter(Boolean).reduce((obj, item, index, a) => { o...
function indexOf(arr,target,start=0){ if(start<0) start+=arr.length; if(start>=arr.length) return -1; for(let i=start;i<arr.length;++i){ if(arr[i]===target) return i; } return -1; }
可以使用二分查找算法来查找有序数列中某个元素的最先出现位置和最后出现位置。以下是 JavaScript 实现：function findFirstOccurrence(nums, target) { let left = 0; let right = nums.length - 1; let firstOccurrence = -1; while (left <= right) { const mid = Math.floor((left + right) / 2); if (nums[mid] === targe...
function binaryToBase64(binary) { // 定义 Base64 字符集 const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; // 初始化 Base64 结果字符串 let base64 = ''; // 每次处理 3 个字节的二进制数据 for (let i = 0; i < binary.length; i += 3) { // 从当前位置开始取出 3 个字节的数...
class ListNode { constructor(val, next = null) { this.val = val; this.next = next; } } function reverseKGroup(head, k) { // 辅助函数：反转链表 const reverse = (start, end) => { let prev = null; let curr = start; while (curr !== end) { ...
在一个字符串数组中有红、黄、蓝三种颜色的球，且个数不相等、顺序不一致，请为该数组排序。使得排序后数组中球的顺序为:黄、红、蓝。例如：红蓝蓝黄红黄蓝红红黄红，排序后为：黄黄黄红红红红红蓝蓝蓝。/** * 根据order的顺序对数据排序 * @param arr 排序数组 * @param order 排序内容order */ function cunstomSort<T>(arr: Array<T>, order: Array<any>): Array<T> { return arr.sort((a, b) => order...
function rangeDay (day1, day2) { const result = [] const dayTimes = 24*60*60*1000 const startTime = day1.getTime() const range = day2.getTime() - startTime let total = 0 while (total <= range && range > 0) { result.push(new Date(startTime + total)...
function setInterval (handler,timeout,...args) { let isBrowser = typeof window !=='undefined' if(isBrowser && this!==window){ throw 'TypeError: Illegal invocation' } let timer = {} if(isBrowser){ // 浏览器上处理 timer = { value:-1, valueOf: function (){ ...
class Dialog { constructor(text) { this.lastX = 0; // 上一次鼠标拖动的水平位置 this.lastY = 0; // 上一次鼠标拖动的垂直位置 this.x; // 当前鼠标拖动的水平位置 this.y; // 当前鼠标拖动的垂直位置 this.text = text || ''; // 对话框文本内容，默认为空 this.isMoving = false; // 标记对话框是否正在被拖动 this.dialog; ...
有一堆扑克牌，将牌堆第一张放到桌子上，再将接下来的牌堆的第一张放到牌堆的牌底，如此往复；最后桌子上的牌顺序为： (牌底) 1,2,3,4,5,6,7,8,9,10,11,12,13 (牌顶)；问：原来那堆牌的顺序，用函数实现。代码function poke(arr) { let i = 1 let out = [] while (arr.length) { if (i % 2) { out.push(arr.shift()) } else { arr.push(arr.shift()) } i++ } retur...
function countDigitOne(n) { let count = 0; for (let i = 1; i <= n; i *= 10) { const divider = i * 10; const quotient = Math.floor(n / divider); const remainder = n % divider; count += quotient * i + Math.min(Math.max(remainder - i + 1, 0), i); } ...
'abcaakjbb' => {'a':2,'b':2} 'abbkejsbcccwqaa' => {'c':3}代码let str = 'abbkejsbcccwqaa' const arr = str.match(/(\w)\1*/g); const maxLen = Math.max(...arr.map(s => s.length)); let result = {} arr.map(s=>{ if(s.length===maxLen){ result[s[0]] = maxLen } }) console.log(resu...
class Node { constructor(data) { this.data = data; this.next = null; } } class LinkedList { constructor() { this.head = null; this.size = 0; } // 在链表尾部添加元素 append(data) { const newNode = new Node(data); if (!this.head) { ...
1. 如传入的数组元素为[123, "meili", "123", "mogu", 123]，则输出：[123, "meili", "123", "mogu"] 2. 如传入的数组元素为[123, [1, 2, 3], [1, "2", 3], [1, 2, 3], "meili"]，则输出：[123, [1, 2, 3], [1, "2", 3], "meili"] 3. 如传入的数组元素...
var entry = { 'a.b.c.dd': 'abcdd', 'a.d.xx': 'adxx', 'a.e': 'ae' } // 要求转换成如下对象 var output = { a: { b: { c: { dd: 'abcdd' } }, d: { xx: 'adxx' }, e: 'ae' } }代码：function unflattenObject(obj) { const result = {}; for (const key in obj...
var entry = { a: { b: { c: { dd: 'abcdd' } }, d: { xx: 'adxx' }, e: 'ae' } } // 要求转换成如下对象 var output = { 'a.b.c.dd': 'abcdd', 'a.d.xx': 'adxx', 'a.e': 'ae' }要将输入对象转换为指定格式的输出对象，可以使用递归函数来遍历输入对象的所有属性，并根据属性的层级构建输出对象的键。以下是实现这个功能的 JavaScript 代码：function flattenObject(obj, parentKey ...
可以编写一个函数来实现这个功能。首先，我们将输入的字符串解析为数字数组，并将其排序。然后，我们遍历数组，查找连续的数字序列，并将它们表示为范围。最后，我们将范围和单个数字组合成最终的字符串输出。以下是实现这个功能的 JavaScript 代码：function formatRange(input) { // 解析输入字符串为数字数组并排序 const numbers = input.split(',').map(Number).sort((a, b) => a - b); let result = ''; for (let i = 0; i <...
1. 使用 Fisher-Yates 洗牌算法：Fisher-Yates 算法不仅可以用来打乱数组顺序，还可以用来生成不重复的随机索引。具体步骤是：创建一个包含原数组长度范围内所有索引的数组。对这个索引数组使用 Fisher-Yates 算法进行洗牌。取洗牌后的数组的前几个索引作为随机索引。2. 使用 Set 数据结构：可以利用 Set 数据结构的特性来保证索引的唯一性。具体步骤是：创建一个空的 Set。循环生成随机索引，直到 Set 的大小达到预期数量。将生成的随机索引加入 Set 中。将 Set 转换为数组，即可得到不重复的随机索引数组。以下是这两种方法的示例实现：使用 Fisher...
url有三种情况https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=&local_province_id=33 https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800&local_province_id=33 https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800,70...
要实现时间过期功能，可以在存储数据时记录下数据的过期时间，并在获取数据时检查数据是否已经过期。以下是一个简单的实现示例：const localStorageWithExpiration = {}; // 设置带过期时间的数据 localStorageWithExpiration.setItem = function(key, value, expirationMinutes) { const currentTime = new Date().getTime(); const expirationTime = currentTime + expirationMinutes * 6...
实现一个简单的模拟 localStorage 的过程并不复杂，我们可以使用 JavaScript 中的对象来模拟键值对存储的功能。以下是一个简单的示例：// 创建一个对象来模拟 localStorage const localStorageMock = {}; // 实现 localStorage 的 setItem 方法 localStorageMock.setItem = function(key, value) { this[key] = value.toString(); }; // 实现 localStorage 的 getItem 方法 localStorageMoc...
function fn(num) { // 将整数转换为 7 进制表示的字符串 var d = (num).toString(7); // 在字符串末尾添加一个字符 '0'，然后解析为 7 进制的整数 return parseInt(`${d}0`, 7); } console.log(fn(123)); // 输出 861更多答案参考
function fun(num){ let num1 = num / 10; let num2 = num % 10; if(num1<1){ return num; }else{ num1 = Math.floor(num1) return `${num2}${fun(num1)}` } } var a = fun(12345) console.log(a) console.log(typeof a)
leetcode 链接要在时间复杂度为 O(log(m+n)) 的情况下找出两个有序数组的中位数，可以使用二分查找的方法。具体步骤如下：确定较短的数组为 nums1，较长的数组为 nums2。使用二分查找在较短数组 nums1 中选择一个分割点 i，使得满足以下条件：nums1[i] <= nums2[j+1]，其中 j = (m + n + 1) / 2 - i - 1。nums2[j] <= nums1[i+1]，其中 i = (m + n + 1) / 2 - j - 1。根据分割点 i 和 j，将数组划分为左右两部分，左边部分包含 nums1[0] 到 nums1[i...
const data = [ { id: 1, children: [ { id: 2, children: [ { id: 3 }, { id: 4 } ] }, { id: 5, children: [ { id: 6 }, { id: 7 } ] } ] } ];代码function dfsFn(list, value) { ...
使用正则替换let keyword='xxx'; let result = 'resultxxx'; let panter = new RegExp(keyword, 'g') result = result.replace(panter, '<b style="color: #2D7BFF">' + keyword + '</b>')
以下数据结构中，id 代表部门编号，name 是部门名称，parentId 是父部门编号，为 0 代表一级部门，现在要求实现一个 convert 方法，把原始 list 转换成树形结构，parentId 为多少就挂载在该 id 的属性 children 数组下，结构如下：// 原始 list 如下 let list =[ {id:1,name:'部门A',parentId:0}, {id:2,name:'部门B',parentId:0}, {id:3,name:'部门C',parentId:1}, {id:4,name:'部门D',parentId:1},...
var regx = /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/1. 协议部分（可选）： (https?|ftp|file):\/\/ 匹配 http、https、ftp 或 file 这几种协议，s? 表示 s 可以出现 0 次或 1 次，:\/\/ 匹配 :// 字符串。2. 域名部分： ([\da-z\.-]+)\.([a-z\.]{2,6}) 匹配域名，其中 [\da-z\.-]+ 匹配域名中的字母、数字、点和短横线，\. 匹配域名中的点，([a-z\.]{2,6}) 匹...
题目给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。你可以假设每个输入只对应一种答案，且同样的元素不能被重复利用。示例：给定 nums = [2, 7, 11, 15], target = 9 因为 nums[0] + nums[1] = 2 + 7 = 9 所以返回 [0, 1] 代码function twoSum(nums, target) { const map = {}; // 用于存储数字和它们的索引的映射 for (let i = 0; i < nums.length; i++) { const complement = target -...
add(1); // 1 add(1)(2); // 3 add(1)(2)(3)；// 6 add(1)(2, 3); // 6 add(1, 2)(3); // 6 add(1, 2, 3); // 6代码function add(){ let args = [...arguments]; let addfun = function(){ args.push(...arguments); return addfun; } addfun.toString = function(){ return ...
示例:输入: [0,1,0,3,12] 输出: [1,3,12,0,0] 说明:必须在原数组上操作，不能拷贝额外的数组。尽量减少操作次数。实现：function moveZero(arr) { let i = 0 let j = 0 while (j < arr.length) { if (arr[i] !== 0) { i++ } else if (arr[j] !== 0) { ;[arr[i], arr[j]] = [arr[j], arr[i]] i++ } j++ } }
var result = []; for (let i = 1; i <= 10000; i++) { let origin = '' + i; let reverse = origin.split('').reverse().join(''); if(origin === reverse) { result.push(i); } }
1.function rotate(arr, k) { const len = arr.length const step = k % len return arr.slice(-step).concat(arr.slice(0, len - step)) } // rotate([1, 2, 3, 4, 5, 6], 7) => [6, 1, 2, 3, 4, 5]2.function rotate(nums, k) { for(var i = 0;i<k;i++){ nums.unshift(nums.pop()) } ...
要求从长度为 n 的字符串 S 中，查找是否存在字符串 T，T 的长度是 m，若存在返回所在位置代码1. 使用 substrconst find = (S, T) => { if (S.length < T.length) return -1; for (let i = 0; i < S.length - T.length ; i++) { if (S.substr(i, T.length) === T) return i ; }; return -1; };2. 使用 indexOfconst find = (S,T) => S.in...
1.function processString (s) { var arr = s.split(''); var new_arr = arr.map((item) => { return item === item.toUpperCase() ? item.toLowerCase() : item.toUpperCase(); }); return new_arr.join(''); } console.log(processString('AbC'));2.const STEP = 'a'.charCodeAt() - 'A'.c...
题目随机生成一个长度为 10 的整数类型的数组，例如 [2, 10, 3, 4, 5, 11, 10, 11, 20]，将其按除以10的商排列成一个新数组，要求新数组形式如下，例如 [[2, 3, 4, 5], [10, 11], [20]]。代码// 得到一个两数之间的随机整数，包括两个数在内 function getRandomIntInclusive(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1...
原理轮播的原理就是通过translateY/translateX移动轮播容器+过渡达到轮播项上下左右轮播效果的，为了达到无缝循环效果，这里在轮播容器的末尾追加第一项内容，如：【“1”，“2”，“3”，“4”】这四项是我想轮播的内容，此时在容器末尾还追加了“1”，当轮播到“4”时，“4”与“1”之间的切换就达到了无缝效果，在切换到末尾的“1”时，等待过渡结束后取消过渡，立即切换到开头的“1”，这样就达到了将末尾切换到开始的循环.代码<template> <div style="height: 200px; overflow: hidden">...
function intersection(nums1, nums2) { // 使用 Set 去除重复元素，并且使查找元素更高效 let set1 = new Set(nums1); let set2 = new Set(nums2); // 创建一个空数组用于存储交集结果 let result = []; // 遍历一个集合中的每个元素，在另一个集合中查找是否存在相同元素 for (let num of set1) { if (set2.has(num)) { resu...
题目LazyMan('Tony'); // Hi I am Tony LazyMan('Tony').sleep(10).eat('lunch'); // Hi I am Tony // 等待了10秒... // I am eating lunch LazyMan('Tony').eat('lunch').sleep(10).eat('dinner'); // Hi I am Tony // I am eating lunch // 等待了10秒... // I am eating diner LazyMan('Tony').eat('lunch').eat('dinner').s...
如下：{1:222, 2:123, 5:888}，请把数据处理为如下结构：[222, 123, null, null, 888, null, null, null, null, null, null, null]。答案let obj = {1:222, 2:123, 5:888}; const result = Array.from({ length: 12 }).map((_, index) => obj[index + 1] || null); console.log(result)
基本实现function bubbleSort(arr) { const len = arr.length; for (let i = 0; i < len - 1; i++) { for (let j = 0; j < len - 1 - i; j++) { if (arr[j] > arr[j + 1]) { // 交换 arr[j] 和 arr[j + 1] 的位置 const temp = arr[j]; arr...
要实现一个通用的加法方法，可以考虑以下几点：处理不同精度的小数。处理科学计数法。处理整数和小数之间的加法。function add(a, b) { // 将数字转换为字符串，以便处理科学计数法 const strA = String(a); const strB = String(b); // 获取小数点的位置 const dotIndexA = strA.indexOf('.'); const dotIndexB = strB.indexOf('.'); // 计算小数部分的位数 const decimalPlaces...
function flatten(arr) { const result = []; // 存放展开后的元素 const stack = [...arr]; // 使用栈来存储待展开的元素 while (stack.length > 0) { const current = stack.pop(); // 出栈当前元素 if (Array.isArray(current)) { // 如果当前元素是数组，将数组展开一次放入原数组 stack.push(...current) ...
题目：请把两个数组 ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] 和 ['A', 'B', 'C', 'D']，合并为 ['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']。let a1 = ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] let a2 = ['A', 'B', 'C', 'D'].map((item) => { return item + 3 }) let a3 = [.....
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]; Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ return a-b})
好的，下面我将分别使用深度优先遍历（DFS）和广度优先遍历（BFS）的思想来实现一个拷贝函数。使用深度优先思想实现拷贝函数：function deepCopyDFS(obj) { if (typeof obj !== 'object' || obj === null) { // 如果是基本类型或者 null，则直接返回 return obj; } // 如果是对象或数组，则创建一个相同类型的空对象或数组 const copy = Array.isArray(obj) ? [] : {}; // 递归拷贝每个属性或元素 for (let key ...
树的深度优先遍历（Depth-First Traversal，DFS）和广度优先遍历（Breadth-First Traversal，BFS）是两种常用的树遍历算法，用于访问和处理树的节点。它们的主要区别在于遍历顺序的不同。深度优先遍历（DFS）：深度优先遍历是一种递归或者栈的形式来遍历树的算法。其主要特点是，从树的根节点开始，沿着一条分支尽可能深地遍历树的节点，直到到达最底部的叶子节点，然后回溯到上一个节点，继续探索其他分支。换句话说，DFS 尽可能深地遍历树的节点，直到不能再继续为止。在深度优先遍历中，访问节点的顺序如同沿着一条路径向下逐层遍历一样，直到到达叶子节点，然后回溯到上一个...
要实现 JavaScript 中的 new 操作符，你需要创建一个函数，让它模拟 new 的行为。new 操作符的主要作用是创建一个对象实例，并且将构造函数的 this 指向该对象。以下是一个简单的实现：function myNew(constructor, ...args) { // 创建一个新对象，该对象的原型为构造函数的原型 const instance = Object.create(constructor.prototype); // 调用构造函数，并将 this 指向新创建的对象 const result = constructor.apply...
没有更多了
最近评论