当前位置：首页 > news >正文

JavaScript面试手写题（持续更新）

news 2025/11/12 12:29:52

JavaScript手写题

1. 实现数组 push

Array.prototype.push = function(args) {for(let i = 0; i < args.length; i++) {this[this.length] = args[i]}return this.length
}

2. 实现数组 filter

Array.prototype.filter = function(fn) {if(typeof fn !== "function") throw TypeError("fn not a function");const res = [] // 返回一个新数组for(let i = 0 ; i < this.length; i++) {if(fn(this[i], i)) res.push(this[i]);}return res;
}

3. 实现数组map

Array.prototype.map = function(fn) {if(typeof fn !== "function") throw TypeError("fn not a function")const res = []; // 返回一个新数组for(let i = 0; i < this.length; i++) {res.push(fn(this[i], i));}return res;
}

4. 实现数组flat

// 递归
function flat(arr, depth = 1){if(!Array.isArray(arr) || depth <= 0) return arr;const res = [];arr.forEach(item => {Array.isArray(item) ? res.push(...flat(item, depth - 1)) : res.push(item)})return res;
}

5. 实现字符串 trim

String.prototype.trim = function() {return this.replace(/(^\s*)|(\s*$)/g, '');
}

5. 实现字符串 repeat

String.prototype.repeat = function(n) {return n > 0 ? this.repeat(n - 1) + this : '';
}

6. 实现 Object.is

Object.is = function(x , y) {if (x === y) return x !== 0 || 1 / x === 1 / y;return x !== x && y !== y
}

7. 实现 Object.assign

Object.assign = function(target, ...sources) {if(target === null) throw new TypeError("undefined or null to object")const res = Object(target)sources.forEach(source => {for (let key in source) {if(source.hasOwnProperty(key)) res[key] = source[key]}})return res;
}

8. 实现 instanceof

function Instanceof(left, right) {while(true) {if(left == null) return falseif(left.__proto__ === right.prototype) return true;left = left.__proto__;}
}

9. 实现 JSON.parse

// 1. eval
JSON.parse = function(jsonstr) {return eval(`(${jsonstr})`)
}
// 2. new Function()
JSON.parse = function(jsonstr) {return (new Function(`return ${jsonstr}`))()
}

10. 实现 Promise.all

Promise.all = function(promises) {return new Promise((resolve,reject) => {const result = []let count = 0;if(promises.length === 0) {resolve(result)} else {for(let i = 0; i < promises.length; i++) {Promise.resolve(promises[i].then(res => {result[i] = rescount++if(count === promises.length) {resolve(result)}}, err => {reject(err)}))}}})
}

11. 实现 Primise.race

》 race 就像赛跑，谁先到终点（无论是成功还是失败），整个比赛就结束

Promise.race = function(promises) {return new Promise((resolve,reject) => {for(let i = 0 ; i < promises.length; i++) {Promise.resolve(promises[i]).then(res => {resolve(res);}, err => {reject(err)});}})
}

12. 数组去重

// 1，挨个比较
function uniqueArr(arr) {const res = [];const map = new Map();for(let item of arr) {if(!map.has(item)) {res.push(item);map.set(item, 1);}}return res;
}// 2. shiyong set去重
function uniqueArr(arr) {return [...new Set(arr)]
}

13. 浅拷贝

// Object.assign
let a = {a: 100, b: 200}
let b = Object.assign({}, a);// 展开运算符
let a = {a: 100, b: 200}
let b = {...a}// slice
let a = {a: 100, b: 200}
let b = a.slice()// concat
let a = {a: 100, b: 200}
let b = [].concat(a)

14. sleep 函数

function sleep = (time) => {return new Promise(resolve => setTimeout(resolve, time) 
}// 使用
sleep(1000).then(() => {console.log("sleep函数执行完毕")
})------- 同步--------
async function output() {let out = await sleep(1000);console.log("sleep函数执行完毕")
}
output()

15. 发布订阅

class EventEmitter {constructor() {this.events = {};}on(name, handler){this.events[name] = this.events[name] || [];this.events[name].push(handler);}emit(name, ...args) {if (!this.events[name]) throw new Error('该事件未注册');this.events[name].forEach(fn => fn.call(this, ...args));}off(name, handler) {if (!this.events[name]) throw new Error('该事件未注册');if (!handler) {delete this.events[name];} else {this.events[name] = this.events[name].filter(fn => fn !== handler);}}once(name, handler) {function fn(...args) {handler.call(this, ...args);this.off(name, fn);}this.on(name, fn);}
}

16. ajax封装

function ajax (url, method, postData) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open(method, url);xhr.setRequestHeader("Content-Type", "application/json");xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {resolve(JSON.parse(xhr.responseText));} else {reject(new Error(xhr.responseText));}}}method === 'GET' ? xhr.send() : xhr.send(JSON.stringify(postData));});
}

16. setTimeout 实现 setInterval

function setInterval(fn, time) {function interval() {fn();setTimeout(interval, time);}return setTimeout(interval, time);
}

17. setInterval 实现 setTimeout

const setTimeout = (fn, time) => {const timer = setInterval(() => {fn();clearInterval(timer);}, time);return timer;
}

18. 解析 URL Params

// 1.传统方式，查找location.search
function query(name) {const search = location.search.substring(1);const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i');const res = search.match(reg);return res ? res[2] : null;
}
// 2.新api，URLSearchParams
function query(name) {const p = new URLSearchParams(location.search);return p.get(name);
}

19. 对象扁平化

function isObject(val) {return typeof val === "object" && val !== null;
}
function flatten(obj) {if (!isObject(obj)) return obj;const res = {};function dfs(cur, prefix) {if (isObject(cur)) {if (Array.isArray(cur)) {cur.forEach((item, index) => {dfs(item, `${prefix}[${index}]`);});} else {for (let key in cur) {dfs(cur[key], `${prefix}${prefix ? "." : ""}${key}`);}}} else {res[prefix] = cur;}};dfs(obj, '');return res;
}
// 测试
const obj = {a: {b: 1,c: 2,d: {e: 5}},b: [1, 3, {a: 2, b: 3}],c: 3
};
flatten(obj);

20. 函数柯里化

// 1 只能传被柯里化函数形参的个数，多少都不行
function currying(fn, ...args) {const length = fn.length;return function(...newArgs) {const allArgs = [...args, ...newArgs];if (allArgs.length < length) {return currying.call(this, fn, ...allArgs);} else {return fn.apply(this, allArgs);}}
}
const add = (a, b, c) => a + b + c;
const addCurrying = currying(add);
console.log(addCurrying(1)(2)(3));
console.log(addCurrying(1,2)(3));
console.log(addCurrying(1)(2,3));
console.log(addCurrying(1,2,3));// 2 参数长度不固定，最后需要手动调用一次
function currying(fn, ...args) {let allArgs = [...args];return function temp(...newArgs) {if (newArgs.length) {allArgs = [...allArgs, ...newArgs];return temp;} else {const res = fn.apply(this, allArgs);allArgs = [...args];return res;}}
}
const add = (...args) => args.reduce((a, b) => a + b);
const addCurrying = currying(add);
console.log(addCurrying(1)(2)(3)(4,5)());
console.log(addCurrying(1)(2)(3,4,5)());
console.log(addCurrying(1)(2,3,4,5)());

21. compose

function compose(...fns) {if (!fns.length) return v => v;if (fns.length === 1) return fns[0];return fns.reduce((pre, cur) => (...args) => pre(cur(...args)));
}
function compose(...fns) {if (!fns.length) return v => v;if (fns.length === 1) return fns[0];return fns.reduce((pre, cur) => {return (...args) => {return pre(cur(...args));}});
}
// 使用
function fn1(x) {return x + 1;
}
function fn2(x) {return x + 2;
}
function fn3(x) {return x + 3;
}
function fn4(x) {return x + 4;
}
const a = compose(fn1, fn2, fn3, fn4); // a = (...args) => fn1(fn2(fn3(fn4(...args))))
console.log(a(1)); // 1+4+3+2+1=11