三年經驗前端社招—

三年經驗前端社招——Shopee

大家好，我是若川。最近組織了源碼共讀活動《1個月，200+人，一起讀了4周源碼》，已經有超50+人提交了筆記，群里已經有超1200人，感興趣的可以點此鏈接掃碼加我微信?ruochuan12

本文經作者@lxcan 授權轉載，未經授權請勿直接轉載。
原文標題：《三年經驗前端社招——Shopee》
原文鏈接：https://zhuanlan.zhihu.com/p/405752877
文末點擊閱讀原文直達

前言

本人畢業學校是雙非二本，非計算機科班出身，大學時自學的前端相關技能。截止2021年8月，有3年前端開發經驗，技術棧為 vue 全家桶，求職意向城市是深圳。想著找一個更大的平臺尋求發展（技術沉淀、漲薪），所以出來接受社會的毒打了。。。

本文的目的是記錄自己的面試經歷，各位路過的兄dei也可以參考一下，也讓自己有個回顧和反思。路漫漫其修遠兮，吾將上下而求索

下面的題目，都會標明每一題的性質，部分題目也會給出一些參考思路和參考回答，希望各位大佬不吝賜教~

描述：對概念、過程的描述，純理論性問答題為主
舉例：說出應用場景，或者是自己團隊實踐的情況
偽代碼：寫代碼，但不需要跑起來，甚至可以隨便寫偽代碼，主要目的是描述思路
編程：真正的寫代碼，需要跑起來，有測試用例，要看到效果

HR面的話，是一些日常、項目回顧（少說技術細節）、職業規劃、你的優勢和缺點、為什么跑路、為什么選擇這邊、目前薪資和職級、期望薪資，HR面基本離不開這些問題。

一面

1、編程題，改造 Person 使其在非new調用時拋出錯誤【編程】

function?Person(name)?{this.name?=?name
}
Person("Hello")
new?Person("Hello")

參考答案：

function?Person(name)?{if?(!(this?instanceof?Person))?{throw?Error('error?msg')}this.name?=?name
}

2、實現 instanceof 方法【編程】

參考答案：

function?myIntanceOf?(left,?right)?{left?=?left.__proto__var?prototype?=?right.prototypewhile?(true)?{if?(left?==null?)?return?falseif?(left?===?prototype)?return?trueleft?=?left.__proto__}
}
function?Foo?()?{}
var?f?=?new?Foo()
console.log(myInstanceof(f,?Foo));?//?true
console.log(myInstanceof(f,?Object));?//?true
console.log(myInstanceof([1,2],?Array));?//?true
console.log(myInstanceof({?a:?1?},?Array));?//?false

3、結合第1題，Person 是什么類型的對象？是否有 __proto__ 屬性？【描述】

Person 是函數對象，有 __proto__ 屬性，Person 的隱式原型等于它的構造函數的顯式原型
Person.__proto__ === Function.prototype

4、說下 prototype 和 __proto__ 的區別【描述】

5條原型規則：

所有的引用類型（數組、對象、函數），都具有對象特性，即可自由擴展屬性（除了"null"）以外
所有的引用類型（數組、對象、函數），都有一個__proto__ （隱式原型）屬性，屬性值是一個普通的對象
所有的函數，都有一個 prototype （顯式原型）屬性，屬性值也是一個普通的對象
所有的引用類型（數組、對象、函數），__proto__ 屬性值指向它的構造函數的 prototype 屬性值
當試圖得到一個對象（引用類型）的某個屬性時，如果這個對象本身沒有這個屬性，那么會去它的 __proto__（即它的構造函數的 prototype）中尋找

5、實現 Student 方法，Student 繼承 Person ，也有自己的屬性和方法【編程】

參考答案：

function?Student(grade,?name)?{Person.call(this)this.grade?=?gradethis.name?=?name
}
Student.prototype?=?Object.create(Person.prototype)
Student.prototype.Constructor?=?Student
Student.prototype.getGrade?=?function?()?{return?this.grade
}

6、完成一個 sum 函數，實現如下功能【編程】

/*
*?編寫函數sum
*?sum(1)(2).count()?//?3
*?sum(1)(2)(3).count()?//?6
*/

參考答案：

function?sum?()?{let?args?=?[...arguments]let?add?=?function?()?{args.push(...arguments)return?add}add.count?=?function?()?{return?args.reduce((acc,?cur)?=>?acc?+?cur)}return?add
}
console.log(sum(1)(2).count());?//?3
console.log(sum(1)(2)(3).count());?//?6

其他版本，調用方式形如：sum(1)(2)() // 3

function?curry?(fn)?{let?args?=?[]return?function?f?(...newArgs)?{if?(newArgs.length)?{args?=?[...args,?...newArgs]return?f}?else?{let?res?=?fn(...args)args?=?[]return?res}}
}
function?count?(...args)?{return?args.reduce((a,c)?=>?a+c)
}
let?sum?=?curry(count)
sum(1)(2)()?//?3
sum(1)(2)(3)()?//?6

7、完成如下 findPath 函數，輸入一個對象和對象上的一個節點或子節點的值（值唯一，值類型為字符串），輸出該值對應在該對象的key的路徑【編程】

const?obj?=?{a:?{a_1:?{a_1_1:?'abc',a_1_2:?'efg'}},b:?{b_1:?'xyz',b_2:?'111'},c:?'000'
}
const?result?=?findPath(obj,?'xyz')?//?['b',?'b_1']

參考答案：

function?flatObj?(obj,?key?=?'',?res?=?{})?{for?(let?[k,?v]?of?Object.entries(obj))?{if?(Object.prototype.toString.call(v)?===?'[object?Object]')?{let?temp?=?key?+?k?+?'.'flatObj(v,?temp,?res)}?else?{let?temp?=?key?+?kres[temp]?=?v}}return?res
}function?findPath(obj,?value)?{let?o?=?flatObj(obj)//?k?==?'a.a_1.a_1_1'for?(let?[k,?v]?in?Object.entries(o))?{if?(v?===?value)?{return?k.split('.')}}return?[]
}

最后

Shopee 深圳蝦皮信息科技有限公司，是東南亞領航電商平臺。聽說公司里面都是騰訊、阿里、字節的大佬居多，技術前沿，福利好，各方面都不錯。一面是視頻面試，是在蝦皮自有的平臺上視頻面+寫編程題，自我感覺基本都寫出來了，可能不是最優解吧，沒跑測試用例，一面之后沒后續了，不管怎樣，菜是原罪，繼續加油吧~
往期回顧：