字节跳动前端外包面试题_前端字节跳动外包面试题

分享一些面试题，助力大家找到好的工作，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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

ps: 随便思考下logName改为箭头函数输出什么?
这道题拆开来看其实恍然大悟

const obj = p.getName();
obj.logName();
// name: 'Tom'
1
2
3

这里如果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>`
1
2
3
4
5
6

实现的思路是通过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) 
  })
}
1
2
3
4
5
6

接下来只要匹配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>
1
2
3
4
5
6
7
8
9
10
11
12

3.实现promiseAll方法

原题是怎么样已经忘了，总之需要实现与Promise.all方法行为一致，结果一致。
这里我不仅忘了原题，也忘了我曾经写过手写promise的文章，也忘了怎么实现。

重新分析需求，promiseAll方法的参数是一个数组，并且返回promise，所以可以先把架子搭出来

function promiseAll(promiseArray) {
  const pAll = new Promise((resolve, reject) => {

  })
  return pAll
}
1
2
3
4
5
6

这个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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30