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);

其他面试题

前端面试题整理