字节跳动前端外包面试题
记录几前端道面试题习惯了平时vue的开发越来越不重视基础了,不出意外的被吊打了起来,凭借记忆大致还原考题。this指向问题class Preson {constructor(name) {this.name = 'Jerry';}getName() {return {name: 'Tom',logName() {console.log(this.name)}}}
分享一些面试题,助力大家找到好的工作,2022加油ヾ(◍°∇°◍)ノ゙
习惯了平时vue的开发越来越不重视基础了,不出意外的被吊打了起来,凭借记忆大致还原考题。
1.this指向问题
class Preson {
constructor(name) {
this.name = 'Jerry';
}
getName() {
return {
name: 'Tom',
logName() {
console.log(this.name)
}
}
}
}
const p = new Preson();
p.getName().logName()
ps: 随便思考下logName改为箭头函数输出什么?
这道题拆开来看其实恍然大悟
const obj = p.getName();
obj.logName();
// name: 'Tom'
这里如果logName改为箭头函数的话,this绑定的就是getName的this,也就是输出Jerry,对于长调用式的this指向问题,如果一下看不出来,不妨拆开试试,核心还是要明白每一步是否返回了新的对象。
2.正则表达问题
// 编写render函数
// 示例
const template = `<div>{{ name }}<span>{{ age }}</span><div>`;
const data = { name: 'singh', age: 27 };
render(template, data)
// `<div>singh<span>27</span><div>`
实现的思路是通过replace加正则表达式实现模板字符串替换,以下回答按着这个思路查阅MDN关于replace和正则表达式文档实现而来,没有百度或参考任何人关于render方法实现的博客,所以也不保证是对的。
因为!从我手里失去的东西一定要自己拿回来。
根据文档得出replace方法第一个参数可以是字符串也可以是正则表达式,第二个参数可以是字符串或函数
str.replace(regexp|substr, newSubStr|function)
一个用来创建新子字符串的函数,该函数的返回值将替换掉第一个参数匹配到的结果
该方法并不改变调用它的字符串本身,而只是返回一个新的替换后的字符串。
在进行全局的搜索替换时,正则表达式需包含 g 标志。
也就是说replace方法第一个参数使用全局的正则表达式匹配双花括号,第二个参数function内处理匹配到的字符串,然后return出来就可以实现替换了。
function参数如下:
function(match: 匹配的字符串, P1: 正则表达式分组1,P2: 正则表达式分组2, …Pn, …rest: 用不到详自见文档): string
ok 结果如下:
function render(template, data) {
template.replace(/{{(.*?)}}/g, function(match, group) {
console.log(match)
console.log(group)
})
}
接下来只要匹配data中的数据return出来即可
完整代码如下:
function render(template, data) {
return template.replace(/{{(.*?)}}/g, function(match, group) {
const content = group.trim();
return data[content];
})
}
const template = `<div>{{ name }}<span>{{ age }}</span><div>`;
const data = { name: 'singh', age: 27 };
console.log(render(template, data))
// <div>singh<span>27</span><div>
3.实现promiseAll方法
原题是怎么样已经忘了,总之需要实现与Promise.all方法行为一致,结果一致。
这里我不仅忘了原题,也忘了我曾经写过手写promise的文章,也忘了怎么实现。
重新分析需求,promiseAll方法的参数是一个数组,并且返回promise,所以可以先把架子搭出来
function promiseAll(promiseArray) {
const pAll = new Promise((resolve, reject) => {
})
return pAll
}
这个pAll的行为应该是当promiseArray所有数组都执行完.then()后,按原本的顺序返回一个结果数组,如果失败则进入catch()
所有这当中我们需要:
1.一个按顺序存储每一个promise.then结果的数组resStore
2.一个索引值resStoreIndexe用于标注已完成的promise与resStore对应的数组下标关系
3.一个计数器counter用于记录已完成的promise数量
4.promiseArray的length,用于与计数器比较是否全部完成了
function promiseAll(promiseArray) {
let _resolve, _reject;
const resStore = [];
let counter = 0,
resStoreIndexe = 0,
len = promiseArray.length,
promise = null;
const pAll = new Promise((resolve, reject) => {
_resolve = resolve
_reject = reject
})
while (promise = promiseArray.shift()) {
(function (i) {
promise.then(res => {
++counter
resStore[i] = res
if (counter === len) {
_resolve(resStore)
}
}, err => {
_reject(err)
})
})(resStoreIndexe)
resStoreIndexe++;
}
return pAll
}
更多推荐
所有评论(0)