js面试题（下）

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 + ')')，这样就实现了一个最简单的jsonp
jsonp的原理与实现
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等于0
6.若是他们都是字符串而且在相同位置包含相同的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);

其余面试题

前端面试题整理