需求已改活已加,加班通宵看朝霞。
终是上线已延期,bug还是改不完。
面试造火箭,工作拧螺丝,虽然我只想拧螺丝,可是我需要用造火箭的技术去寻找拧螺丝的工作,小编在公众号【前端有的玩】每日都会整理几道面试题,今天就将前面的一些比较经典的面试题进行了汇总,分享给大家。
题目一
题目介绍
如下为一段代码,请完善sum函数,使得 sum(1,2,3,4,5,6) 函数返回值为 21 ,需要在 sum 函数中调用 asyncAdd 函数,且不能修改asyncAdd函数
* 请在 sum函数中调用此函数,完成数值计算
* @param {*} a 要相加的第一个值
* @param {*} b 要相加的第二个值
* @param {*} callback 相加之后的回调函数
*/
function asyncAdd(a,b,callback) {
setTimeout(function(){
callback(null, a+b)
},100)
}
* 请在此方法中调用asyncAdd方法,完成数值计算
* @param {...any} rest 传入的参数
*/
async function sum(...rest) {
}
let start = window.performance.now()
sum(1, 2, 3, 4, 5, 6).then(res => {
console.log(res)
console.log(`程序执行共耗时: ${window.performance.now() - start}`)
})
本题根据程序输出时间不同,可以划分为三个难度等级
青铜难度, 输出时长大于6秒
白银难度, 输出时长大于3秒
王者难度, 输出时长大于1秒
答案
青铜难度
async function sum(...rest) {
let result = rest.shift()
for(let num of rest) {
result = await new Promise(resolve => {
asyncAdd(result, num, (_,res) => {
resolve(res)
})
})
}
return result
}
sum1(1, 2, 3, 4, 5,6).then(res => {
console.log(`计算结果为:${res}`)
})
白银难度
在青铜难度,我们把数组里面的每一项依次相加。但是也可以进行一些优化,可以并发执行多个,比如 sum(1,2,3,4,5,6)
,可以同时执行 1+2
,3+4
,5+6
,这样就可以提升执行效率
async function sum(...rest) {
if (rest.length <= 1) {
return rest[0] || 0
}
const promises = []
for (let i = 0; i < rest.length; i += 2) {
promises.push(
new Promise(resolve => {
if (rest[i + 1] === undefined) {
resolve(rest[i])
} else {
asyncAdd(rest[i], rest[i + 1], (_, result) => {
resolve(result)
})
}
})
)
}
const result = await Promise.all(promises)
return await sum(...result)
}
sum1(1, 2, 3, 4, 5,6).then(res => {
console.log(`计算结果为:${res}`)
})
王者难度
async function sum(...rest) {
let result = 0
const obj = {}
obj.toString = function() {
return result
}
const promises = []
for(let num of rest) {
promises.push(new Promise((resolve) => {
asyncAdd(obj, num, (_, res) => {
resolve(res)
})
}).then(res => {
result = res
}))
}
await Promise.all(promises)
return result
}
sum1(1, 2, 3, 4, 5,6).then(res => {
console.log(`计算结果为:${res}`)
})
因为js
是执行在单线程里面的,所以上面的代码,我们在for of
将所有的计算放到promises
数组里面,然后通过Promise.all
去一次性执行,这时候并不需要考虑到底先执行哪两个数字相加。因为单线程的原因,我们可以保证这几个Promise
是依次执行的,这时候obj.toString
返回值就是上一个Promise
的返回值,多跑几遍代码你就懂了哦
题目二
题目介绍
请说明以下代码各输出了什么?
console.log(typeof (() => {}))
console.log(typeof ['前端有的玩','公众号'])
console.log(typeof null)
console.log(typeof undefined)
console.log(typeof Function.prototype)
console.log('子君' instanceof String)
console.log(new Date() instanceof Date)
答案
console.log(typeof (() => {}))
console.log(typeof ['前端有的玩','公众号'])
console.log(typeof null)
console.log(typeof undefined)
console.log(typeof Function.prototype)
console.log('子君' instanceof String)
console.log(new Date() instanceof Date)
需要注意的是,对于 typeof
, 可以正确判断除了null
之外的所有基本类型,而对于引用类型,除了函数外其他都会被判断为object
。
对于instanceof
,无法判断基本类型,但可以正确判断引用类型
题目三
题目介绍
请实现一个instanceof
,让以下代码可正常运行
自定义instanceof
*/
function instanceOf(left, right) {
}
class A{}
class B extends A {}
class C{}
const b = new B()
console.log(instanceOf(b,B))
console.log(instanceOf(b,A))
console.log(instanceOf(b,C))
答案
本题主要考察instanceof
的判断原理,instanceof
主要的实现原理就是只要右边变量的 prototype
在左边变量的原型链上即可。因此,instanceof
在查找的过程中会遍历左边变量的原型链,直到找到右边变量的 prototype
,如果查找失败,则会返回 false
。
自定义instanceof
*/
function instanceOf(left, right) {
let proto = left.__proto__
while(proto){
if(proto === right.prototype){
return true
}
proto = proto.__proto__
}
return false
}
class A{}
class B extends A {}
class C{}
const b = new B()
console.log(instanceOf(b,B))
console.log(instanceOf(b,A))
console.log(instanceOf(b,C))
题目四
题目介绍
请模拟实现new
操作符,使下面代码正常运行
function myNew(constructor, ...rest) {
}
function Fun(name,sex) {
this.name = name
this.sex = sex
}
Fun.prototype.getUserInfo = function() {
return `我的姓名${this.name},我的性别${this.sex}`
}
const fun = myNew(Fun,'子君','男')
console.log(fun.getUserInfo())
答案
这道题考察的是使用new操作符
调用构造函数所经历的阶段:
创建一个新的对象;
将构造函数的作用域赋给新的对象;
执行构造函数中的代码;
返回新的对象;
function myNew(constructor, ...rest) {
if (typeof constructor !== 'function') {
return constructor;
}
//创建新的对象,关联构造函数的原型对象
const _constructor = Object.create(constructor.prototype);
//执行构造函数
const obj = constructor.apply(_constructor, rest);
//如果构造函数执行结果是对象则返回执行结果
if (typeof obj === 'object') {
return obj;
} else {
return _constructor;
}
}
function Fun(name,sex) {
this.name = name
this.sex = sex
}
Fun.prototype.getUserInfo = function() {
return `我的姓名${this.name},我的性别${this.sex}`
}
const fun = myNew(Fun,'子君','男')
console.log(fun.getUserInfo())
题目五
题目介绍
请说出以下代码输出内容
const a = {}
const b = Symbol('1')
const c = Symbol('1')
a[b] = '子君'
a[c] = '君子'
console.log(a[b])
const d = {}
const e = {key: '1'}
const f = {key: '2'}
d[e] = '子君'
d[f] = '君子'
console.log(d[e])
答案
const a = {}
const b = Symbol('1')
const c = Symbol('1')
a[b] = '子君'
a[c] = '君子'
console.log(a[b])
const d = {}
const e = {key: '1'}
const f = {key: '2'}
d[e] = '子君'
d[f] = '君子'
console.log(d[e])
对于第一个输出,Symbol()
函数会返回「symbol」类型的值,而Symbol
函数传的参数仅仅是用于标识的,不会影响值的唯一性
对于第二个输出, 因为e
和f
都是对象,而对象的key
只能是数值或字符,所以会将对象转换为字符,对象的toString
方法返回的是[object Object]
, 所有输出的是君子
题目六
题目介绍
请说出以下代码输出的内容
console.log([] + [])
console.log({} + [])
console.log([] == ![])
console.log(true + false)
答案
第一行代码
这行代码输出的是空字符串""
, 包装类型在运算的时候,会先调用valueOf
方法,如果valueOf
返回的还是包装类型,那么再调用toString
方法
const val = [].valueOf()
const val1 = val.toString()
所以上面的代码相当于
第二行代码
和第一题道理一样,对象 {}
隐氏转换成了[object Object]
,然后与""
相加
第三行代码
对于===
, 会严格比较两者的值,但是对于==
就不一样了
所以对于上面的代码,看下面一步一步分析
console.log(![])
console.log(Number(false))
console.log([].toString())
console.log(Number(""))
console.log(0 == 0)
1. 比如 null == undefined
2. 如果非number
与number
比较,会将其转换为number
3. 如果比较的双方中由一方是boolean
,那么会先将boolean
转换为number
第四行代码
console.log(true + false)
两个基本类型相加,如果其中一方是字符,则将其他的转换为字符相加,否则将类型转换为Number
,然后相加, Number(true)
是1
, Number(false)
是0
, 所以结果是 1
评论