前端面试手撕编程

news2025/1/9 11:03:48

目录

ES6

改变this

call

typeof this !== 'function'

context = context || window

context._this = this

delete context._this

bind: return _this.apply(context, [...arguments].slice(1));

深拷贝

!arr|| arr == null || typeof arr != 'object'

arr instanceof Array ?  [] :  {}

for (const key in arr)

result[key] = cloneDeep(arr[key])

算法

合法的URL

千位分割:num.slice(render, len).match(/\d{3}/g).join(',')

公司*

用友sp

一面【二选一】

数组相邻和最大的对应两个元素

千位分割【无负数,含小数】

二面

华容道:BFS

k / 3, y = k % 3; //一维数组下标转化到二维数组中的坐标

swap(t[k],t[a*3+b]);

版本号排序:【滴滴提前批】


ES6

改变this

call

  1. typeof this !== 'function'

  2. context = context || window

  3. context._this = this

  4. delete context._this

    // 给function的原型上面添加一个 _call 方法
    Function.prototype._call = function (context) {
        //  判断调用者是否是一个函数  this 就是调用者
        if (typeof this !== 'function') {
           throw new TypeError('what is to be a function')
        }
        // 如果有 context 传参就是传参者 没有就是window
        context = context || window
        // 保存当前调用的函数
        context._this = this   
        // 截取传过来的参数
        /*
          arguments
                 a: 1
                 fn: ƒ fns()
        */
        // 通过 slice 来截取传过来的参数
        const local = [...arguments].slice(1)
        // 传入参数调用函数
        let result = context._this(...local)
        // 删属性
        delete context._this
        return result
    }

    let obj = { a: 1 }
    function fns(a, b) {
        console.log(a, b);
        console.log(this)
    }
    fns._call(obj, 23, 555)

bind: return _this.apply(context, [...arguments].slice(1));

深拷贝

  1. !arr|| arr == null || typeof arr != 'object'

  2. arr instanceof Array ?  [] :  {}

  3. for (const key in arr)

  4. result[key] = cloneDeep(arr[key])

 function cloneDeep(arr = {}) {
        // 终止递归 
        if (!arr|| arr == null || typeof arr != 'object' ) return arr
        // 用 instanceof 判断原型链上是否有该类型的原型 是 Array => [] ! Arrays =>{}
        let result=arr instanceof Array ?  [] :  {}
        // forin 循环对象的key值
        for (const key in arr) {
            //  对象 key 赋值 result
            result[key] = cloneDeep(arr[key])
        }
        return result
   }

算法

合法的URL

URL结构一般包括协议、主机名、主机端口、路径、请求信息、哈希

  1. 域名不区分大小写:"www"子域名(可选)、二级域名、"com"顶级域名
  2. 只能包含字母(a-z、A-Z)、数字(0-9)和连字符(-)(但-不能再首尾)
https://www.bilibili.com/video/BV1F54y1N74E/?spm_id_from=333.337.search-card.all.click&vd_source=6fd32175adc98c97cd87300d3aed81ea
//开始:                     ^
//协议:                     http(s)?:\/\/
//域名:                     [a-zA-Z0-9]+-[a-zA-Z0-9]+|[a-zA-Z0-9]+
//顶级域名 如com cn,2-6位:   [a-zA-Z]{2,6}
//端口 数字:                (:\d+)?
//路径 任意字符 如 /login:   (\/.+)?
//哈希 ? 和 # ,如?age=1:    (\?.+)?(#.+)?
//结束:                      $
//     https://           www.bilibili                com    /video/BV1F54y1N74E  ?spm..            
/^(http(s)?:\/\/)?(([a-zA-Z0-9]+-[a-zA-Z0-9]+|[a-zA-Z0-9]+)\.)+([a-zA-Z]{2,6})(:\d+)?(\/.+)?(\?.+)?(#.+)?$/.test(url)

千位分割:num.slice(render, len).match(/\d{3}/g).join(',')

  const format = (n) => {
        let num = n.toString() // 拿到传进来的 number 数字 进行 toString
        let len = num.length // 在拿到字符串的长度
        // 当传进来的结果小于 3 也就是 千位还把结果返回出去 小于3 不足以分割
        if (len < 3) {
            return num
        } else {
            let render = len % 3 //传入 number 的长度 是否能被 3 整除
            if (render > 0) { // 说明不是3的整数倍
                return num.slice(0, render) + ',' + num.slice(render, len).match(/\d{3}/g).join(',')
            } else {
                return num.slice(0, len).match(/\d{3}/g).join(',')
            }
        }
    }

    let str = format(298000)
    console.log(str)

公司*

用友sp

一面【二选一】

数组相邻和最大的对应两个元素

千位分割【无负数,含小数】

function formatNumberWithCommas(number) {
    // 将数字转换为字符串
    const numStr = number.toString();
    
    // 判断是否为小数
    const isDecimal = numStr.includes('.');
    
    // 如果是小数,分割整数部分和小数部分
    let integerPart = numStr;
    let decimalPart = '';
    if (isDecimal) {
        [integerPart, decimalPart] = numStr.split('.');
    }
    
    // 使用贪心算法从右往左插入逗号
    let formattedInteger = '';
    let count = 0;
    for (let i = integerPart.length - 1; i >= 0; i--) {
        formattedInteger = integerPart[i] + formattedInteger;
        count++;
        if (count === 3 && i !== 0) {
            formattedInteger = ',' + formattedInteger;
            count = 0;
        }
    }
    
    // 如果有小数部分,添加回小数点和小数部分
    const formattedNumber = isDecimal
        ? formattedInteger + '.' + decimalPart
        : formattedInteger;
    
    return formattedNumber;
}

// 测试
const number1 = -1234567.89;
const number2 = 12345.67;
const number3 = 123456;
console.log(formatNumberWithCommas(number1)); // 输出 "-1,234,567.89"
console.log(formatNumberWithCommas(number2)); // 输出 "12,345.67"
console.log(formatNumberWithCommas(number3)); // 输出 "123,456"

二面

华容道:BFS

k / 3, y = k % 3; //一维数组下标转化到二维数组中的坐标

swap(t[k],t[a*3+b]);

distance 数组用于记录每个状态距离初始状态的步数。

在华容道问题中,每次移动一次,就相当于从一个状态转移到了另一个状态。

BFS的核心思想是从初始状态开始,逐步地将可能的状态加入队列,并记录每个状态距离初始状态经过的步数。

#include <iostream>
#include <algorithm>
#include <queue>
#include <unordered_map>
 
using namespace std;
 
int bfs(string start)
{
    string end = "12345678x";
    
    queue<string> q;
    unordered_map<string,int> d;
    
    q.push(start);
    d[start] = 0;
    
    int dx[] = {-1,0,1,0}, dy[] = {0,1,0,-1};
    
    //宽搜过程
    while(q.size())
    {
        auto t = q.front();
        q.pop();
        
        int distance = d[t];
        
        if(t == end) return distance;
        
        //状态转移
        //找到x的位置
        int k = t.find('x'); //返回x的下标
        int x = k / 3, y = k % 3; //一维数组下标转化到二维数组中的坐标
        
        //枚举上下左右四个方向
        for(int i = 0; i < 4; i ++ )
        {
            int a = x + dx[i], b = y + dy[i];
            if(a >= 0 && a < 3 && b >= 0 && b < 3)
            {
                swap(t[k],t[a*3+b]);
                
                if(!d.count(t)) //当前更新的状态没有搜到过
                {
                    d[t] = distance + 1; //更新当前距离
                    q.push(t); //把新的状态加到队列中
                }
                
                swap(t[k],t[a*3+b]); //状态恢复
            }
        }
    }
    
    return -1;
}
int main()
{
    string start;
    for(int i = 0 ; i < 9; i ++ )
    {
        char c;
        cin >> c;
        start += c;
    }
    
    cout << bfs(start) << endl;
    
    return 0;
}

版本号排序:【滴滴提前批】

// 假设有一个版本号数组
const versionNumbers = ["1.0.2", "1.1.0", "2.0.0", "1.0.1"];

// 定义一个比较函数来进行版本号排序
function compareVersions(versionA, versionB) {
    const partsA = versionA.split('.').map(Number);
    const partsB = versionB.split('.').map(Number);

    for (let i = 0; i < Math.max(partsA.length, partsB.length); i++) {
        const partA = partsA[i] || 0;
        const partB = partsB[i] || 0;

        if (partA < partB) return -1;
        if (partA > partB) return 1;
    }

    return 0;
}

// 使用比较函数对版本号数组进行排序
const sortedVersions = versionNumbers.sort(compareVersions);

// 打印排序后的版本号数组
console.log(sortedVersions);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/923539.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

正则中常见的流派及其特性

目前正则表达式主要有两大流派&#xff08;Flavor&#xff09;&#xff1a;POSIX 流派与 PCRE 流派。 1、 POSIX 流派 POSIX 规范定义了正则表达式的两种标准&#xff1a; BRE 标准&#xff08;Basic Regular Expression 基本正则表达式&#xff09;&#xff1b;ERE 标准&am…

Android获取手机已安装应用列表JAVA实现

最终效果: 设计 实现java代码: //获取包列表private List<String> getPkgList() {List<String> packages new ArrayList<String>();try {//使用命令行方式获取包列表Process p Runtime.getRuntime().exec("pm list packages");//取得命令行输出…

【微信小程序开发】一文带你详解小程序组件和 API 的使用

引言 在小程序开发中&#xff0c;组件和API是非常重要的部分&#xff0c;它们可以帮助我们构建丰富的用户界面和实现各种功能。本文将介绍小程序中常用的组件和API&#xff0c;并提供相应的代码示例。 文章目录 引言组件文本组件图片组件按钮组件输入框组件列表组件 API网络请…

C语言小练习(三)

&#x1f31e; “也许你感觉自己与周遭格格不入&#xff0c;但正是那些你一人度过的时光&#xff0c;让你变得越来越有意思&#xff0c;等有天别人终于注意到你的时候&#xff0c;他们就会发现一个比他们想象中更酷的人。”-《生活大爆炸》 Day03 &#x1f4dd; 一.选择题&…

【Vue框架】基本的login登录

前言 最近事情比较多&#xff0c;只能抽时间看了&#xff0c;放几天就把之前弄的都忘了&#xff0c;现在只挑着核心的部分看。现在铺垫了这么久&#xff0c;终于可以看前端最基本的登录了&#x1f602;。 1、views\login\index.vue 由于代码比较长&#xff0c;这里将vue和js…

vxe-table解决虚拟滚动时的白屏问题

项目中使用虚拟滚动&#xff0c;滚动一快就会白屏&#xff0c;花了两天时间看了源码&#xff0c;检查渲染元素&#xff0c;发现元素渲染的是很快的&#xff0c;跟得上的&#xff0c;但是还是会出现白屏&#xff0c;后面检查样式&#xff0c;发现只要把表格背景色去掉&#xff0…

平安私人银行慈善沙龙广州站:善财传承公益有道,广州分行聚爱同行

近年来&#xff0c;平安私人银行将慈善作为客户服务的王牌权益之一&#xff0c;激发和满足客户公益慈善心愿&#xff0c;打造财富人群和困境人群的桥梁&#xff0c;并链接公益机构等专业组织&#xff0c;深度挖掘金融赋能慈善的多种可能性&#xff0c;让财富通过慈善事业释放出…

STM32CubeMX配置STM32G0 Standby模式停止IWDG(HAL库开发)

1.打开STM32CubeMX选择好对应的芯片&#xff0c;打开IWDG 2.打开串口1进行调试 3.配置好时钟 4.写好项目名称&#xff0c;选好开发环境&#xff0c;最后获取代码。 5.打开工程&#xff0c;点击魔术棒&#xff0c;勾选Use Micro LIB 6.修改main.c #include "main.h"…

springCloud整合Zookeeper的时候调用找不到服务

SpringCloud整合Zookeeper的时候调用找不到服务 首先&#xff0c;我们在注册中心注册了这个服务&#xff1a; 然后我们使用RestTemplate 调用的时候发现失败了&#xff1a;找不到这个服务&#xff1a; 找了很多资料发现这个必须要加上负载才行 BeanLoadBalanced //负载publi…

javaee idea创建maven项目,使用el和jstl

如果使用el表达式出现下图问题 解决办法 这是因为maven创建项目时&#xff0c;web.xml头部声明默认是2.3&#xff0c;这个默认jsp关闭el表达式 办法1 在每个需要用到el和jstl的页面的上面加一句: <% page isELIgnored"false" %> 方法2 修改web.xml文件开…

node和前端项目宝塔部署

首先需要一台服务器 购买渠道&#xff1a;阿里云、腾讯云、百度云、华为云 一、以阿里云为例 购买esc 可临时购买测试服务器 二、安装宝塔 复制公网ip地址 通过Xshell 进行账号密码的连接 连接后访问宝塔官网 宝塔面板下载&#xff0c;免费全能的服务器运维软件 找到自己…

jenkins Linux如何修改jenkins 默认的工作空间workspace

由于jenkins默认存放数据的目录是/var/lib/jenkins&#xff0c;一般这个var目录的磁盘空间很小的&#xff0c;就几十G,所以需要修改jenkins的默认工作空间workspace 环境 jenkins使用yum安装的 centos 7 正题 1 查看jenkins安装路径 [rootlocalhost jenkins_old_data]# rpm…

二叉树题目:二叉树的层序遍历 II

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;二叉树的层序遍历 II 出处&#xff1a;107. 二叉树的层序遍历 II 难度 4 级 题目描述 要求 给你二叉树的根结点 root \texttt{root} root&#x…

shopee开店前期要怎么做!新手必须知道的小技巧

在shopee开店前期可以先做以下准备&#xff1a; 1.shopee开店前精准定位 确定目标人群&#xff1a;做店铺定位离不开目标人群需求&#xff0c;人群定位解决的是产品卖给谁的问题&#xff0c;这就需要了解客户群体的各方面信息。加之&#xff0c;Shopee平台作为东南亚土生土长的…

Docker容器学习:搭建私有镜像仓库Harbor

系统环境&#xff1a; Centos7.9Docker-ce:24 安装Docker-Compose curl -L "https://github.com/docker/compose/releases/download/v2.20.3/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose添加执行权限并验证 [rootnode4 ~]# chmod…

dolphinschedule配置企微告警服务(WeChat群组)

一、前置说明 ds配置好工作流后&#xff0c;比较重要的一个就是上线后的监控报警服务&#xff0c;如果你是基于企微作为协同办公的&#xff0c;WeChat群组预警必须是要安排上的&#xff0c;文章基于自建应用配合群组方式构建预警群&#xff0c;接入后&#xff0c;任务成功或者…

多线程与高并发——并发编程(1)

文章目录 并发编程一、线程的基本概念1 基础概念1.1 进程和线程1.2 多线程1.3 串行、并行、并发1.4 同步异步、阻塞非阻塞 2 线程的创建2.1 继承Thread类&#xff0c;重写run方法2.2 实现Runnable接口&#xff0c;实现run方法2.3 实现Callable接口&#xff0c;实现call方法&…

Spring Boot+Atomikos进行多数据源的分布式事务管理详解和实例

文章目录 0.前言1.参考文档2.基础介绍3.步骤1. 添加依赖到你的pom.xml文件:2. 配置数据源及其对应的JPA实体管理器和事务管理器:3. Spring BootMyBatis集成Atomikos4. 在application.properties文件中配置数据源和JPA属性&#xff1a; 4.使用示例5.底层原理 0.前言 背景&#x…

漏洞复现 || SXF应用交付系统RCE(0Day)

漏洞描述 SXF应用交付管理系统login存在远程命令执行漏洞&#xff0c;攻击者通过漏洞可以获取服务器权限&#xff0c;执行任意命令。 免责声明 技术文章仅供参考&#xff0c;任何个人和组织使用网络应当遵守宪法法律&#xff0c;遵守公共秩序&#xff0c;尊重社会公德&#…

【Linux】ctime、mtime、atime

/etc/fstab中的noatime noatimedir 挂载选项linux下文件的ctime、mtime、atime一、/etc/fstab /etc/fstab是用来存放文件系统的静态信息的文件。 系统开机时会主动读取/etc/fstab这个文件中的内容,根据文件里面的配置挂载磁盘。这样我们只需要将磁盘的挂载信息写入这个文件中…