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

其他面试题

前端面试题整理


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值