【js】手撕前端面试题--- 事件委托 | 数组去重 | 合法的URL

✅ 作者简介：一名普通本科大三的学生，致力于提高前端开发能力
✨ 个人主页：前端小白在前进的主页
系列专栏 ： node.js学习专栏
⭐️ 个人社区 : 个人交流社区
学习格言: ☀️ 打不倒你的会使你更强！☀️
刷题网站：这段时间有许多的小伙伴在问有没有什么好的刷题网站，博主在这里给大家推荐一款刷题网站:点击访问牛客网牛客网支持多种编程语言的学习，各大互联网大厂面试真题，从基础到拔高，快来体验一下吧！

---

前言

在我们手撕前端面试题之前，先给大家介绍一下牛客网，Leetcode有的刷题牛客都有，除此之外牛客里面还有招聘（社招和校招）、一些上岸大厂的大佬的面试经验。 牛客是完全免费的，从学校到社会工作，时时刻刻你都可以用到，感兴趣的小伙伴们可以去注册试试==>一款不错的刷题软件

---

查看题目出现次数，筛选定制，查询指定大厂出现频率

---

javascript面试题

事件委托

描述:
请补全JavaScript代码，要求如下：

1. 给"ul"标签添加点击事件
2. 当点击某"li"标签时，该标签内容拼接".“符号。如：某"li"标签被点击时，该标签内容为”…"
   注意：
3. 必须使用DOM0级标准事件（onclick）

题解：

<script type="text/javascript">
            // 补全代码
            let ul = document.querySelector('ul')
            ul.onclick = (e) => {
                e.target.innerHTML += '.'
            }
</script>

第一道题，考察的就是事件委托，简单的来说，事件委托就是：父节点接受委托给子节点分配点击事件，在本道题就是给父节点ul绑定点击事件，然后通过e.target定位到我们点击此时对应的子节点，然后给子节点内容进行改动！

数组去重

描述:
请补全JavaScript代码，要求去除数组参数中的重复数字项并返回该数组。
注意：

1. 数组元素仅包含数字

示例1:

输入：_deleteRepeat([-1,1,2,2])
输出：[-1,1,2]

题解1：

<script type="text/javascript">
            const _deleteRepeat = array => {
                // 补全代码
                let set = new Set(array)
                return Array.from(set)
            }
</script>

第一种解法非常的简单，es6中的set集合自动可以去除相同的元素，但是set集合并非是数据，需要借助方法Array.from()将set集合转化为数组，然后返回出去！

题解2：

<script type="text/javascript">
            const _deleteRepeat = array => {
                // 补全代码
                let newArr = []
                array.map(item => {
                    if(newArr.indexOf(item) === -1){
                        newArr.push(item)
                    }
                })
                return newArr
            }
        </script>

第二种解法是常规性解法，就是根据indexOf()方法,判断新数组中是否涵盖遍历出来的元素，只要不涵盖，就将该元素推入到新数组中，然后将新数组返回出去即可。

合法的URL

描述:
请补全JavaScript代码，要求以Boolean的形式返回字符串参数是否为合法的URL格式。
注意：

1. 协议仅为HTTP(S)

题解：

<script type="text/javascript">
    const _isUrl = url => {
        // 补全代码
        return url.includes('https')
    }
</script>

在这里直接使用es6中数组新增的方法includes，只要包含https直接返回true，当然这里也可以使用正则表达式匹配，通过方法test()匹配正则表达式。

小结

牛客的前端面试题是由浅入深的，难度是在逐步增加，今天的三道题相对来说比较简单，牛客的难度划分做的是非常的友好，看到这里是不是对这款软件动了心？那就点击链接，注册一个牛客号，开始你的手撕面试题之路吧==>牛客刷题网