nodejs面试题及答案(nodejs面试题2020)

如题所述

举报该问题

其他回答

第1个回答 2024-09-04

js面试题

1.eventLoop

2.setTimeout误差原因

3.深浅拷贝

4.跨域原因及解决方案

5.css放在头部，js放在尾部

6.css触发bfc

7.webpackplugin和loader区别

8.前端优化

9.协商缓存

10.长列表优化

11.webview交互

12.vue响应式原理

13.原型

14.算法题：数组中有n个元素，排列

EventLoop是计则扒没算机系统的运行机制，js就是运行这个机制，因为js是单线程语言，所以一旦遇到一个耗时很长的任务就会卡住，js为了解决这个问题就有了EventLoop

EventLoop是一个程序结构，用于等待和发送消息和事件。

就是在程序中有了两个线程，一个负责应用本身，主线程，另一个负责此悉主线程和其它进程，称为EventLoop

1、js是单线程语言

基本数据类型存放在栈中的简单数据段

引用数据类型存放在堆中的对象

因为定时器是宏任务，如果执孙纳行栈的时间大于定时器花费的时间，那么定时器的回调在宏任务(macrotask)里，来不及去调用，所有这个时间会有误差。所以就会有误差

宏任务是宿主发起的比如script,setTimeout

css放在头部是因为页面加载html生成dom树的时候就可以同时对dom树进行渲染，防止闪跳，白屏

js放在尾部是因为js会修改dom树，需要一个稳定的dom树

BFC是css的一个布局概念，块级格式化上下文

浮动float不为none的时候

定位为position:absolute和fixed的

display的时候

overflow不为visible

解决浮动父元素坍塌问题

解决自适应布局的问题

解决外边距垂直方向重合问题

loader是文件加载器，运行在nodejs中，并对文件进行打包，压缩转换

plugin是插件，用于拓展webpack的功能

浅拷贝有两种定于，第一种是赋值，第二种是拷贝对象的第一层属性，深层还是一样的

深拷贝是指将对象拷贝一份，无论如何修改都不会改变原有的

响应式原理就是当数据发生改变的时候视图也会跟着更新

VUE是利用了Object.defineProperty的方法里面的setter与getter方法的观察者模式来实现。

面试题汇总-JS篇01

场景：varstr=“helloworld!”

a.str.char()//返回指定下标的值

Str.char(2)//”l”

b.Str.indexOf()//返回指定值的下标

Str.indexOf(‘e’)//’1’

c.Str.lastIndexOf()//返回最后指定值的下标

Str.lastIndexOf(‘l’)//’9’

d.Str.concat()//拼接字符串

Str.concat(“motherfuck!”)//”helloworld!motherfuck!”

Console.log(str)//”helloworld!”

e.Str.substr(n,m)//从n开始截取m个字符

Str.substr(1,2)//’el’

f.Str.substring(n,m)//从n开始m结束截取字符串，不包含m

Str.substring(6,11)//”world”

g.Str.slice(n,m)//同substring，slice可以截取数组，substring不能截取数组

Str.slice(6,11)//”world”

h.Str.split//返回数组

Str.split(‘’)//[‘hello’,‘world!’]

Str.aplit(‘l’)//[‘he’,‘’,‘owor’,‘d!’]

i.Str.replace()//以下三个方法都是通过正则表达式对原字符串进行更改的

j.Str.match()

k.Str.search()

场景：constobj={x:0,y:1}

Constobj2={x:1,z:2,fn:{number:1}}

a.Object.assign()//合并对象，实行的是浅拷贝

Object.assign(obj,obj2)

Console.log(obj)//{x:1,y:1,z:2,fn:{number:1}}

b.Object.create()//新建一个对象，可以使用原型链继承

VarnewObj=Object.create(obj,{newValue:‘newAdd’})

Console.log(newObj)//{newValue:‘newAdd’}

Console.log(newObj.x)//0

c.Object.defineProperties()//往对象里面添加或烂码升修改新属性，值类型

Object.defineProperties(obj,{name:{value:‘欧’}})//添加属性

Console.log(obj)//{x:0,y:1,name:‘欧’}

Object.defineProperties(obj,{name:{value:‘林’,writable:true}})//修改属性

Console.log(obj)//{x:0,y:1,name:‘林’}

d.Object.defineProperty()//往对象里面添加新属模伍性，可以是引用类型

Object.defineProperty(obj,‘name’,{value:function(){return‘欧’}})

Console.log(obj.name())//’欧饥老’

e.Object.keys()//返回对象所有key，以数组类型输出

Console.log(Object.keys(obj))//[‘x’,‘y’]

f.Object.values()//返回对象所有的value，以数组类型输出

Console.log(Object.values(obj))//[0,1]

场景：vararr=newarray(1,2,3)

a.push()//向数组尾部添加元素

arr.push(4)

console.log(arr)//[1,2,3,4]

b.unshift()//向数组头部添加元素

arr.unshift(0)

console.log(arr)//[0,1,2,3]

c.pop()//删除数组尾部的元素

arr.pop()

console.log(arr)//[1,2]

d.shift()//删除数组头部的元素

arr.shift()

console.log(arr)//[2,3]

e.indexOf()//返回指定元素的下标

arr.indexOf(2)//1

f.slice(n,m)//从n开始m结束截取数组，不包括m,此方法不会更改元数组

console.log(arr.slice(1,2))//[2]

console.log(arr)//[1,2,3]

g.splice()//删除数组指定元素

arr.splice(1)//删除从下标1开始到最后的所有元素

console.log(arr)//[1]

arr.splice(1,2)//删除从下标1开始往后的2个元素

console.log(arr)//[1]

arr.splice(1,2,3,4)//删除从下标1开始往后2个元素并用3,4替代

console.log(arr)//[1,3,4]

h.reverse()//数组翻转

arr.reverse()

console.log(arr)//[3,2,1]

i.sort()//从小到大排序数组

arr.sort()

console.log(arr)//[1,2,3]

j.forEach()//以下提供了几种遍历的方法

k.map()

l.filter()//数组过滤，如果数组的元素的对象，可以通过对象的属性名来过滤元素，用法跟C#的Linq一样。

varnewArr=[{id:1,name:’元素1’},{id:2,name:’元素2’}]

console.log(newArr.filter(item=item.id===1))//[{id:1,name:’元素1’}]

console.log(newArr)//[{id:1,name:’元素1’},{id:2,name:’元素2’}]

m.every()

n.some()

o.find()

p.findIndex()

增删改查

场景：divclass=”div”id=”div”/div

a.document.createElement()//创建节点

varnewDiv=document.createElement()

b.document.craeteTextNode()//创建文本节点

varnewDivText=document.craeteTextNode(‘这是新创建的节点’)

c.div.appendChild()//向节点添加最后一个子节点

newDiv.appendChild(newDivText)

d.document.getElementById()//通过Id获取节点

vardiv=document.getElementById(‘div’)

e.div.parentNode//获取父节点

f.div.childNode//获取子节点，返回一个集合

varchild=div.childNodes

g.div.nextSibling，div.previousSibling，div.firstChild，div.lastChild

分别为，获取下一个兄弟节点，上一个兄弟节点，第一个子节点，最后一个子节点。

h.div.insetBefore()//插入到特定位置

div.insetBefore(newDiv,null)//插入到最后，跟appendchild用法一样

div.insetBefore(newDiv,div.firstChild)//插入到第一个子节点之前

div.insetBefore(newDiv,div.lastChild)//插入到最后节点之前

i.div.replaceChild()//替换节点

div.replaceChild(newDiv,div.firstChild)//替换第一个子节点，原节点会被删除

j.div.removeChild()//删除子节点

k.cloneNode(true/false)//克隆节点，true为深克隆，false为浅克隆

l.document.querySelector(),document.querySelectorAll()//通过css选择器搜索匹配的节点，querySelector返回匹配的第一个节点，querySelectorAll返回所有节点

document.querySelector(‘div.div’)//返回class为div的div标签节点

document.querySelector(‘#div’)//返回id为div的节点

m.document.getElementsByTagName(),document.getElementsByName(),document.getElementsByClassName()//返回符合需求的集合

n.div.setAttribute()//给元素添加属性

div.setAttribute(‘name’:‘div’)

o.removeAttribute(),getAttribute(),hasAttribute()//各种操作属性的方法

前端面试题2021（JS篇（上））

（水仙花数也被称为超完全数埋渗誉字不变数、自恋数、自幂数、阿姆斯特朗数。水仙花数是指一个3位数，它的每个位上的数字的3次幂之和等于它本身例如：1~3+5~3+3~3=153）

(质数就是在大于1的自然数中，除了1和它本身喊并以外不在有其他因数的自然数)

a:11,b:10

A[]B[""]C[undefined]D[null]

A['false']B[false]C[0]D[]

AnullBundefinedC“hello”D“world”

A"llowo"B"llow"C"llo"Dnull

AgetYear（）

BgetMonth（）

CgetDay（）

DgetDate（）

A基于对象

B移动端优先

C事件驱动

D跨平台

AString

BFloat

CNumber

DNull

A任意单个字符

B任意单个字母

C任意单个字母、数字、下划线

D任意单个字母、数学、下划线、$符号

Ajavascript

Bscript

Cscripting

Djs

Avars='heloe'

Bvarn=20

Cvarx=document.getElementsByTagName('box')

Dvary=document.querySelectorAll('ulli')

Adocument.createElement

Bdocument.createTextNode

Cdocument.getElementById

Bdocument.querySelector

Aele.innerText

Bele.innerHTML

Cele.textContent

Dele.htmlContent

插入排序的算法描述的是一种简单直观的排序算法，它的工作原理是通过构建有序序列，对于未排序的数据，在已排序序列中从后向前扫描，找到对应位置并插入

A.对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序的参数

B.reverse用于对数组数据的倒序排列

C.向数组的最后位置加一个新元素，可以用pop方法

D.unshift方弯段法用于向数组删除第一个元素

A.window.status="已经选中该文本框"

B.document.status='已经选中该文本框'

C.window.screen='已经选中该文本框'

D.document.screen='已经选中该文本框'

Ainputtype="button"value="new"onclick="open('new.html','_blank')"/

B.inputtype="button"value="new"onclick="window.location='new.html'"/

C.inputtype="button"value="new"onclick="location.assign('new.html)"

D.formtarget="_blank"action="new.html"

inputtype="submit"value="new"/

/form

A.scripttype="text/javascript"document.write(h1hello/h1)/script

B.scripttype="text/javascript"document.write("h1hello/h1")/script

C.scripttype="text/javascript"h1hello/h1/script

D.h1scripttype="text/javascript"document.write("hello")/script/h1

以下说法中正确的是（AD）

A.在页面的第二个文本框中输入内容后，当目标离开第二个文本框时，第一个文本框的内容不变

B.在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，将在第二个文本框中复制第一个文本框的内容

C.在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时候，将在第一个文本框中复制第二个文本框的内容

D.在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，第二个文本框的内容不变

前端面试2021（NodeJS篇）

-处理结果包装成响应数据，返回给客户端锋梁

-客户端浏览器解析响应数据乱卖，渲染展示对应的页面

使用sql语句完成下面的业务操作

1，注册用户时，判断账号是否已经存在

2.会员zhangsan登录时，同时允许使用哗基逗账号或者手机号和密码登录系统

3.lisi更新用户资料时，更新自己新的昵称--莉丝

4.用户zhangsan查看自己的资料绑定新的手机号码13523452345

5.用户lisi要销毁自己的资料，如何注销自己的用户信息

在nodeJS的repl里，vara=2；为什么第一次a++等于2;第二次a++等于3？

a++中的++是“后++”，变量游毕的原值用完了才生效，即若a=2，那么b=a++;后b=原值2，而后a增1为3。你的题目中的"悄消第二次a++等于3”实质是第一次a++生效后的3，第二次a++的++还没有生效呢，生效后就成4了……多说一句，这还是个有名的面试题，intx=1;问x++;是多少？好多人回答2——错了，正确答案是x++是1，最后x是2。你琢磨一下有益处。供神运芹参考。

前端开发面试回答，你怎么回答

一般HR会这样问：

1、以前在哪里做，担任什么职位，主要负责什么

2、为什么离开上家公司

3、是否不成功案例，你认为你的案例中哪个最好

4、最后庆李会问你薪资问题。

这里我挑2、4来回答，其它的我相信你应该知道怎么回答。

对于第二个问题，很多HR都会问，这里你应该这样回答比较合适：从两方面，第一你可以说公司国转型做其它项目，不做我现在这一块的业务了。第二你可以说公司的发展方向与我的专业不太对，对我自己以后的发展不是很好，所以我想找一份与我专业对口的。

对于问题4，有可能是HR提出来，但也有可能没提，这里你应该提出来。怎么说没关系，说出你要的价位就行，他就会知道了。然后他会根据公司的情况和你提的价位来跟你说明。你可以看公司的办公环境以及员工的工作环境，就可以看出该公司老板是否有钱了，呵呵！深圳这边的网页设计薪资挺难说的，有高有低。关键还是看能力与沟通技巧了。

好了，搭伏以上是我个人经验，希望你能找到一份好工作，誉枝迟开心上班！