DOM 元素 e 的 e.getAttribute(propName)和 e.propName 有什么区别和联系
e.getAttribute(),是标准 DOM 操作文档元素属性的方法,具有通用性可在任意文档上使用,返回元素在源文件中设置的属性
e.propName 通常是在 HTML 文档中访问特定元素的特性,浏览器解析元素后生成对应对象(如 a 标签生成 HTMLAnchorElement),这些对象的特性会根据特定规则结合属性设置得到,对于没有对应特性的属性,只能使用 getAttribute 进行访问
e.getAttribute()返回值是源文件中设置的值,类型是字符串或者 null(有的实现返回 ””)
e.propName 返回值可能是字符串、布尔值、对象、undefined 等
大部分 attribute 与 property 是一一对应关系,修改其中一个会影响另一个,如 id,title 等属性
一些布尔属性 <input hidden/> 的检测设置需要 hasAttribute 和 removeAttribute 来完成,或者设置对应 property
像 link 中 href 属性,转换成 property 的时候需要通过转换得到完整 URL
一些 attribute 和 property 不是一一对应如:form 控件中 <input value=”hello”/> 对应的是 defaultValue,修改或设置 value property 修改的是控件当前值,setAttribute 修改 value 属性不会改变 value property
offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别
offsetWidth/offsetHeight 返回值包含 content + padding + border,效果与 e.getBoundingClientRect()相同
clientWidth/clientHeight 返回值只包含 content + padding,如果有滚动条,也不包含滚动条
scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸
1. 引起内存泄漏的操作有哪些
1. 全局变量引起 2. 闭包引起 3.dom 清空,事件未清除 4. 子元素存在引用 5. 被遗忘的计时器
递归和迭代的区别是什么,各有什么优缺点?
程序调用自身称为递归,利用变量的原值推出新值称为迭代,递归的优点 大问题转化为小问题,可以减少代码量,同时应为代码精简,可读性好,缺点就是,递归调用浪费了空间,而且递归太深容易造成堆栈的溢出。迭代的好处 就是代码运行效率好,因为时间只因循环次数增加而增加,而且没有额外的空间开销,缺点就是代码不如递归简洁
参考:深究递归和迭代的区别、联系、优缺点及实例对比「递归」和「迭代」有哪些区别?
什么是事件循环(EVENT LOOP)
我们常常说 js 是单线程的,是指 js 执行引擎是单线程的,除了这个单线程,还有一个 任务队列,在执行 js 代码的过程中,执行引擎遇到注册的延时方法,如定时器,DOM 事件,会将这些方法交给相应的浏览器模块处理,当这些延时方法有触发条件去触发的时候,这些延时方法会被添加至任务队列,而这些任务队列中的方法只有 js 的主线程空闲了才会执行,这也就是说我们常常用的定时器定的时间参数只是一个触发条件,具体多少时间后执行其实还需要看 js 主线程空闲与否【转向 Javascript 系列】从 setTimeout 说事件循环模型深入浅出 JavaScript 事件循环机制 (上) 深入浅出 JavaScript 事件循环机制 (下) 并发模型与事件循环
JavaScript 严格模式下有哪些不同?
不允许不使用 var 关键字去创建全局变量,抛出 ReferenceError
不允许对变量使用 delete 操作符,抛 ReferenceError
不可对对象的只读属性赋值,不可对对象的不可配置属性使用 delete 操作符,不可为不可拓展的对象添加属性,均抛 - – TypeError
对象属性名必须唯一
函数中不可有重名参数
在函数内部对修改参数不会反映到 arguments 中
淘汰 arguments.callee 和 arguments.caller
不可在 if 内部声明函数
抛弃 with 语句
setTimeout 和 setInterval 的区别,包含内存方面的分析?
setTimeout 表示间隔一段时间之后执行一次调用,而 setInterval 则是每间隔一段时间循环调用,直至 clearInterval 结束。内存方面,setTimeout 只需要进入一次队列,不会造成内存溢出,setInterval 因为不计算代码执行时间,有可能同时执行多次代码,导致内存溢出。JS 中 settimeout 和 setinterval 函数的区别 setTimeout() 和 setInterval() 本质区别在哪里?
如何实现懒加载?
懒加载就是根据用户的浏览需要记载内容,也就是在用户即将浏览完当前的内容时进行继续加载内容,这种技术常常用来加载图片的时候使用。我们判断用户是否即将浏览到底部之后进行在家内容 这时候可能会需要加载大量的内容,可以使用 fragment 来优化一下,因为大部分是使用滑动和滚轮来触发的,因此很有可能会不断触发,可以使用函数节流做一个优化,防止用户不断触发。
字符串截取
js 字符串截取方法有 substring、slice、substr 三个方法,substring 和 slice 都是指定截取的首尾索引值,不同的是传递负值的时候 substring 会当做 0 来处理,而 slice 传入负值的规则是 - 1 指最后一个字符,substr 方法则是第一个参数是开始截取的字符串,第二个是截取的字符数量,和 slice 类似,传入负值也是从尾部算起的。
介绍一下 ES6 的暂时性死区和块级作用域
js 设计模式
请介绍一下装饰者模式,并实现
在不改变元对象的基础上,对这个对象进行包装和拓展(包括添加属性和方法),从而使这个对象可以有更复杂的功能。
介绍一下职责链模式?
在不改变元对象的基础上,对这个对象进行包装和拓展(包括添加属性和方法),从而使这个对象可以有更复杂的功能。
详解 Javascript 十大常用设计模式
请说一下实现 jsonp 的实现思路?
jsonp 的原理是使用 script 标签来实现跨域,因为 script 标签的的 src 属性是不受同源策略的影响的,因此可以使用其来跨域。一个最简单的 jsonp 就是创建一个 script 标签,设置 src 为相应的 url,在 url 之后添加相应的 callback,格式类似于 url?callback=xxx,服务端根据我们的 callback 来返回相应的数据,类似于 res.send(req.query.callback + ‘(‘+ data + ‘)’),这样就实现了一个最简单的 jsonpjsonp 的原理与实现 fetch-jsonp 源码
如何实现一个双向数据绑定?
如何实现一个前端模板引擎?
请简要介绍一下 PWA?
请介绍一下你所了解的函数式编程?
将静态资源放在其他域名的目的是什么?
这样做的主要目的是在请求这些静态资源的时候不会发送 cookie,节省了流量,需要注意的是 cookie 是会发送给子域名的(二级域名),所以这些静态资源是不会放在子域名下的,而是单独放在一个单独的主域名下。同时还有一个原因就是浏览器对于一个域名会有请求数的限制,这种方法可以方便做 CDN。为什么淘宝、腾讯等会把静态资源放在另外一个主域名下?为什么很多网站的静态资源会使用独立的域名?
前端如何实现 PV 和 UV 的统计?
简要介绍一下 RSA
介绍一下 KMP 算法?
如何实现对一个 DOM 元素的深拷贝,包括元素的绑定事件?
SPA 的路由是如果实现的,如果你来做一个前端路由,你会怎么做?
百度的构建工具 FIS 你了解吗?
sessionStorage,localStorage,cookie 区别
javascript 有哪几种方法定义函数
函数声明表达式
function 操作符
Function 构造函数
ES6:arrow function
js 运算符
=== 运算符判断相等的流程是怎样的
1. 如果两个值不是相同类型,它们不相等 2. 如果两个值都是 null 或者都是 undefined,它们相等 3. 如果两个值都是布尔类型 true 或者都是 false,它们相等 4. 如果其中有一个是 NaN,它们不相等 5. 如果都是数值型并且数值相等,他们相等,- 0 等于 06. 如果他们都是字符串并且在相同位置包含相同的 16 位值,他它们相等;如果在长度或者内容上不等,它们不相等;两个字符串显示结果相同但是编码不同 == 和 === 都认为他们不相等 7. 如果他们指向相同对象、数组、函数,它们相等;如果指向不同对象,他们不相等
== 运算符判断相等的流程是怎样的
1. 如果两个值类型相同,按照 === 比较方法进行比较 2. 如果类型不同,使用如下规则进行比较 3. 如果其中一个值是 null,另一个是 undefined,它们相等 4. 如果一个值是数字另一个是字符串,将字符串转换为数字进行比较 5. 如果有布尔类型,将 true 转换为 1,false 转换为 0,然后用 == 规则继续比较 6. 如果一个值是对象,另一个是数字或字符串,将对象转换为原始值然后用 == 规则继续比较 7. 其他所有情况都认为不相等
<,>,<=,>= 的比较规则
所有比较运算符都支持任意类型,但是比较只支持数字和字符串,所以需要执行必要的转换然后进行比较,转换规则如下:1. 如果操作数是对象,转换为原始值:如果 valueOf 方法返回原始值,则使用这个值,否则使用 toString 方法的结果,如果转换失败则报错 2. 经过必要的对象到原始值的转换后,如果两个操作数都是字符串,按照字母顺序进行比较(他们的 16 位 unicode 值的大小)3. 否则,如果有一个操作数不是字符串,将两个操作数转换为数字进行比较
+ 运算符工作流程
如果有操作数是对象,转换为原始值
此时如果有一个操作数是字符串,其他的操作数都转换为字符串并执行连接
否则:所有操作数都转换为数字并执行加法
“==” 和 “===” 有什么不同
相同:== 和 === 都是比较等值比较运算符,返回的布尔类型的比较结果。不同:
1) == 是等值比较运算符,使用的是 抽象等值 比较算法。
=== 是严格等值比较运算符,使用的 严格等值 比较算法。
2) == 运算符在比较值的时候,会根据两者类型是否相同而做不同的处理,
在两者不同类型的时候,会转换类型后进行比较:
基本类型会转成数字,引用类型会转成对象原始值,然后再进行比较。
而 === 首先也会判断类型是否一致,不同的是如果类型不一致则直接返回 false。
短路运算
window.foo || (window.foo = “bar”); 返回值是什么?
又称为短路或,短路:如果左侧为真,则不再进行右侧运算,同时返回左侧表达式运算结果。如果左侧为假则执行右侧表达式运算,并返回右侧计算结果。上面 window.foo 是不存在的,所有结果为 undefined,转成 boolean 就是 false,那么就会运算 window.foo = “bar”,把 “bar” 赋值给 window.foo 的同时,返回值也是 “foo”,所以打印返回结果是 “bar”
函数内部 arguments 变量有哪些特性, 有哪些属性, 如何将它转换为数组
arguments 所有函数中都包含的一个局部变量,是一个类数组对象,对应函数调用时的实参。如果函数定义同名参数会在调用时覆盖默认对象 arguments[index]分别对应函数调用时的实参,并且通过 arguments 修改实参时会同时修改实参 arguments.length 为实参的个数(Function.length 表示形参长度)arguments.callee 为当前正在执行的函数本身,使用这个属性进行递归调用时需注意 this 的变化 arguments.caller 为调用当前函数的函数(已被遗弃)转换为数组:var args = Array.prototype.slice.call(arguments, 0);
其他面试题
前端面试题整理