![](https://img-blog.csdnimg.cn/20190819124959311.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
面试直通车
文章平均质量分 64
一天一道面试题,以问促学,每天进步
gxhlh
智慧的获取,能力的提升,创造力的领悟,是基于长期的投资回报周期。
展开
-
浏览器中的事件循环(Event loop)
无论在工作中,还是在面试题中,Eventloop(事件循环)都十分重要,浏览器与nodejs中事件循环略有差异,本文只讨论浏览器中的事件循环。原创 2022-07-14 19:14:22 · 1230 阅读 · 0 评论 -
如何实现一个节流函数?
// 节流函数.jsvar count = 1;var container = document.getElementById('container');function getUserAction(e) { console.log(this) // this 应该指向div console.log(e) // this 不应该打印undefined container.innerHTML = count++;};// container.onmousemov原创 2021-11-06 15:17:31 · 1192 阅读 · 0 评论 -
JavaScript 判断一组字符串是否为回文数
判断回文数下面是维基百科对回文的解释。回文是正反都能读通的单词、词组、数或一系列字符的序列,例如 madam或 racecar。最简单的方式是将字符串反向排列并检查它和原字符串是否相同function isPalindrome(x) { let lowerString = x.toString().toLowerCase().split(''); let arr = []; lowerString.forEach(item => { arr.unsh原创 2021-11-05 23:21:43 · 603 阅读 · 0 评论 -
如何实现一个防抖函数?
在前端开发中会遇到一些频繁的事件触发,比如:window 的 resize、scrollmousedown、mousemovekeyup、keydown……为此,我们举个示例代码来了解事件如何频繁的触发:<!DOCTYPE html><html lang="zh-cmn-Hans"><head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" conte原创 2021-11-05 22:25:17 · 1711 阅读 · 1 评论 -
JavaScript 数组去重
原始方法双层for 循环 – 兼容性好// 测试数组 let arr = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 3, 4, 4, 5, 5, 5]function unique_1(array) { let res = []; // 存储结果 // 第一层 for 循环将取出数组中的每一个值 for (let i = 0; i < array.length; i++) { // 第二层for 循环将 i 与储存结果的数原创 2021-10-21 19:36:04 · 74 阅读 · 0 评论 -
JavaScript 判断一个数是否是素数
判断素数 – 效率极低function isPrime1(num) { if(num == 1 || num == 2) { return true; } for (let i = 1; i < num; i++) { if(num % i == 0){ return false; } return true; }}console.log("isPrime1",isPrime1(2))判断素数优原创 2021-10-21 19:52:16 · 765 阅读 · 0 评论 -
JavaScript 获取N以内的所有素数
获取N以内的所有素数function prime1(n) { let prim = []; if(n === 1){return [1]} if(n === 2){return [1,2]} for (let i = 1; i < n; i++) { let isPrime = true; // 判断当前i 值是否为素数 for (let j = 2; j < i; j++) { //判断原创 2021-10-21 19:58:26 · 1358 阅读 · 0 评论 -
JavaScript 专项练习(三)
1、写出程序运行的结果()var k = 0;for(var i=0,j=0;i<10,j<6;i++,j++){ k += i + j;}console.log(k)答案:30,解析:考察知识点:逗号表达式只有最后一项是有效的,即对于i<10,j<6; 来说,判断循环是否结束的是j < 6;而对于 j<6,i<10; 来说,判断循环是否结束的是 i < 10。k = 0+0=0 1+1+0=2 2+2+2=6 3+3+6=12 4+4原创 2021-10-11 20:09:53 · 1856 阅读 · 0 评论 -
JavaScript专项练习(二)
1、以下代码执行后,控制台的输出是:var a = 10;function a(){}console.log(typeof a)答案:"number",解析:函数提升优先级高于变量提升,所以代码等价于function a(){}var a;a = 10;console.log(typeof a)那如果这里使用关键词let呢,代码变为let a = 10function a () {}console.log(typeof a)这里明显会报错。前面提到,函数声明会优先于变量声明原创 2021-10-10 18:22:03 · 2854 阅读 · 0 评论 -
JavaScript 专项练习
1、下列正确定义函数的是 function foo() {} Function foo() {} var foo = new Function() {} var foo = new function() {}答案:A,解析:A:function foo() {}是普通的函数声明B:Function应是小写CD:是使用了Function构造函数,正确写法:var foo = new Function();2、下列对于JavaScript说法错误的是? JavaScript是原创 2021-10-09 21:47:49 · 4465 阅读 · 0 评论 -
js中的new()到底做了些什么?
js中的new()到底做了些什么?要创建 Person 的新实例,必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4个步骤:(1) 创建一个新对象;(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象) ;(3) 执行构造函数中的代码(为这个新对象添加属性) ;(4) 返回新对象。new 操作符在有上面的基础概念的介绍之后,在加上new操作符,我...转载 2019-10-29 22:40:25 · 304 阅读 · 0 评论 -
["1", "2", "3"].map(parseInt) 答案是多少?
[“1”, “2”, “3”].map(parseInt) 答案是多少?parseInt() 函数能解析一个字符串,并返回一个整数,需要两个参数 (val, radix),其中 radix 表示要解析的数字的基数。【该值介于 2 ~ 36 之间,并且字符串中的数字不能大于radix才能正确返回数字结果值】;但此处 map 传了 3 个 (element, index, array),我们重写...原创 2019-10-26 23:15:40 · 965 阅读 · 0 评论 -
javascript创建对象的几种方式?
javascript创建对象的几种方式? javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用JSON;但写法有很多种,也能混合使用。 1、对象字面量的方式 person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"}; 2、用function来模拟无参的构造函数 fun...原创 2019-10-20 21:50:24 · 246 阅读 · 0 评论 -
null,undefined 的区别?
null,undefined 的区别? null 表示一个对象是“没有值”的值,也就是值为“空”; undefined 表示一个变量声明了没有初始化(赋值); undefined不是一个有效的JSON,而null是; undefined的类型(typeof)是undefined; null的类型(typeof)是object; Javascript将未赋值的变量默认值设为u...原创 2019-10-19 22:03:09 · 280 阅读 · 0 评论 -
eval是做什么的?什么是window对象? 什么是document对象?
eval是做什么的?它的功能是把对应的字符串解析成JS代码并运行;应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)。由JSON字符串转换为JSON对象的时候可以用eval,var obj =eval(’(’+ str +’)’);参考文章:Web前端面试指导(三十七):eval是做什么的?什么是window对象? 什么是document对象?...原创 2019-10-20 10:18:07 · 605 阅读 · 0 评论 -
JavaScript继承的几种实现方式?
Javascript如何实现继承?1、构造继承2、原型继承3、实例继承4、拷贝继承原型prototype机制或apply和call方法去实现较简单,建议使用构造函数与原型混合方式。 function Parent(){ this.name = 'wang'; ...原创 2019-10-19 20:08:33 · 533 阅读 · 0 评论 -
如何实现数组的随机排序?
如何将字符串转化为数字,例如’12.3b’?parseFloat(‘12.3b’);正则表达式,‘12.3b’.match(/(\d)+(.)?(\d)+/g)[0] * 1, 但是这个不太靠谱,提供一种思路而已。如何将浮点数点左边的数每三位添加一个逗号,如12000000.11转化为『12,000,000.11』? function commafy(num){ ...原创 2019-10-19 20:02:08 · 1509 阅读 · 0 评论 -
JavaScript原型,原型链, 内存图
JavaScript原型,原型链 ? 有什么特点?每个对象都会在其内部初始化一个属性,就是prototype(原型),当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属性,这个prototype又会有自己的prototype,于是就这样一直找下去,也就是我们平时所说的原型链的概念。关系: instance.constructor.prototy...原创 2019-10-17 13:51:12 · 479 阅读 · 0 评论 -
介绍js的基本数据类型、哪些内置对象、书写基本规范
介绍js的基本数据类型。Undefined、Null、Boolean、Number、String、 ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 )介绍js有哪些内置对象?Object 是 JavaScript 中所有对象的父对象数据封装类对象:Object、Array、Boolean、Number 和 String其他对象:Function、Ar...原创 2019-10-17 01:15:16 · 338 阅读 · 0 评论 -
响应式设计的基本原则(二十)
响应式设计的基本原则创建响应式设计令人胆战心惊:它由许多移动的部分构成,而且经常不像你期望中一样排列;你在设计的时候还要惦记着所有不同的视口(viewports)。通过遵守这些基本原则,你可以创建出更加健壮和可预测的响应式设计。原则 1:保持简单的视口当初刚实施视口元标记(viewport meta tag)的标准时,基本常识是你必须添加各种值,从而阻止用户缩放,以及设置最大和最小的屏幕尺寸...转载 2019-10-13 23:04:37 · 660 阅读 · 0 评论 -
什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么?(十九)
什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么?页面的设计和开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、css media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能...原创 2019-10-13 23:01:14 · 1103 阅读 · 0 评论 -
style标签写在body后与body前有什么区别?(十八)
style标签写在body后与body前有什么区别?从有html标准以来到目前为止(2017年5月),标准一直是规定style元素不应出现在body元素中。(除非style处于template元素中,因为template中的内容是不直接在dom树中的。另外曾经如果style元素出现在body元素,最终效果和style元素出现在head里是一样的。但是可能引起FOUC、重绘或重新布局。注意,根据当...原创 2019-10-12 22:40:52 · 6868 阅读 · 0 评论 -
script 标签放在head内和body内有什么区别(十七)
< script> 标签放在head内和body内有什么区别加载的顺序不一样,你可以把HTML看成从上往下加载的。例如在网速慢的情况下把js代码放在body底部用户会先看到网页结构,等js加载完成后才出现特效区别简述:在HTML body部分中的JavaScripts会在页面加载的时候被执行。在HTML head部分中的JavaScripts会在被调用的时候才执行,但是在主页...原创 2019-10-10 00:32:29 · 1644 阅读 · 1 评论 -
请解释一下为什么需要清除浮动?清除浮动的方式,原理(十四)
请解释一下为什么需要清除浮动?清除浮动的方式清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,而高度的塌陷使我们页面后面的布局不能正常显示。1、父级div定义height;2、父级div 也一起浮动;3、常规的使用一个class; .clearfix::before, .clearfix::after { content: " "; dis...原创 2019-10-06 22:49:56 · 2995 阅读 · 0 评论 -
absolute,visibility, position(十四)
absolute的containing block(容器块)计算方式跟正常流有什么不同?无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断:1、若此元素为 inline 元素,则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外...原创 2019-10-05 14:57:47 · 286 阅读 · 0 评论 -
li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?(十三)
li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?引起这种空白间隔的原因:浏览器的默认行为是把inline元素间的空白字符(空格换行tab)渲染成一个空格,也就是我们上面的代码换行后会产生换行字符,而它会变成一个空格,当然空格就占用一个字符的宽度。解决方案:方法一: 既然是因为换行导致的,那就可以将< li>代码全部写在一排,如下<div class=...原创 2019-10-05 14:48:18 · 2031 阅读 · 0 评论 -
为什么要初始化CSS样式?css定义的权重(十二)
为什么要初始化CSS样式。因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。最简单的初始化方法: * {padding: 0; margin: 0;} (强烈不建议)淘宝的样式初始化代码: body, h1, h2,...原创 2019-10-05 14:33:53 · 239 阅读 · 0 评论 -
经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?(十一)
经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.浏览器默认的margin和padding不同。 解决方案是加一个全局的{margin:0;padding:0;}来统一。IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。浮...原创 2019-10-04 12:15:02 · 394 阅读 · 0 评论 -
display,position的值relative和absolute定位原点,用纯CSS创建一个三角形,一个满屏 品 字布局 如何设计?,css多列等高如何实现?(十)
display有哪些值?说明他们的作用。值作用block块类型。默认宽度为父元素宽度,可设置宽高,换行显示。none元素不显示,并从文档流中移除。inline行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。inline-block默认宽度为内容宽度,可以设置宽高,同行显示。list-item象块类型元素一样显示,并添加样式列表标记。...原创 2019-10-03 20:56:58 · 282 阅读 · 0 评论 -
CSS3新增伪类,CSS3有哪些新特性,弹性盒布局模型,如何居中div?(九)
CSS3新增伪类有那些?举例:p:first-of-type 选择属于其父元素的首个 < p> 元素的每个 < p> 元素。p:last-of-type 选择属于其父元素的最后 < p> 元素的每个 < p> 元素。p:only-of-type 选择属于其父元素唯一的 < p> 元素的每个 < p> 元素。...原创 2019-10-03 20:39:27 · 607 阅读 · 0 评论 -
CSS盒子模型,CSS选择符,CSS优先级算法(八)
介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?(1)有两种, IE 盒子模型、W3C 盒子模型;(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);(3)区 别: IE的content部分把 border 和 padding计算了进去;CSS选择符有哪些?哪些属性可以继承?id选择器( # myid)...原创 2019-10-02 19:43:16 · 376 阅读 · 0 评论 -
HTML相关问答(七)
页面可见性(Page Visibility API) 可以有哪些用途?通过 visibilityState 的值检测页面当前是否可见,以及打开网页的时间等;在页面被切换到其他后台进程的时候,自动暂停音乐或视频的播放;如何在页面上实现一个圆形的可点击区域?map+area或者svgborder-radius纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等实现不使用 ...原创 2019-10-02 19:37:48 · 263 阅读 · 0 评论 -
如何实现浏览器内多个标签页之间的通信?(六)
如何实现浏览器内多个标签页之间的通信? (阿里)WebSocket、SharedWorker;也可以调用localstorge、cookies等本地存储方式;localstorge另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,我们通过监听事件,控制它的值来进行页面信息通信;注意quirks:Safari 在无痕模式下设置localstorge值时会抛出 ...原创 2019-09-29 09:40:14 · 729 阅读 · 0 评论 -
iframe缺点,Label作用,form关闭自动完成功能(五)
请描述一下 cookies,sessionStorage 和 localStorage 的区别?cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。...原创 2019-09-29 09:35:58 · 305 阅读 · 0 评论 -
HTML5相关问答 (四)
html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。绘画 canvas;用于媒介回放的 video 和 audio 元素;本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage ...原创 2019-09-28 00:22:50 · 205 阅读 · 0 评论 -
浏览器内核问题(三)
介绍一下你对浏览器内核的理解?主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显...原创 2019-09-26 23:29:55 · 158 阅读 · 0 评论 -
行内,块级,空元素?页面导入样式时,使用link和@import有什么区别?(二)
行内元素有哪些?块级元素有哪些? 空(void)元素有那些?首先:CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,如div的display默认值为“block”,则为“块级”元素;span默认display属性值为“inline”,是“行内”元素。(1)行内元素有:a b span img input select strong(强调的语气...原创 2019-09-25 19:53:05 · 286 阅读 · 0 评论 -
DOCTYPE 的作用 (一)
Doctype作用?标准模式与兼容模式各有什么区别?(1)、<!DOCTYPE>声明位于HTML文档中的第一行,处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。(2)、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无...原创 2019-09-24 23:08:09 · 285 阅读 · 0 评论