Shopee深圳前端挂经

都是在牛客在线面试。
一面 代码分析+实现
1. 分析代码 (变量的定义)

1. (function () {
   
2.   const a = b = 2;
   
3. })()
   
4. console.log("a=", a, " b=", b);
   

复制代码

2. 分析代码 (this，要多了解JS的作用域和执行环境！)

1. function hello() {
   
2.   setTimeout(function() {
   
3.     console.log(this.userName);
   
4.   }, 0);
   
5. }
   
6. hello.call({ userName: 'Tom' });

复制代码

Follow up: 如果想正确输出'Tom'要怎么修改

3. 分析代码 (隐式类型转换规则)

1. if ([] == false) console.log(1);
   
2. if ({} == false) console.log(2);
   
3. if ([]) console.log(3);
   
4. if ({}) console.log(4);
   
5. if ([1] == [1]) console.log(5);

复制代码

// 凉透了，以下是看了学习资料得出的各种推算过程。。
https://blog.csdn.net/lantian_bupt/article/details/107566580

4. 分析代码 (前端面试必学！学会宏任务和微任务，这类变体都不怕！)

1. function newPromise = () => Promise.resolve("I have resolved");
   
2. function first() {
   
3.   newPromise().then(res => {
   
4.     console.log(res + " first");
   
5.   })
   
6.   console.log("first");
   
7. }
   
8. async function second() {
   
9.   console.log(await newPromise());
   
10.   console.log("second");
    
11. }
    
12. first();
    
13. second();

复制代码

5. 分析代码 (声明提前)

1. (function() {
   
2.   console.log("a=", a);
   
3.   console.log("b=", b);
   
4.   var a = 2;
   
5.   let b = 3;
   
6. })()

复制代码

lz自己加的扩展：函数体提前发生在变量声明提前之前

1. console.log(a)//?
   
2. a();//?
   
3. var a =3;
   
4. function a(){
   
5.    console.log(10);
   
6. }
   
7. console.log(a);//?
   
8. a = 6;
   
9. a();//?

复制代码

6. 分析代码

1. const getKey = (function(a) {
   
2.   this.a = a;
   
3.   return function (b) {
   
4.     return this.a + b;
   
5.   }
   
6. } (function(a, b, c) {
   
7.   return ~~a + ~~b + ~~c;
   
8. }.call(1, 2, 2)))
   
9. 
   
10. const getArray = function(arr) {
    
11.   let res = [];
    
12.   for (let i=0; i<arr.length; ++i) {
    
13.     res[i] = function() {
    
14.       return arr[i];
    
15.     }
    
16.   }
    
17.   return res;
    
18. }
    
19. 
    
20. const arr = getArray([10, 20, 30, 40, 50, 60, 70, 80, 90]);
    
21. console.log(arr[getKey(1)]());

复制代码

// 面试官一开始就先提醒：两个波浪线会将undefined/null等转成数字0，原本是数字的还是保留原来的数字。

7. 实现Lazy Man
写个Man继承自Person，并且支持如下调用：

1. function Person(name, age) {
   
2.   this.name = name;
   
3.   this.age = age;
   
4. }
   
5. function Man() {} //这部分需要实现
   
6. Man('Tom').sleep(3).eat('dinner');

复制代码

期望输出：
Hello! I'am Tom, 20 years old.
Wait up in 3 seconds.
Eat dinner.


面试官都很nice，不会的题会很耐心地引导，最不济也会引导猜一下结果，不过lz基础太差还是凉了。

最后祝各位帅哥美女牛年大吉，offer冲天！ 可以的话赏点大米！

国内春招前端果然比秋招难好多

yhubda 发表于 2021-02-12 20:43:19
国内春招前端果然比秋招难好多

Lz是秋天面的嗷，只是拖到现在才发的

匿名者 发表于 2021-2-14 17:52
Lz是秋天面的嗷，只是拖到现在才发的

啊这，那看来是shopee难，LZ你看我发的秋招的美团前端面经，每一面都比shopee这个简单。

1. function Person(name, age) {    this.name = name;
   
2.     this.age = age;
   
3. }
   
4. 
   
5. function Man(name, age) {
   
6.     this.queue = [];
   
7.     this.timeout = null;
   
8.     Person.call(this, name, age);
   
9.     console.log(`Hello, this is ${this.name}, ${this.age} year old`);
   
10.     this.sleep = function(time) {
    
11.         if(this.timeout) {
    
12.             this.queue.push(time);
    
13.             return this;
    
14.         }
    
15.         this.timeout = setTimeout(() => {
    
16.             this.timeout = null;
    
17.             while(this.queue.length) {
    
18.                 const top = this.queue.shift();
    
19.                 if(typeof top === 'number') {
    
20.                     this.sleep(top);
    
21.                     break;
    
22.                 } else if(typeof top === 'function') {
    
23.                     top();
    
24.                 }
    
25.             }
    
26.         }, time * 1000);
    
27.         return this;
    
28.     }
    
29.     this.eat = function(food) {
    
30.         const task = console.log.bind(null, `Eat ${food}.`);
    
31.         if(this.timeout) {
    
32.             this.queue.push(task);
    
33.         } else {
    
34.             task();
    
35.         }
    
36.         return this;
    
37.     }
    
38.     return this;
    
39. }
    
40. 
    
41. Man('Tom', 20).sleep(3).eat('lamb').sleep(3).eat('chicken');
    

复制代码

yhubda 发表于 2021-2-15 04:14
啊这，那看来是shopee难，LZ你看我发的秋招的美团前端面经，每一面都比shopee这个简单。

你是校招是吧？我这个是3~5年的社招可能也是体感更难的原因之一？

匿名者 发表于 2021-2-15 07:39
[mw_shl_code=javascript,true]function Person(name, age) {    this.name = name;
    this.age = age;
...

👍

bluefield 发表于 2021-02-14 23:00:34
你是校招是吧？我这个是3~5年的社招可能也是体感更难的原因之一？

啊这，我没看仔细，我还以为这也是校招来着

如果允许使用Promise:

1.     function Person(name, age) {
   
2.       this.name = name;
   
3.       this.age = age;
   
4.     }
   
5.     function Man(name, age) {
   
6.       Person.call(this, name, age);
   
7.       console.log(`Hello, ${name}! age: ${age}`);
   
8. 
   
9.       var next = Promise.resolve();
   
10.       return {
    
11.         sleep(timeoutSeconds) {
    . check 1point3acres for more.
12.           next = next.then(() => {
    
13.             return new Promise(resolve => {
    
14.               setTimeout(resolve, timeoutSeconds * 1000);
    
15.             })
    
16.           });
    
17.           return this;
    
18.         },
    
19.         eat(food) {
    
20.           next = next.then(() => {
    
21.             console.log(`eat ${food}`);
    
22.           })
    
23.           return this;
    
24.         }
    
25.       }
    
26.     }
    
27.     Man('Tom', 20).sleep(3).eat('dinner').sleep(1).eat('apple').sleep(2).eat('junk').sleep(4).eat('abcdefg');

复制代码

如果不让用Promise，不让用async/await：

1. 
   
2.     function Person(name, age) {
   
3.       this.name = name;
   
4.       this.age = age;
   
5.     }
   
6.     function Man(name, age) {
   
7.       Person.call(this, name, age);
   
8.       console.log(`Hello, ${name}! age: ${age}`);
   
9. 
   
10.       var tasks = [];
    
11.       var timer = null;
    
12.       function next() {
    
13.         var task = tasks.shift();
    
14.         task && task();
    .
15.       }
    
16.       function add(task) {
    
17.         if (timer) {
    
18.           tasks.push(task);
    . check 1point3acres for more.
19.         } else {
    
20.           task();
    
21.         }
    
22.       }
    
23.       return {
    
24.         sleep(timeoutSeconds) {
    
25.           add(() => {
    
26.             timer = setTimeout(() => {
    
27.               timer = null;
    
28.               next();
    
29.             }, timeoutSeconds * 1000);
    
30.           })
    
31.           return this;
    
32.         },
    
33.         eat(food) {
    
34.           add(() => {
    
35.             console.log(`eat ${food}`);
    
36.             next();
    
37.           })
    
38.           return this;
    
39.         }
    
40.       }
    
41.     }
    
42.     Man('Tom', 20).sleep(3).eat('dinner').eat('cake').sleep(1).eat('apple').eat('pizza').sleep(2).eat('junk').sleep(4).eat('abcdefg');

复制代码