前端面试题集-js基础-2

203 阅读5分钟

101、a.b.c.d 和 a['b']['c']['d'],哪个性能更高?

a.b.c.d比a['b']['c']['d']性能高点,后者还要考虑[ ]中是变量的情况,再者,从两种形式的结构来看,显然编译器解析前者要比后者容易些,自然也就快一点

102、input 搜索如何防抖,如何处理中文输入

onchange:在失去焦点的时候触发

中文输入:在输入完成并且选择了相应的汉字时触发、可以使用compositionstart、compositionupdate和compositionend事件来实现。

  • compositionstart:在中文输入的开始时触发一次
  • compositionupdate:在中文输入过程中不断触发,效果类似oninput事件
  • compositionend:在输入完毕通过输入法选择中文汉字填入搜索框时触发一次

这三个事件是DOM2级别级别事件,只能通过addEventListener('compositionstart', function (e) {})添加监听处理

103、DOM事件的绑定的几种方式

  1. 在html标签中直接绑定;dom0
  2. 在js中获取到相应的dom元素后绑定;dom2
  3. 在js中使用addEventListener()实现绑定;

dom0和dom2的区别

  • 优点:能添加多个事件处理程序,按顺序执行,HTML事件处理程序无法做到
  • 对比:dom0可以同时绑定几个不同的事件,但是不能同时绑定多个相同的事件,比如onclick;会覆盖,只会执行最后一个的函数。dom2级同时绑定几个事件(相同或不同),然后顺序执行,不会覆盖。缺点:不具有跨浏览器优势.

104、二分查找的时间复杂度怎么求,是多少

O(log2n)

105、函数式编程与面向对象的区别,优缺点

数据存放的形式不同

面向对象,数据存放在对象的属性(成员变量)里面,以及静态成员(全局变量)

  • 访问数据(全局变量除外)需要先获取对象的引用,然后再进行操作(直接访问——公共属性,或者调用成员函数/方法访问——私有属性)
  • OO是通过持有,以及传递对象的方式去让别的对象来操作数据,而对象也会是其他对象的成员,层层嵌套。当你想要访问某一个数据的时候,就需要顺着对象的引用链条去找,一步步去操作。

对于函数式,数据存放在闭包(各级作用域)里面,作用域包括全局作用域。访问数据是直接访问(通过函数入参或者作用域链查找)

//OO
class Foo { 
    constructor(){ 
        this.bar = 0 
    } 
} 
let foo = new Foo() 
foo.bar ++ 
//函数式 
let bar = 0
function foo(){ bar ++ } 
foo()

优点:

函数式编程:支持闭包和高阶函数,闭包是一种可以起函数的作用并可以如对象般操作的对象;而高阶函数是可以以另一个函数作为输入值来进行编程。支持惰性计算,这就可以在求值需要表达式的值得时候进行计算,而不是固定在变量时计算。还有就是可以用递归作为控制流程。函数式编程所编程出来的代码相对而言少很多,而且更加简洁明了。

面向对象编程:面向对象有三个主要特征,分别是封装性、继承性和多态性。类的说明展现了封装性,类作为对象的模板,含有私有数据和公有数据,封装性能使数据更加安全依赖的就是类的特性,使得用户只能看到对象的外在特性,不能看到对象的内在属性,用户只能访问公有数据不能直接访问到私有数据。类的派生功能展现了继承性,继承性是子类共享父类的机制,但是由于封装性,继承性也只限于公有数据的继承(还有保护数据的继承),子类在继承的同时还可以进行派生。而多态性是指对象根据接收的信息作出的行为的多态,不同对象接收同一信息会形成多种行为。

缺点

函数式编程:所有的数据都是不可以改变的,严重占据运行资源,导致运行速度也不够快。

面向对象编程:为了编写可以重用的代码导致许多无用代码的产生,并且许多人为了面向对象而面向对象导致代码给后期维护带来很多麻烦。

106、扫码登录怎么做,手机端和PC端都要建立长连接吗

image.png

107、cookie的secure这个属性是干啥的

1、secure属性

当设置为true时,表示创建的 Cookie 会被以安全的形式向服务器传输,也就是只能在 HTTPS 连接中被浏览器传递到服务器端进行会话验证,如果是 HTTP 连接则不会传递该信息,所以不会被窃取到Cookie 的具体内容。

2 、HttpOnly属性

如果在Cookie中设置了"HttpOnly"属性,那么通过程序(JS脚本、Applet等)将无法读取到Cookie信息,这样能有效的防止XSS攻击。

108、如何设置一个n秒后失效的localStorage

设置key为一个时间戳,获取后拿当前时间和这个时间戳对比

109、如何实现下拉分页?

  • 获取视口高度clientHeight
  • 获取列表内容高度scrollHeight
  • 监听滚动事件,事件中有一个Event对象,可以拿到scrollTop
  • 如果scrollHeight-clientHeight<=scrollTop说明滑动到底层了

110、event对象target属性和currentTarget的区别

本质上,target表示事件触发的那个元素,就是点了哪个就是哪个。currentTagrget就是绑定事件的那个元素。比如一个ul下有三个li。ul绑定onclick事件,那么ul就是currentTarget,而target就是点击了哪个li就是哪个li,点击了ul就是ul

111、为什么前端开发要先下载nodeJS

  1. 传统的JS是运行在浏览器的,NodeJS给我们提供了一个基于Chrome V8引擎的Javascript的运行环境
  2. nodeJS提供自己配套的包管理工具npm,能够方便我们管理所有模块的安装、配置、删除等操作,还有自身带的webpack,方便我们部署打包

... 未完待续,不定时补充