我在近期求职中遇到的前端面试问题及其解法

2020 年 9 月 08 日

我在近期求职中遇到的前端面试问题及其解法

在今天的文章中,我想跟大家聊聊自己最近在 COVID-19 疫情下的求职经历中遇到的问题。另外,我还把自己的准备工作整理成一份资源清单供大家参考。

这些问题主要分为以下几个小节。

  • JS
  • 编码
  • 应用题
  • 杂项

这里提出的解法并不能直接使用,只代表我个人的思维方式与粗略概念。大家不妨尝试用自己的办法解决这些问题。

JS

1) 给定一个深度为 n 的多维数组,将其展平。展平后,将其作为 array 实例上的可用方法。

解:

复制代码
/**
* [1,2,[3,4]] -> [1,2,3,4]
*/
let arr = [1,2,[3,4, [5,6, [7, [8, 9, 10]]]]]
function flatten(arr) {
return arr.reduce(function(acc, next){
let isArray = Array.isArray(next)
return acc.concat(isArray ? flatten(next) : next)
}, [])
}
if (!Array.prototype.flatten) {
Array.prototype.flatten = function() {
return flatten(this)
}
}
console.log(arr.flatten());

2) 从零开始创建一项 promise。

解:

复制代码
class CustomPromise {
state = "PENDING"
value = undefined
thenCallbacks = []
errorCallbacks = []
constructor(action) {
action(this.resolver.bind(this), this.reject.bind(this))
}
resolver(value) {
this.state = "RESOLVED"
this.value = value
this.thenCallbacks.forEach((callback) => {
callback(this.value)
})
}
reject(value) {
this.state = "REJECTED"
this.value = value
this.errorCallbacks.forEach((callback) => {
callback(this.value)
})
}
then(callback) {
this.thenCallbacks.push(callback)
return this
}
catch (callback) {
this.errorCallbacks.push(callback)
return this
}
}
let promise = new CustomPromise((resolver, reject) => {
setTimeout(() => {
const rand = Math.ceil(Math.random(1 * 1 + 6) * 6)
if (rand > 2) {
resolver("Success")
} else {
reject("Error")
}
}, 1000)
})
promise
.then(function(response){
console.log(response)
})
.catch(function(error){
console.log(error)
})

3) 按平均评分及名称对电影列表进行过滤。按电影对象内的任意字段对过滤后的列表进行排序。

解:

复制代码
// O(M)
function getMovies() {
return []; // [{id, name, year}]
}
// O(R)
function getRatings() {
return []; // [{id, movie_id, rating}] 0 <= rating <= 10 // e.g 9.3
}
/**
* minAvgRating ->
* avgRating >= minAvgRating
*
* sort ->
* name -> ascending order movies by name
* -name -> descending
*
* avgRating
*
*
* search ->
* 'ave' -> 'Avengers'
* 'avengers' -> 'Avengers'
* 'AvengersInfinitywar' -> 'Avengers'
*/
const toLower = str => str.toLocaleLowerCase()
const getAvrgRating = (movie, movingWithRatings) => {
let count = 0;
return movingWithRatings.reduce((acc, value, index) => {
const movieMatch = movie.id === value.movie_id
if (movieMatch) {
acc+=value.rating
count++
}
if (index === movingWithRatings.length - 1) {
acc = acc/count
}
return acc
}, 0)
}
const isSubString = (str1, str2) => {
str1 = toLower(str1.split(" ").join(""))
str2 = toLower(str2.split(" ").join(""))
if (str1.length > str2.length) {
return str1.startWith(str2)
} else {
return str2.startWith(str1)
}
}
const moviesList = getMovies()
const movingWithRatings = getRatings();
function queryMovies({ search, sort, minAvgRating }) {
let filteredMovies = movingWithRatings.filter(movie => getAvrgRating(movie, movingWithRatings) >= minAvgRating);
filteredMovies = filteredMovies.map(movie => moviesList.filter(listItem => listItem.id === movie.movie_id).pop())
filteredMovies = filteredMovies.filter(movie => isSubString(toLower(movie.name), toLower(search)))
filteredMovies = filteredMovies.sort((a, b) => {
const isDescending = sort[0] === '-' ? true : false
let sortCopy = isDescending ? sort.slice(1) : sort
const value1 = a[sortCopy]
const value2 = b[sortCopy]
if (isDescending) {
return value1 > value2 ? -1 : 1
}else {
return value1 < value2 ? -1 : 1
}
})
filteredMovies = filteredMovies.map(movie => ({
...movie,
avgRating: movingWithRatings.filter(ratedMovie => ratedMovie.movie_id === movie.id)[0].rating
}))
return filteredMovies
}

4) 给定一个用于获取所有 posts 与 comments 的端点 URL。解决以下问题:

将所有评论(comments)映射至其所归属的帖子(posts),映射后的结果数据应具有以下结构。

解:

复制代码
//service.js
const POSTS_URL = `https://jsonplaceholder.typicode.com/posts`;
const COMMENTS_URL = `https://jsonplaceholder.typicode.com/comments`;
export const fetchAllPosts = () => {
return fetch(POSTS_URL).then(res => res.json());
};
export const fetchAllComments = () => {
return fetch(COMMENTS_URL).then(res => res.json());
};
import { fetchAllPosts, fetchAllComments } from "./service";
const fetchData = async () => {
const [posts, comments] = await Promise.all([
fetchAllPosts(),
fetchAllComments()
]);
const grabAllCommentsForPost = postId =>
comments.filter(comment => comment.postId === postId);
const mappedPostWithComment = posts.reduce((acc, post) => {
const allComments = grabAllCommentsForPost(post.id);
acc[post.id] = allComments;
return acc;
}, {});
console.log("mappedPostWithComment ", mappedPostWithComment);
};
fetchData();

5) 在字符串实例上实现方法 getHashCode。此方法应适用于所有字符串类型。

解:

复制代码
let s1 = "sample"
if (!String.prototype.getHashCode) {
String.prototype.getHashCode = function(){
console.log('String instance ', this)
return this
}
}

6) 以下表达式的计算结果是什么?

复制代码
1+true
true+true
1’+true
2’ > ’3
‘two’>’three’

解:

复制代码
2
2
1true
false
true

7) 实现 bind 与 reduce。

原文链接:【 https://www.infoq.cn/article/KgTatpIJCw0qRPUqb78t 】。未经作者许可,禁止转载。

登录后可解锁全站优质内容

免费畅享技术公开课、顶尖技术团队访谈、一线互联网大厂技术实践

文章
视频
电子书
研究报告
立即登录
2020 年 9 月 08 日 09:54 756
用户头像
小智 InfoQ高级编辑

发布了 180 篇内容,共 2831 次阅读,收获喜欢 23 次。

关注

评论 1 条评论

发布
用户头像
为啥没有评论,都找到工作了?

2020 年 09 月 09 日 17:07
回复
没有更多评论了
发现更多内容

第四周总结

芒夏

极客大学架构师训练营

可读代码编写炸鸡四(上篇) - 来写注释

多选参数

代码质量 代码 代码注释

JDBC拾遗

qihuajun

架构师训练营 - 作业 - 第四周

心在飞

极客大学架构师训练营

时间管理的本质到底是什么?

非著名程序员

程序员 提升认知 时间管理 程序员成长

印度下黑手!59款中国APP被禁用,微信微博QQ抖音等在列

程序员生活志

架构师训练营第 04周——总结

李伟

极客大学架构师训练营

猿灯塔:关于Java面试,你应该准备这些知识点

猿灯塔

Java 面试

前端存储除了 localStorage 还有啥

阿宝哥

JavaScript 前端 存储

架构设计之常识篇

魔曦

架构师 极客大学架构师训练营

消息队列(五)如何保证消息的顺序性?

奈何花开

Java MQ 消息队列

程序员面试与 HR 谈薪资技巧

张小方

面试 offer 程序员求职 年终奖 月薪

出海蓝军先锋联想来酷,今夏再征"丝路"

Geek_116789

Python中进行None判断时,为什么用is而不是==

王坤祥

Python 编程 进阶 计算机基础

Mac开发环境 React Native0.60 环境 安卓环境Java变量 及~/.zshrc文件配置

蛋蛋

React

为什么大公司一定要使用DevOps?

张启华

理解了 1+2 的过程,你就理解了Java虚拟机

侯树成

JVM JVM原理

架构师训练营第四周总结:互联网架构概要

hifly

高可用 高性能 极客大学架构师训练营 互联网架构

数据库周刊30丨数据安全法草案将亮相;2020数据库产业报告;云南电网上线达梦;达梦7误删Redo Log;Oracle存储过程性能瓶颈;易鲸捷实践案例……

墨天轮

MySQL 数据库 oracle mongodb 周刊

自己动手编译一个HEIF图片转jpeg工具(Mac平台)

GeorgeMR

HEIF HEIC jpeg 图片

架构师训练营第三周作业

陈靓-哲露

消息队列(六)如何处理消费者故障导致的百万消息积压?

奈何花开

Java MQ 消息队列

分布式计算DAG1-画猫

Hervor。

架构师训练营——第四周作业

jiangnanage

架构师训练营 第4周作业

坂田吴奇隆

极客大学架构师训练营

架构师训练营 - 系统架构

Pontus

极客大学架构师训练营

父亲节会员礼遇免费送,联想来酷重点发力"健康赛道"

Geek_116789

【6月】本月读书学到了什么

Neco.W

读书感悟 阅读量

第四周作业

芒夏

极客大学架构师训练营

可读代码编写炸鸡三 - 审美

多选参数

代码质量 代码 代码注释

作业 - 第4周

Happy-Coming

跨越计算鸿沟:如何靠软硬件协同突破算力瓶颈?

跨越计算鸿沟:如何靠软硬件协同突破算力瓶颈?

我在近期求职中遇到的前端面试问题及其解法-InfoQ