JavaScript手撕前端面试题：事件委托 | 判断URL是否合法 | 全排列
Posted 海底烧烤店ai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript手撕前端面试题：事件委托 | 判断URL是否合法 | 全排列相关的知识，希望对你有一定的参考价值。
🖥️ NodeJS专栏：Node.js从入门到精通
🖥️ 博主的前端之路（源创征文一等奖作品）：前端之行，任重道远（来自大三学长的万字自述）
🖥️ TypeScript知识总结：TypeScript从入门到精通（十万字超详细知识点总结）
🧑💼个人简介：大三学生，一个不甘平庸的平凡人🍬
👉 你的一键三连是我更新的最大动力❤️！
🏆分享博主自用牛客网🏆：一个非常全面的面试刷题求职网站，点击跳转🍬
文章目录
前言
向大家推荐一款博主一直在用的面试刷题求职网站：牛客网
牛客网不仅具有公司真题、专项练习、面试题库、在线编程等功能，还具有非常强大的AI模拟面试功能，简直是求职者的福音！
牛客网里的题库非常全面的，无论你是前端还是后端，是想要备考还是准备面试又或者是想要提高自己，你都能在牛客网上找到适合自己的题，赶快点击链接去注册登录吧：点击进入牛客网
| 牛客网 | 牛客网 |
|---|---|
 |  |
本篇文章所有示例参考自牛客网题库/在线编程/JS篇。
1、事件委托
效果演示
要求
补全javascript代码，要求如下：
- 给"
ul"标签添加点击事件 - 当点击某"
li"标签时，该标签内容拼接".“符号。如：某"li"标签被点击时，该标签内容为”.."
手撕代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件委托</title>
</head>
<body>
<ul>
<li>.</li>
<li>.</li>
<li>.</li>
</ul>
<script type="text/javascript">
// 补全代码
const ul = document.getElementsByTagName('ul')[0]
ul.onclick = function (e)
const tar = (e || window.event).target
// 如果点击的对象的名称是li
// localName 获取标签名
if (tar.localName === 'li')
tar.innerHTML = tar.innerHTML + '.'
</script>
</body>
</html>
这道题挺简单的，事件委托的原理实际就是利用了事件冒泡的机制。
事件冒泡：在一个对象上触发某类事件（比如单击click事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件就会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器）
在实际开发中，使用事件委托统一由父类捕捉并处理事件，这样可以减少子类事件的重复定义。
2、判断URL是否合法
要求
补全JavaScript代码，要求以Boolean的形式返回字符串参数是否为合法的URL格式。
注意：协议仅为HTTP(S)
手撕代码
const _isUrl = url =>
// 补全代码
let reg = /^((https|http):\\/\\/)?(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\\.)+([A-Za-z]2,6)(:\\d+)?(\\/.*)?(\\?.*)?(#.*)?$/g;
return reg.test(url)
这题就是考察了正则的应用，运用了大量的正则知识，包括：
^代表开头[A-Za-z0-9]表示匹配大小写字母和数字\\/表示匹配/，因为在正则里/有其它含义，所以要匹配/需要在前面使用\\对其进行转义?等价于0,1，表示出现一次或者不出现+表示出现的次数至少为1|（管道符），是或的意思，表示匹配|两边内容的其中任何之一\\.表示匹配.，与/一样，要匹配.需要在前面使用\\对其进行转义n,m表示出现n-m次\\d匹配数字.就是[^\\n\\r\\u2028\\u2029]，是通配符，表示几乎任意字符*表示出现次数为0次或者多次.*就是匹配任何多个任意字符$代表结尾g代表全局匹配
合法的URL格式如下：
- 协议部分
http(s)可选: 表示为((https|http):\\/\\/)? - 域名部分 ：表示为
(([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、#dom：表示为(\\?.*)?和(#.*)?
3、全排列
要求
补全JavaScript代码，要求以数组的形式返回字符串参数的所有排列组合。
注意：
- 字符串参数中的字符无重复且仅包含小写字母
- 返回的排列组合数组不区分顺序
示例：
输入：_permute('abc')
输出：['abc','acb','bac','bca','cab','cba']
手撕代码
全排列是比较常见的算法之一，解法有很多，这里给大家提供一个很巧妙的解法：
const _permute = string =>
// 补全代
const res = []; // 结果数组
function search(str)
console.log('1', 'str=' + str);
// 如果长度相等了就存放到结果数组中
if (str.length === string.length)
res.push(str)
// 遍历string
for (let char of string)
console.log('2', 'str=' + str, 'char=' + char);
// 如果str内不含char，就使用str+char开始递归
if (str.indexOf(char) < 0)
search(str + char)
search('')
return res;
整体思路就是运用循环加递归，但这个过程中涉及到了JavaScript中循环的执行机制，我们以执行console.log(_permute('ab'));为例查看控制台打印结果：
search函数中的for循环执行次数与string参数的长度相等，此时传递的string参数为ab，长度为2，即search函数中的for循环会执行两次。
这里需要注意的就是：for循环中执行的递归（再次调用search函数）并不会中断当前的for循环，只会将还未执行的循环暂且搁置，等到系统空闲时这些搁置的循环才会开始执行（ javascript 引擎在同一时刻只能处理一个任务，即单线程），具体过程见下方图解：
结语
这篇文章的所有内容都出自于牛客网的JS篇题库：
牛客网的JS题库非常贴合实际的，在写的过程查漏补缺能收获了很多，强烈将牛客网推荐给大家！
如果本篇文章对你有所帮助，还请客官一件四连！❤️
手撕前端面试题（Javascript~事件委托数组去重合法的URL快速排序js中哪些操作会造成内存泄漏......
前端的那些基本标签
html页面的骨架，相当于人的骨头，只有骨头是不是看着有点瘆人，只有HTML也是如此。
css,相当于把骨架修饰起来，相当于人的皮肉。
js(javascripts),动起来，相当于人的血液，大脑等一切能使人动起来的器官或者其他的。
在刷题之前先介绍一下牛客。Leetcode有的刷题牛客都有，除此之外牛客里面还有招聘（社招和校招）、一些上岸大厂的大佬的面试经验。
牛客是可以伴随一生的编程软件（完全免费），从学校到社会工作，时时刻刻你都可以用到，感兴趣的可以去注册试试可以伴随一生的刷题app
刷题页面，功能完善，短时间坚持可看效果。
查看出现此处，筛选定制，查询指定大厂出现频率
首页功能强悍，完全免费
🍓🍓事件委托
问题 1:
请补全JavaScript代码，要求如下：
1、给"ul"标签添加点击事件
2、 当点击某"li"标签时，该标签内容拼接".“符号。如：某"li"标签被点击时，该标签内容为”…"
注意：必须使用DOM0级标准事件（onclick）
解答：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<ul >
<li>.</li>
<li>.</li>
<li>.</li>
</ul>
<script type="text/javascript">
// 补全代码
let ul = document.querySelector('ul');
ul.onclick = function(event)
let currentTarget = event.target;
if(currentTarget.tagName.toLowerCase() === 'li')
currentTarget.innerText += '.'
</script>
</body>
</html>
总结：
🥭🥭1、这题主要考点是点击事件、事件捕获、事件冒泡。
🥭🥭2、详细步骤:
1）、给 ul 标签添加点击事件
2）、在点击事件函数中获取到点击事件“event”
3）、判断触发该点击事件的“event”是否为 li 标签
4）、如果是li 标签触发点击事件则修改标签内容，否则 不修改标签内容
🍓🍓数组去重
问题 2:
请补全JavaScript代码，要求去除数组参数中的重复数字项并返回该数组。
注意：数组元素仅包含数字，无需考虑非数字情况
示例1
输入：
_deleteRepeat([-1,1,2,2])
输出：
[-1,1,2]
解答：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
const _deleteRepeat = array =>
// 补全代码
return Array.from(new Set(array));
</script>
</body>
</html>
总结：
🥭🥭1、这里所选择的方法是一个最简单的方法，使用了自带的set方法去重。
🥭🥭2、除了上面一种方法，还有一种很常用的方法。详细步骤：
1）建立一个新的空数组。
2）遍历数组元素，放入前进行indexOf判断在不在新建的数组中。
3）要是在就进行下一个元素判断，要是不在就添加到新的数组当中。
indexOf用法：
使用indexOf方法判断元素是否在数组中。注：如果结果为-1，表示没找到指定的元素
🥭🥭3、 includes() 方法也可以用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。
《《js 中 includes和indexOf的区别》》
🍎🍎区别1:
includes用来判断一个数组是否包含指定的值，包含返回ture，否则为false;
indexOf返回在数组中存在指定值的第一个索引，不存在返回-1
const arr = ['a','b']
console.log(arr.includes('a'))// true
console.log(arr.indexOf('a'))// 0
🍎🍎区别2:
includes可以判断有NaN的元素，indexOf不能
const arr = ['a','b',NaN]
console.log(arr.includes(NaN))// true
console.log(arr.indexOf(NaN))// -1
总而言之， includes()通用范围更广。
🍓🍓合法的URL
问题 3：
请补全JavaScript代码，要求以Boolean的形式返回字符串参数是否为合法的URL格式。
注意：协议仅为HTTP(S)
解答：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
const _isUrl = url =>
// 补全代码
return url.split(':')[0] == "https" ;
</script>
</body>
</html>
总结：
🥭🥭1、使用分隔符split。url.split(‘:’)[0] == “https”; 举个例子吧。
url=https:// www.baidu.com
url.split(':')[0] = "https"
url.split(':')[1] = "// www.baidu.com"
算是偷懒了吧。除了split，还有刚刚学习的includes方法可以偷懒，哈哈
return url.includes(“https”);如果url中存在https则返回true,否则返回false。
当然，正则匹配也是一个不错的偷懒方法，但是前提你需要不讨厌他
🍓🍓快速排序
问题 4：
请补全JavaScript代码，要求将数组参数中的数字从小到大进行排序并返回该数组。
注意：
1、数组元素仅包含数字
2、请优先使用快速排序方法
示例1 输入： _quickSort([0,-1,1,-2,2]) 复制 输出： [-2,-1,0,1,2]
解答：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
const _quickSort = array =>
// 补全代码
let arr=[];
let Data1=array[0];
array.forEach(arrData=>
if(Data1<arrData)
arr.push(arrData);
else
arr.unshift(arrData);
)
return arr;
console.log(_quickSort([0, -1, 1, -2, 2, -3, -9, 9]));
</script>
</body>
</html>
总结：
🥭🥭1、一第一个数当作比较对象，确认后面的数放在那里，完成排序。
🥭🥭2、主要是利用了push()方法和unshift()方法。
🥭🥭3、其实更简单的方法是直接使用js里面的sort方法，return array.sort()
push()、shift()与pop()、unshift()的区别
🍎🍎1)、push()是用来在数组末端添加项，shift()在移除数组的第一个项。
🍎🍎2)、pop()在数组末端移除项，unshift()在数组前端添加项。
🍎🍎3)、push(),unshift()在推入多个项时，各个项之间的顺序不变。
🍎🍎4)、push(),unshift()将数组的长度+1并且返回的是数组的长度；pop(),shift()将数组length-1并返回的是移除的项
🍓🍓全排列
问题 5：
请补全JavaScript代码，要求以数组的形式返回字符串参数的所有排列组合。
注意：
1、字符串参数中的字符无重复且仅包含小写字母
2、 返回的排列组合数组不区分顺序
示例1
输入：
_permute('abc')
输出：
['abc','acb','bac','bca','cab','cba']
解答：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
const _permute = string =>
// 补全代码
if(string.length === 1)
return [string]
const results = []
for(let s of string)
const arr = string.split('').filter(str =>str !== s)
_permute(arr.join('')).forEach(item =>
results.push(s + item)
)
return results
</script>
</body>
</html>
总结：
🥭🥭1、除了上面之外还有很多种方法。例如
const _permute = string =>
// 补全代码
const res = [];
const backtrace = path =>
if(path.length == string.length)
res.push(path);
return;
for(const item of string)
if(path.includes(item)) continue;
backtrace(path + item);
;
backtrace('');
return res;
🍓🍓js中哪些操作会造成内存泄漏?
🥭🥭1.意外的全局变量
由于我们使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。
🥭🥭2.被遗忘的计时器或回调函数。
当我们设置了setinterval定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。
🥭🥭3.脱离DOM的引用
我们获取一个DOM元素的引用，而后面这个元素被删除，由于我们一直保留了对这个元素的引用，所以它也无法被回收。
🥭🥭4.闭包
不合理的使用闭包，从而导致某些变量─直被留在内存当中。
看着是不是感觉手有点痒痒的了。那就来注册下自己试试吧，试试才知道好不好，试试才知道适不适合自己。就算最后没用这款软件那也尝试过，不后悔。
可以伴随一生的编程软件（完全免费），从学校到社会工作，时时刻刻你都可以用到，感兴趣的可以去注册试试可以伴随程序员一生的app
觉得有用的可以给个三连，关注一波！！！带你玩转前端
以上是关于JavaScript手撕前端面试题：事件委托 | 判断URL是否合法 | 全排列的主要内容，如果未能解决你的问题，请参考以下文章