2024前端面试真题【手写篇】

求几个数的总和（2，3，4，5，6，6，7，7，8，8，8）

arr.reduce((total, currentVal, currentInd, arr)=>{}, initialVal)

const arr = [2，3，4，5，6，6，7，7，8，8，8]
const sum = arr.reduce((total, val) => total + val, 0)

离开页面弹出确认框

window.onbeforeunload = _=>alert('确认离开页面吗？')

将URL中的查询字符串参数转换为对象数据

  • URLSearchParams：将查询参数字符串解析为一个可迭代数据
  • Object.fromEntries：将可迭代数据转换为对象
const query = 'name=John&age=30';// 将字符串解析为对象
const parseQuery = query => Object.fromEntries(new URLSearchParams(query));// 结果: parseQuery = { name: 'John', age: '30' }

将秒数转换为时间格式的字符串

const seconds = 4532const toTimeStr = sec => new Date(sec * 1000).toISOString().substr(11, 8);toTimeStr(seconds) // 输出"01:15:32"

创建包含值为指定数字范围的数组

Array.from()用于将类数组对象或可迭代对象转换为一个新的数据。基本语法：Array.from(arrayLike, [, mapFn [, thisArg])

const arr = Array.from({length: 5}, num => num *3)

Promise

Promise的三个状态：

  • pending：操作待定
  • rejected：操作失败
  • fulfilled：操作成功

隐式转换

  • [] == ![]：true

实现New

步骤

  1. 创建一个新的空对象
  2. 设置原型，将对象的原型设置为函数的prototype对象
  3. 修改函数的this指向为这个对象，执行构造函数的代码
  4. 判断函数返回值类型（值类型则返回创建的对象；引用类型则返回这个引用类型的对象）
function objNew(constructor, ...args) {// 必须是一个函数if(typeof constructor !== 'function') {throw "objNew function the first param must be a  function"}// 基于原型链 创建一个新对象 继承构造函数constructor的原型对象上的属性let objNew = Object.create(constructor.prototype)// 将objNew作为this 执行constructor 传入传入let res = constructor.apply(newObj, args)let isObject = typeof res === 'object' && res !== null// 判断函数的执行结果是否是函数let isFunction = typeof res === 'function'return isObject || isFunction ? res : objNew
}// 使用
function Person (name, age) {this.name = name;this.age = age;
}Person.prototype.say = function() {console.log(`say hello to ${this.name}(of ${this.age})`)
}let xiaoM = objNew(Person, 'xiaoMing', 18)
console.log(xiaoM.name) // xiaoMing
console.log(xiaoM) // Person(name:'xiaoMing',age:18)
xiaoM.say() // 18

用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值

function randomArr(arr) {var num = randomNumber();if (arr.indexOf(num)< 0){arr[i] = num;i++;} else {num = randomNumber();}if (i>=arr.length){return;}else{randomArr(arr,num)}
}
function randomNumber() {return Math.floor(Math.random()*31 + 2)
}var arr = new Array(5);
var i = 0;
randomArr(arr);

圣杯布局和双飞翼布局的理解和区别，代码实现

两者都是为了不让左右遮住middle

  • 圣杯布局：父元素设置padding给左右腾位置，从而不会遮住middle内容
<body>
<div id="hd">header</div>
<div id="bd"><div id="middle">middle</div><div id="left">left</div><div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>

<style>
#hd{height:50px;background: #666;text-align: center;
}
#bd{/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/padding:0 200px 0 180px;height:100px;
}
#middle{float:left;width:100%;/*左栏上去到第一行*/height:100px;background:blue;
}
#left{float:left;width:180px;height:100px;margin-left:-100%;background:#0c9;/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/position:relative;left:-180px;
}
#right{float:left;width:200px;height:100px;margin-left:-200px;background:#0c9;/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/position:relative;right:-200px;
}
#footer{height:50px;background: #666;text-align: center;
}
</style>
  • 双飞翼布局：middle设置margin，限制内部内容区域，以防左右遮挡middle内容
<body>
<div id="hd">header</div> <div id="middle"><div id="inside">middle</div></div><div id="left">left</div><div id="right">right</div><div id="footer">footer</div>
</body>

<style>
#hd{height:50px;background: #666;text-align: center;
}
#middle{float:left;width:100%;/*左栏上去到第一行*/     height:100px;background:blue;
}
#left{float:left;width:180px;height:100px;margin-left:-100%;background:#0c9;
}
#right{float:left;width:200px;height:100px;margin-left:-200px;background:#0c9;
}/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
#inside{margin:0 200px 0 180px;height:100px;
}
#footer{  clear:both; /*记得清楚浮动*/  height:50px;     background: #666;    text-align: center; 
} 
</style>

写一个方法去掉首尾空格

const str = '  s t  r  'const POSITION = Object.freeze({left: Symbol(),right: Symbol(),both: Symbol(),center: Symbol(),all: Symbol(),
})function trim(str, position = POSITION.both) {if (!!POSITION[position]) throw new Error('unexpected position value')switch(position) {case(POSITION.left):str = str.replace(/^\s+/, '')break;case(POSITION.right):str = str.replace(/\s+$/, '')break;case(POSITION.both):str = str.replace(/^\s+/, '').replace(/\s+$/, '')break;case(POSITION.center):while (str.match(/\w\s+\w/)) {str = str.replace(/(\w)(\s+)(\w)/, `$1$3`)}break;case(POSITION.all):str = str.replace(/\s/g, '')break;default: }return str
}const result = trim(str)console.log(`|${result}|`) //  |s t  r|

删除字符串最后一个指定字符

//方法一  lastIndexOf()
function delLast (str,del) {if (tpeof str !== 'string') {alert('请确认要删除的对象为字符串！');retrun false;} else {let index = str.lastIndexOf(del);str.substring(0,index ) + str.substring(index+1,str.length);}
}//方法二  反转字符串
function delLast(str, target) {return str.split('').reverse().join('').replace(target, '').split('').reverse().join('');
}const str = delLast('asdfghhj', 'h')console.log(str) // asdfghj

写一个方法把下划线命名转为驼峰命名

//方法一  
function toCamel(str) {if(str.split('_').length==1)return;str = str.replace(/(\w)/, (match, $1) => `${$1.toUpperCase()}`)while(str.match(/\w_\w/)) {str = str.replace(/(\w)(_)(\w)/, (match, $1, $2, $3) => `${$1}${$3.toUpperCase()}`)}return str
}console.log(toCamel('a_c_def')) // ACDef //方法二
function changeStr(str){if(str.split('_').length==1)return;str.split('_').reduce((a,b)=>{return a+b.substr(0,1).toUpperCase() + b.substr(1)})
}

写一个把字符串大小写切换的方法

function caseConvert(str){return str.replace(/([a-z]*)([A-Z]*)/g, (m, s1, s2)=>{return `${s1.toUpperCase()}${s2.toLowerCase()}`})
}
caseConvert('AsA33322A2aa') //aSa33322a2AA

css实现三角形

.rect {width: 0;height: 0;background-color: #fff;border-right: 100px solid transparent;border-left: 100px solid transparent;border-top: 100px solid rgb(29, 156, 194);border-bottom: 100px solid transparent;}/*方法二*/.triangle:after{content: '';border: 35px solid transparent;border-bottom-color: lightgreen;}
  1. 写一个去除制表符和换行符的方法
    \s会匹配空格，还是老实用[\t\n\v\r\f]
var str = '大家好  阿斯蒂芬阿斯顿\n发生的发生';
function fn(str) {var s = str.replace(/\t|\n|\r|\f/g, "");return s;}console.log(fn(str))

统计某个字符或者字符串在另一个字符串中出现的次数

//方法一
function count(str, param) {const reg = new RegExp(param, 'g');return str.match(reg).length;
}
//方法二
var childInNums = parent.split(child).length - 1

简单的加密字符串的方法

// String.fromCharCode()  返回字符串的Unicode编码
function strEncrypt(str) {return str.split('').map(s => {return String.fromCharCode(s.charCodeAt() + 1)}).join('')
}console.log(strEncrypt('hello world')) // ifmmp!xpsme

简单的判断数据类型的方法

// "Array", "Function", "Object", "RegExp", "Date"
// "Boolean", "Number", "String"
function myType(v){return Object.prototype.toString.call(v).replace(/^.{8}(.+)]$/,(m,$1)=> $1.toLowerCase());
}

获取当前url查询字符串中参数的方法

// window.location.search可直接获取
function urlParam(url){const param = {};url.replace(/[?&](.*?)=([^&]*)/g,(m,$1,$2)=> param[$1] = $2);return param;
}

数组去重的方法（支持多维）

function flat(arr, target) {arr.forEach(item => {if (Array.isArray(item)) {flat(item, target)} else {target.push(item)}})
}function flatArr(arr) {let result = []flat(arr, result)return result
}function uniqueArr(arr) {return [...new Set(flatArr(arr))]
}const result = uniqueArr([1, 2, 3, 4, [3, 4, [4, 6]]])console.log(result) // 1,2,3,4,6

检测中文的方法：

//使用的Unicode 编码 4e00 和 9fa5 分别表示第一个汉字和最后一个汉字的编码
function isChinese(str) {const re = /^[\u4e00-\u9fa5]+$/;return re.test(str);
}

获取数组最大最小值的方法

const getMinAndMax = arr => ({// 数组展开在 ES5 中可以用 apply 代替// ES5: Math.min.apply(null, arr)min: Math.min(...arr),max: Math.max(...arr)
});

写一个方法判断是否是回文字符串

var isPalindrome = function(s) {if (s.length === 1) return trueconst str = s.replace(/[^a-zA-Z0-9]/g, "").toLowerCase()const strReverse = str.split('').reverse().join('')return str === strReverse
};

div模拟texterea

<style>
.edit{width: 300px;height: 200px;padding: 5px;border: solid 1px #ccc;resize: both;overflow:auto;
}
</style>
<body><h3>用一个div模拟textarea的实现</h3><div class="edit" contenteditable="true">这里是可以编辑的内容，配合容器的 overflow ，多行截断，自定义滚动条，简直好用的不要不要的。</div>
</body>

找出一个字符串中最长的字符

function maxLengthString(str){str.split('').reduce(function(start,end){return start>end?start.length:end.length})
}

实现单行文本居中和多行文本左对齐，超出显示…

.one {text-align: center
}
/*text-overflow: ellipsis  有兼容问题*/
.multi {overflow: hiddentext-overflow: ellipsisdisplay: -webkit-box-webkit-line-clamp: 3-webkit-box-orient: vertical
}

让英文单词首字母大写

/*text-transform:capitalize(强制首字母大写) 、uppercase(全大写)、lowercase、none(阻止大小写转换)、full-width(实验性属性值)*/
.demo {text-transform: capitalize;
}

用js写一个事件监听方法

class EventBus {constructor() {this.events = {}}on(eventName, callback) {const events = this.events;if (!events[eventName]) {events[eventName] = [];}events[eventName].push(callback);return this;}emit(eventName, params) {const events = this.events;if (events[eventName]) {events[eventName].forEach(cb => cb(params));}return this;}
}

使用正则表达式去掉html中标签与标签之间的空格

const html = `
<div><span>      我两边怎么有空格？  </span>
</div>
`
console.log(html.replace(/>\s*(\S*)\s*</g, ">$1<"));

写一个方法给多维数组降维

let arr = [1, 2, {}, 3, [4, {}, 5], [6, 7, [8, null, 9]]];
//递归
function flat (arr) {let ret = []for (let i = 0; i < arr.length; i++) {if (arr[i] instanceof (Array)) {ret = ret.concat(flat(arr[i]))}else {ret.push(arr[i])}}return ret
}
console.log(flat(arr))
//ES10新增的内置方法
arr.flat(Infinity)

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C++：智能指针 [unique_ptr]

C++：智能指针 [unique_ptr]

文章目录 0x1 基本使用0x11 get() [ 参照auto_ptr ]0x12 release() [ 参照auto_ptr ]0x13 reset() [ 参照auto_ptr ]0x14 get_deleter() [ 新增 ]0x15 operator bool [ 新增 ]0x16 swap() [ 新增 ]0x2 make_unique函数 [unique_ptr在C11引入&#xff0c;make_unique在C14引入]0…
阅读更多...
JAVA笔记十四

JAVA笔记十四

十四、集合 1.集合概述 (1)集合是存储其它对象的特殊对象&#xff0c;可以将集合当作一个容器 (2)集合的相关接口和类位于java.util包中 (3)集合中的接口和类是一个整体、一个体系 2.集合接口 接口定义了一组抽象方法&#xff0c;实现该接口的类需要实现这些抽象方法&…
阅读更多...
Docker核心技术：Docker原理之Cgroups

Docker核心技术：Docker原理之Cgroups

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 Docker核心技术 系列文章&#xff1a;Docker原理之Cgroups&#xff0c;其他文章快捷链接如下&#xff1a; 应用架构演进容器技术要解决哪些问题Docker的基本使用Docker是如何实现的 Docker核心技术&#xff1a;…
阅读更多...
C++初学者指南-5.标准库(第一部分)--标准库最小/最大算法

C++初学者指南-5.标准库(第一部分)--标准库最小/最大算法

C初学者指南-5.标准库(第一部分)–标准库min/max算法 文章目录 C初学者指南-5.标准库(第一部分)--标准库min/max算法minmaxminmaxclamp (C17)min_elementmax_elementminmax_element相关内容 C标准库算法是一块新领域&#xff1f;⇒简短介绍 min min(a, b) → a 如果 a < b则…
阅读更多...
Linux_实现UDP网络通信

Linux_实现UDP网络通信

目录 1、实现服务器的逻辑 1.1 socket 1.2 bind 1.3 recvfrom 1.4 sendto 1.5 服务器代码 2、实现客户端的逻辑 2.1 客户端代码 3、实现通信 结语 前言&#xff1a; 在Linux下&#xff0c;实现传输层协议为UDP的套接字进行网络通信&#xff0c;网络层协议为IPv4&am…
阅读更多...
基于Fabric 的区块链测试方法调研与总结

基于Fabric 的区块链测试方法调研与总结

Fabric概述 从应用层视角来看&#xff0c;Hyperledger Fabric为开发人员提供了CLI命令行终端、事件模块、客户端SDK、链码API等接口&#xff0c;为上层应用提供了身份管理、账本管理、交易管理、智能合约管理等区块链服务&#xff0c;具体如下&#xff1a; 身份管理&#xff…
阅读更多...
百年传承，味在蒸面

百年传承，味在蒸面

2024年7月15日&#xff0c;西安工程大学赴陕西安康“筑梦乡村&#xff0c;携手同行”暑期社会实践团队前往陕西安康鼓楼西街对非遗美食马国庆蒸面进行实践活动。 早晨七点&#xff0c;实践团队在鼓楼西街路口整装集合前往马国庆蒸面&#xff0c;据实践团队前期资料收集了解到马…
阅读更多...
k8s+containerd（kvm版）

k8s+containerd（kvm版）

k8s&#xff08;Kubernetes&#xff09;是由Gogle开源的容器编排引擎&#xff0c;可以用来管理容器化的应用程序和服务&#xff0c;k 高可用&#xff1a;系统在长时间内持续正常地运行&#xff0c;并不会因为某一个组件或者服务的故障而导致整个系统不可用可扩展性&#xff1a…
阅读更多...
【SpringBoot】 jasypt配置文件密码加解密

【SpringBoot】 jasypt配置文件密码加解密

目前我们对yml配置文件中的密码都是明文显示&#xff0c;显然这不安全&#xff0c;有的程序员离职了以后可能会做一些非法骚操作&#xff0c;所以我们最好要做一个加密&#xff0c;只能让领导架构师或者技术经理知道这个密码。所以这节课就需要来实现一下。 我们可以使用jasypt…
阅读更多...
爬虫学习3：爬虫的深度爬取

爬虫学习3：爬虫的深度爬取

爬虫的深度爬取和爬取视频的方式 深度爬取豆瓣读书 import time import fake_useragent import requests from lxml import etree head {"User-Agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 …
阅读更多...
陶德：边种田边写代码，3年300万行，一个人写出了“国产大满贯QT”

陶德：边种田边写代码，3年300万行，一个人写出了“国产大满贯QT”

这是《开发者说》的第12期&#xff0c;本期我们邀请的开发者是陶德&#xff0c;从小在国企矿山里长大&#xff0c;计算机成绩是文科班里最差的一个&#xff0c;毕业两年找不到工作&#xff0c;睡过公园&#xff0c;讨过剩饭&#xff0c;用打魔兽世界的方式磨炼技术&#xff0c;…
阅读更多...
.NET 8+Vue2 部署到Window Server

.NET 8+Vue2 部署到Window Server

.NET 8Vue2 部署到Window Server 1 配置环境 1.1 下载安装.NET 8 SDK&#xff0c;下载时需注意目标服务器的系统类型&#xff08;64位 or 32位&#xff09; https://dotnet.microsoft.com/zh-cn/download 1.2 下载安装SQL Server数据库&#xff08;服务和管理工具&#xff…
阅读更多...
LeetCode 129, 133, 136

LeetCode 129, 133, 136

文章目录 129. 求根节点到叶节点数字之和题目链接标签思路代码 133. 克隆图题目链接标签思路代码 136. 只出现一次的数字题目链接标签思路代码 129. 求根节点到叶节点数字之和 题目链接 129. 求根节点到叶节点数字之和 标签 树 深度优先搜索 二叉树 思路 由于本题需要 从…
阅读更多...
docker自定义镜像dockerfile

docker自定义镜像dockerfile

阅读更多...
海外短剧系统搭建开发定制，H5/APP源码搭建部署，支持二开

海外短剧系统搭建开发定制，H5/APP源码搭建部署，支持二开

目录 前言&#xff1a; 一、系统功能 二、部署流程 前言&#xff1a; 海外短剧系统搭建部署&#xff0c;前端uniapp&#xff0c;PHP语言。支持二开功能。 一、系统功能 以下是改写后的内容&#xff1a; 1. 多语言环境集成 —— 提供一键式翻译功能&#xff0c;轻松切换多…
阅读更多...
【Vue3】计算属性

【Vue3】计算属性

【Vue3】计算属性 背景简介开发环境开发步骤及源码 背景 随着年龄的增长&#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来&#xff0c;技术出身的人总是很难放下一些执念&#xff0c;遂将这些知识整理成文&#xff0c;以纪念曾经努力学习奋斗的日子。本文内…
阅读更多...
IT common sense常识

IT common sense常识

how to input formative json data in console console.log({"message": [{"cat_id": 1,"cat_name": "大家电","cat_pid": 0,"cat_level": 0,"cat_deleted": false,,,,})2) how to clear unecessary c…
阅读更多...
基于生物地理算法的MLP多层感知机优化matlab仿真

基于生物地理算法的MLP多层感知机优化matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 生物地理算法&#xff08;BBO&#xff09;原理 4.2 多层感知机&#xff08;MLP&#xff09; 4.3 BBO优化MLP参数 5.完整程序 1.程序功能描述 基于生物地理算法的MLP多层感知机优化mat…
阅读更多...
【数学建模】——前沿图与网络模型：新时代算法解析与应用

【数学建模】——前沿图与网络模型：新时代算法解析与应用

目录 1.图与网络的基本概念 1. 无向图和有向图 2. 简单图、完全图、赋权图 3. 顶点的度 4. 子图与图的连通性 2.图的矩阵表示 1. 关联矩阵 2. 邻接矩阵 3.最短路问题 1.Dijkstra 算法 2.Floyd 算法 4.最小生成树问题 1.Kruskal 算法 2.Prim 算法 5.着色问题 6.…
阅读更多...
C语言——字符串拼接strcat及自实现代码

C语言——字符串拼接strcat及自实现代码

strcat函数 在C语言中&#xff0c;strcat函数用于将两个字符串连接起来&#xff0c;即将源字符串&#xff08;source string&#xff09;追加到目标字符串&#xff08;destination string&#xff09;的末尾&#xff0c;并返回目标字符串。这个函数定义在头文件<string.h&g…
阅读更多...
最新文章

Copyright @ 2022~2023