2024年最新【面试题】 面试手写JS 十六题（必看）_str(2)，2024年最新京东面试真题解析视频

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

typeof callback == 'function' && callback.call(context,self[i], i)

}
}
复制代码

## 6、手写filter方法

Array.prototype.myFilter=function(callback, context=window){

let len = this.length
newArr = [],
i=0

for(; i < len; i++){
if(callback.apply(context, [this[i], i , this])){
newArr.push(this[i]);
}
}
return newArr;
}
复制代码

## 7、手写reduce方法

Array.prototype.myReduce = function(fn, initialValue) {
var arr = Array.prototype.slice.call(this);
var res, startIndex;
res = initialValue ? initialValue : arr[0];
startIndex = initialValue ? 0 : 1;
for(var i = startIndex; i < arr.length; i++) {
res = fn.call(null, res, arr[i], i, this);
}
return res;
}
复制代码

## 8 查找字符串中出现最多的字符和个数


字符最多的是char，出现了num次

function myString(str){
let num = 0;
let char = ‘’;
let re = /(\w)\1+/g;
str.replace(re,($0,$1) => {
if(num < $0.length){
num = $0.length;
char = $1;
}
});
return {num, char}
}

复制代码

## 9 冒泡排序



> 
> 冒泡排序的原理如下，从第一个元素开始，把当前元素和下一个索引元素进行比较。如果当前元素大，那么就交换位置，重复操作直到比较到最后一个元素，那么此时最后一个元素就是该数组中最大的数。下一轮重复以上操作，但是此时最后一个元素已经是最大数了，所以不需要再比较最后一个元素，只需要比较到 `length - 1` 的位置
> 
> 
> 

function bubbleSort(list) {
var n = list.length;
if (!n) return [];

for (var i = 0; i < n; i++) {
// 注意这里需要 n - i - 1
for (var j = 0; j < n - i - 1; j++) {
if (list[j] > list[j + 1]) {
var temp = list[j + 1];
list[j + 1] = list[j];
list[j] = temp;
}
}
}
return list;
}
复制代码

## 10 快速排序



> 
> 快排的原理如下。随机选取一个数组中的值作为基准值，从左至右取值与基准值对比大小。比基准值小的放数组左边，大的放右边，对比完成后将基准值和第一个比基准值大的值交换位置。然后将数组以基准值的位置分为两部分，继续递归以上操作
> 
> 
> 

function quickSort(arr) {
if (arr.length<=1){
return arr;
}
var baseIndex = Math.floor(arr.length/2);
var base = arr.splice(baseIndex,1)[0];
var left=[];
var right=[];
for (var i = 0; i<arr.length; i++){
if (arr[i] < base){
left.push(arr[i]);
}
}else{
right.push(arr[i]);，
}
return quickSort(left).concat([base],quickSort(right));
}
复制代码

## 11 插入排序

function insertSort(arr) {
for (let i = 1; i < arr.length; i++) {
let j = i;
let target = arr[j];
while (j > 0 && arr[j - 1] > target) {
arr[j] = arr[j - 1];
j–;
}
arr[j] = target;
}
return arr;
}
复制代码

## 12 对象扁平化

function objectFlat(obj = {}) {
const res = {}
function flat(item, preKey = ‘’) {
Object.entries(item).forEach(([key, val]) => {
const newKey = preKey ? ${preKey}.${key} : key
if (val && typeof val === ‘object’) {
flat(val, newKey)
} else {
res[newKey] = val
}
})
}
flat(obj)
return res
}
复制代码

## 13、手写发布订阅模式


* 创建一个对象
* `on`方法用来把回调函数`fn`都加到缓存列表中
* `emit` 根据`key`值去执行对应缓存列表中的函数
* `off`方法可以根据`key`值取消订阅

class EventEmiter {
constructor() {
this._events = {}
}
on(eventName,callback) {
if(!this._events) {
this._events = {}
}
this._events[eventName] = […(this._events[eventName] || []),callback]
}
emit(eventName, …args) {
if(!this._events[eventName]) {
return
}
this._events[eventName].forEach(fn=>fn(…args))
}
off(eventName,cb) {
if(!this._events[eventName]) {
return
}
this._events[eventName] = this._events[eventName].filter(fn=>fn != cb && fn.l != cb)
}
once(eventName,callback) {
const one = (…args)=>{
callback(args)
this.off(eventName,one)
}
one.l = callback
this.on(eventName,one)
}
}
复制代码

## 14、手写Ajax


* 创建 `XMLHttpRequest` 实例
* 发出 HTTP 请求
* 服务器返回 XML 格式的字符串
* JS 解析 XML，并更新局部页面
* 不过随着历史进程的推进，XML 已经被淘汰，取而代之的是 JSON。

function ajax(url) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest()
xhr.open(‘get’, url)
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status <= 300) {
resolve(JSON.parse(xhr.responseText))
} else {
reject(‘请求出错’)
}
}
}
xhr.send()
})
}
复制代码

## 15、数组去重

function uniqueArr(arr) { return […new Set(arr)]; }
复制代码

## 16、实现new的过程


**new操作符做了这些事：**


* 创建一个全新的对象
* 这个对象的`__proto__`要指向构造函数的原型prototype
* 执行构造函数，使用 `call/apply` 改变 this 的指向


### 最后

**前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/a5a0937e1603cd6754a85f8555d6ea7c.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/a0ab3a9b2fd8b054fb6de4cb37f6549f.webp?x-oss-process=image/format,png)



用 `call/apply` 改变 this 的指向


### 最后

**前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-KysZWTwo-1715721872390)]

[外链图片转存中...(img-PmkRX1XK-1715721872391)]