2024前端面试之JavaScript手写题（三）

let arr = [2,3,454,34,324,32]

arr.sort(randomSort)

function randomSort(a, b) {

return Math.random() > 0.5 ? -1 : 1;

}

2.写一个通用的事件侦听器函数。

---

const EventUtils = {

// 视能力分别使用dom0||dom2||IE方式 来绑定事件

// 添加事件

addEvent: function(element, type, handler) {

if (element.addEventListener) {

element.addEventListener(type, handler, false);

} else if (element.attachEvent) {

element.attachEvent(“on” + type, handler);

} else {

element[“on” + type] = handler;

}

},

// 移除事件

removeEvent: function(element, type, handler) {

if (element.removeEventListener) {

element.removeEventListener(type, handler, false);

} else if (element.detachEvent) {

element.detachEvent(“on” + type, handler);

} else {

element[“on” + type] = null;

}

},

// 获取事件目标

getTarget: function(event) {

return event.target || event.srcElement;

},

// 获取 event 对象的引用，取到事件的所有信息，确保随时能使用 event

getEvent: function(event) {

return event || window.event;

},

// 阻止事件（主要是事件冒泡，因为 IE 不支持事件捕获）

stopPropagation: function(event) {

if (event.stopPropagation) {

event.stopPropagation();

} else {

event.cancelBubble = true;

}

},

// 取消事件的默认行为

preventDefault: function(event) {

if (event.preventDefault) {

event.preventDefault();

} else {

event.returnValue = false;

}

}

};

3.使用迭代的方式实现 flatten 函数。

---

var arr = [1, 2, 3, [4, 5], [6, [7, [8]]]]

/** * 使用递归的方式处理 * wrap 内保

存结果 ret * 返回一个递归函数 **/

function wrap() {

var ret = [];

return function flat(a) {

for (var item of

a) {

if (item.constructor === Array) {

ret.concat(flat(item))

} else {

ret.push(item)

}

}

return ret

}

}

console.log(wrap()(arr));

4.怎么实现一个sleep

---

sleep函数作用是让线程休眠，等到指定时间在重新唤起。

function sleep(delay) {

var start = (new Date()).getTime();

while ((new Date()).getTime() - start < delay) {

continue;

}

}

function test() {

console.log(‘111’);

sleep(2000);

console.log(‘222’);

}

test()

5.实现正则切分千分位（10000 => 10,000）

---

//无小数点

let num1 = ‘1321434322222’

num1.replace(/(\d)(?=(\d{3})+$)/g,‘$1,’)

//有小数点

let num2 = ‘342243242322.3432423’

num2.replace(/(\d)(?=(\d{3})+.)/g,‘$1,’)

复制代码

27.对象数组去重

输入:

[{a:1,b:2,c:3},{b:2,c:3,a:1},{d:2,c:2}]

输出:

[{a:1,b:2,c:3},{d:2,c:2}]

首先写一个函数把对象中的key排序，然后再转成字符串

遍历数组利用Set将转为字符串后的对象去重

function objSort(obj){

let newObj = {}

//遍历对象，并将key进行排序

Object.keys(obj).sort().map(key => {

newObj[key] = obj[key]

})

//将排序好的数组转成字符串

return JSON.stringify(newObj)

}

function unique(arr){

let set = new Set();

for(let i=0;i<arr.length;i++){

let str = objSort(arr[i])

set.add(str)

}

//将数组中的字符串转回对象

arr = […set].map(item => {

return JSON.parse(item)

})

return arr

}

6.解析 URL Params 为对象

---

let url = ‘http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled’;

parseParam(url)

/* 结果

{ user: ‘anonymous’,

id: [ 123, 456 ], // 重复出现的 key 要组装成数组，能被转成数字的就转成数字类型

city: ‘北京’, // 中文需解码

enabled: true, // 未指定值得 key 约定为 true

}

*/

function parseParam(url) {

const paramsStr = /.+?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来

const paramsArr = paramsStr.split(‘&’); // 将字符串以 & 分割后存到数组中

let paramsObj = {};

// 将 params 存到对象中

paramsArr.forEach(param => {

if (/=/.test(param)) { // 处理有 value 的参数

let [key, val] = param.split(‘=’); // 分割 key 和 value

val = decodeURIComponent(val); // 解码

val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字

if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key，则添加一个值

paramsObj[key] = [].concat(paramsObj[key], val);

} else { // 如果对象没有这个 key，创建 key 并设置值

paramsObj[key] = val;

}

} else { // 处理没有 value 的参数

paramsObj[param] = true;

}

})

return paramsObj;

}

7.模板引擎实现

---

let template = ‘我是{{name}}，年龄{{age}}，性别{{sex}}’;

let data = {

name: ‘姓名’,

age: 18

}

render(template, data); // 我是姓名，年龄18，性别undefined

复制代码

function render(template, data) {

const reg = /{{(\w+)}}/; // 模板字符串正则

if (reg.test(template)) { // 判断模板里是否有模板字符串

const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中…(img-VElOUywg-1715283540268)]

[外链图片转存中…(img-LjXyKuBB-1715283540268)]

[外链图片转存中…(img-HRxQdYhq-1715283540269)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！