前端面试手撕题
事件委托
描述
请补全JavaScript代码，要求如下：
给"ul"标签添加点击事件
当点击某"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"> // 补全代码 </script> </body> </html>
我的解答:
document.querySelector('ul').onclick = function(event) { event.target.innerText += '.' }
解析:
本题考的就是基础知识，target表示当前触发的事件,通过选择父元素ul,然后进行事件代理，便得出了答案
数组去重
描述
请补全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 => { // 补全代码 } </script> </body> </html>
我的解答:
<script type="text/javascript"> const _deleteRepeat = array => { // 补全代码 return [...new Set(array)] } </script>
解析:
这道题可以说是完全白给，es6中的set集合即可以轻松解决，set集合具有自动去重的功能,es6知识详见es6知识总结
快速排序
描述
请补全JavaScript代码，要求将数组参数中的数字从小到大进行排序并返回该数组。
注意：1. 数组元素仅包含数字
2. 请优先使用快速排序方法
示例:
输入 : _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 => { // 补全代码 } </script> </body> </html>
我的解答:
<script type="text/javascript"> const _quickSort = array => { // 补全代码 array.sort((a,b)=>{ return a-b }) return array } </script>
解析:
这道题其实难度也不大，数组中的sort方法进行排序，但是sort方法默认是按照unicode码顺序排列，这里传入一个函数，实现从小到大排序，sort排序详见文章js中sort()方法的详细讲解
小结
在学习知识的同时，我们必须要时刻回来做一些温习，这样的话才能进步，通过练题可以帮助我们巩固知识，牛客网值得大家去刷题来提升自己！
