草庐IT

【JavaScript】手撕前端面试题:事件委托 | 判断URL是否合法 | 全排列

海底烧烤店ai 2024-01-05 原文

🖥️ NodeJS专栏:Node.js从入门到精通
🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述)
🖥️ TypeScript知识总结:TypeScript从入门到精通(十万字超详细知识点总结)
🧑‍💼个人简介:大三学生,一个不甘平庸的平凡人🍬
👉 你的一键三连是我更新的最大动力❤️!
🏆分享博主自用牛客网🏆:一个非常全面的面试刷题求职网站,点击跳转🍬


文章目录

前言

向大家推荐一款博主一直在用的面试刷题求职网站:牛客网

牛客网不仅具有公司真题专项练习面试题库在线编程等功能,还具有非常强大的AI模拟面试功能,简直是求职者的福音!

牛客网里的题库非常全面的,无论你是前端还是后端,是想要备考还是准备面试又或者是想要提高自己,你都能在牛客网上找到适合自己的题,赶快点击链接去注册登录吧:点击进入牛客网

牛客网牛客网

本篇文章所有示例参考自牛客网题库/在线编程/JS篇

1、事件委托

效果演示

要求

补全JavaScript代码,要求如下:

  1. 给"ul"标签添加点击事件
  2. 当点击某"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)
}

这题就是考察了正则的应用,运用了大量的正则知识,包括:

  1. ^代表开头
  2. [A-Za-z0-9]表示匹配大小写字母和数字
  3. \/表示匹配/,因为在正则里/有其它含义,所以要匹配/需要在前面使用\对其进行转义
  4. ? 等价于{0,1},表示出现一次或者不出现
  5. +表示出现的次数至少为1
  6. |(管道符),是的意思,表示匹配|两边内容的其中任何之一
  7. \.表示匹配.,与/一样,要匹配.需要在前面使用\对其进行转义
  8. {n,m} 表示出现n-m次
  9. \d匹配数字
  10. .就是[^\n\r\u2028\u2029],是通配符,表示几乎任意字符
  11. *表示出现次数为0次或者多次
  12. .*就是匹配任何多个任意字符
  13. $代表结尾
  14. g代表全局匹配

合法的URL格式如下:

  • 协议部分http(s)可选: 表示为((https|http):\/\/)?
  • 域名部分 :表示为(([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+
  • 顶级域名,如comcn等为2-6位:表示为([a-zA-Z]{2,6})
  • 端口部分:表示为(:\d+)?
  • 请求路径如/login:表示为 (\/.*)?
  • 问号传参及哈希值如?age=1#dom:表示为 (\?.*)?(#.*)?

3、全排列

要求

补全JavaScript代码,要求以数组的形式返回字符串参数的所有排列组合。
注意:

  1. 字符串参数中的字符无重复且仅包含小写字母
  2. 返回的排列组合数组不区分顺序

示例:

输入:_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 引擎在同一时刻只能处理一个任务,即单线程),具体过程见下方图解:

javascript中的事件循环机制

结语

这篇文章的所有内容都出自于牛客网的JS篇题库

牛客网的JS题库非常贴合实际的,在写的过程查漏补缺能收获了很多,强烈将牛客网推荐给大家!

如果本篇文章对你有所帮助,还请客官一件四连!❤️

基础不牢,地动山摇! 快来和博主一起来牛客网刷题巩固基础知识吧!

有关【JavaScript】手撕前端面试题:事件委托 | 判断URL是否合法 | 全排列的更多相关文章

  1. ruby-on-rails - rails : save file from URL and save it to Amazon S3 - 2

    从给定URL下载文件并立即将其上传到AmazonS3的更直接的方法是什么(+将有关文件的一些信息保存到数据库中,例如名称、大小等)?现在,我既不使用Paperclip,也不使用Carrierwave。谢谢 最佳答案 简单明了:require'open-uri'require's3'amazon=S3::Service.new(access_key_id:'KEY',secret_access_key:'KEY')bucket=amazon.buckets.find('image_storage')url='http://www.ex

  2. ruby - 如何使用 Ruby aws/s3 Gem 生成安全 URL 以从 s3 下载文件 - 2

    我正在编写一个小脚本来定位aws存储桶中的特定文件,并创建一个临时验证的url以发送给同事。(理想情况下,这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针,它似乎不符合这个标准,但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A

  3. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  4. ruby-on-rails - 如何生成传递一些自定义参数的 `link_to` URL? - 2

    我正在使用RubyonRails3.0.9,我想生成一个传递一些自定义参数的link_toURL。也就是说,有一个articles_path(www.my_web_site_name.com/articles)我想生成如下内容:link_to'Samplelinktitle',...#HereIshouldimplementthecode#=>'http://www.my_web_site_name.com/articles?param1=value1¶m2=value2&...我如何编写link_to语句“alàRubyonRailsWay”以实现该目的?如果我想通过传递一些

  5. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式? 最佳答案 您可以像这样为日期选择器提供额外的选项,而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义,我们在StackOverflow上找到一个类似的问题: https://s

  6. ruby - Rack:如何将 URL 存储为变量? - 2

    我正在编写一个简单的静态Rack应用程序。查看下面的config.ru代码:useRack::Static,:urls=>["/elements","/img","/pages","/users","/css","/js"],:root=>"archive"map'/'dorunProc.new{|env|[200,{'Content-Type'=>'text/html','Cache-Control'=>'public,max-age=6400'},File.open('archive/splash.html',File::RDONLY)]}endmap'/pages/search.

  7. ruby-on-rails - Rails - 使用/自定义 URL : '/dashboard' 指定根路径 - 2

    如何使此根路径转到:“/dashboard”而不仅仅是http://example.com?root:to=>'dashboard#index',:constraints=>lambda{|req|!req.session[:user_id].blank?} 最佳答案 您可以通过以下方式实现:root:to=>redirect('/dashboard')match'/dashboard',:to=>"dashboard#index",:constraints=>lambda{|req|!req.session[:user_id].b

  8. Hive SQL 五大经典面试题 - 2

    目录第1题连续问题分析:解法:第2题分组问题分析:解法:第3题间隔连续问题分析:解法:第4题打折日期交叉问题分析:解法:第5题同时在线问题分析:解法:第1题连续问题如下数据为蚂蚁森林中用户领取的减少碳排放量iddtlowcarbon10012021-12-1212310022021-12-124510012021-12-134310012021-12-134510012021-12-132310022021-12-144510012021-12-1423010022021-12-154510012021-12-1523.......找出连续3天及以上减少碳排放量在100以上的用户分析:遇到这类

  9. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord,它正在融化我的大脑。deletefromtablewhereid有什么想法吗?我想做的是限制表中的行数。所以,我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看,您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  10. ruby-on-rails - 使用 Dragonfly 从 URL 分配图像 - 2

    我正在使用Dragonfly在Rails3.1应用程序上处理图像。我正在努力通过url将图像分配给模型。我有一个很好的表格:{:multipart=>true}do|f|%>RemovePicture?Dragonfly的文档指出:Dragonfly提供了一个直接从url分配的访问器:@album.cover_image_url='http://some.url/file.jpg'但是当我在控制台中尝试时:=>#ruby-1.9.2-p290>picture.image_url="http://i.imgur.com/QQiMz.jpg"=>"http://i.imgur.com/QQ

随机推荐