【面试题】你是如何让js 代码变得简洁的？，三面美团前端岗

最新推荐文章于 2024-10-16 11:23:07 发布
最新推荐文章于 2024-10-16 11:23:07 发布
阅读量562 收藏 12
点赞数 25
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_87288747/article/details/142503544
版权 

#### 2. apply


apply和call的本质区别就是接受的参数形式不同，call接收`零散`的参数，而apply以`数组`的方式接收参数，实现思路完全一样，代码如下：

function foo(x,y){
console.log(this.a,x+y);
}

const obj={
a:1
}

Function.prototype.myApply=function(context,args){
if(typeof this !== ‘function’) return new TypeError(‘is not a function’)
const fn=Symbol(‘fn’) //尽可能降低myCall对其他的影响
context[fn]=this
contextfn
delete context[fn]
}

//验证
foo.myApply(obj,[1,2]) //1,3


#### 3. bind


bind和call，apply的区别是会`返回一个新的函数`，接收`零散`的参数  
 需要注意的是，`官方bind`的操作是这样的：


* 当new了bind返回的函数时，相当于new了foo，且new的`参数`需作为`实参`传给foo
* foo的this.a`访问不到`obj中的a

function foo(x,y,z){
this.name=‘zt’
console.log(this.a,x+y+z);
}

const obj={
a:1
}

Function.prototype.myBind=function(context,…args){

if(typeof this !== ‘function’) return new TypeError(‘is not a function’)

context=context||window

let _this=this

return function F(…arg){
//判断返回出去的F有没有被new，有就要把foo给到new出来的对象
if(this instanceof F){
return new _this(…args,…arg) //new一个foo
}
_this.apply(context,args.concat(arg)) //this是F的,_this是foo的 把foo的this指向obj用apply
}
}

//验证
const bar=foo.myBind(obj,1,2)
console.log(new bar(3)); //undefined 6 foo { name: ‘zt’ }


### 三、手撕深拷贝



### 四、手撕Promise


思路：


* 我们知道，promise是有`三种状态`的，分别是`pending`(异步操作正在进行), `fulfilled`(异步操作成功完成), `rejected`(异步操作失败)。我们可以定义一个**变量**保存promise的状态。
* resolve和reject的实现：把`状态变更`，并把resolve或reject中的值`保存`起来留给`.then使用`。
* 要保证`实例对象`能访问`.then`，必须将.then挂在`构造函数的原型上`
* .then接收`两个函数`作为参数，我们必须对所传参数进行`判断`是否为函数，当状态为fulfilled时，onFulfilled函数`触发`，并将前面resolve中的值`传给`onFulfilled函数；状态为rejected时同理。
* 当在promise里放一个`异步函数`（例：setTimeout）`包裹`resolve或reject函数时，它会被挂起，那么当执行到.then时，promise的状态`仍然是pending`，故`不能触发`.then中的回调函数。我们可以定义`两个数组`分别存放.then中的两个`回调函数`，将其分别在resolve和reject函数中`调用`，这样保证了在resolve和reject函数触发时，.then中的回调函数即能触发。


代码如下：

const PENDING = ‘pending’
const FULFILLED = ‘fullfilled’
const REJECTED = ‘rejected’

function myPromise(fn) {
this.state = PENDING
this.value = null
const that = this
that.resolvedCallbacks = []
that.rejectedCallbacks = []

function resolve(val) {
if (that.state == PENDING) {
that.state = FULFILLED
that.value = val
that.resolvedCallbacks.map((cb)=>{
cb(that.value)
})
}
}
function reject(val) {
if (that.state == PENDING) {
that.state = REJECTED
that.value = val
that.rejectedCallbacks.map((cb)=>{
cb(that.value)
})
}
}

try {
fn(resolve, reject)
} catch (error) {
reject(error)
}

}

myPromise.prototype.then = function (onFullfilled, onRejected) {
const that = this
onFullfilled = typeof onFullfilled === ‘function’ ? onFullfilled : v => v
onRejected= typeof onRejected === ‘function’ ? onRejected : r => { throw r }

if(that.state===PENDING){
that.resolvedCallbacks.push(onFullfilled)
that.resolvedCallbacks.push(onRejected)
}
if (that.state === FULFILLED) {
onFullfilled(that.value)
}
if (that.state === REJECTED) {
onRejected(that.value)
}
}

//验证 ok ok
let p = new myPromise((resolve, reject) => {
// reject(‘fail’)
resolve(‘ok’)
})

p.then((res) => {
console.log(res,‘ok’);
}, (err) => {
console.log(err,‘fail’);
})


### 


### 六、手撕数组API


#### 1. forEach()


思路：


* forEach()用于`数组的遍历`，参数接收一个`回调函数`，回调函数中接收`三个参数`，分别代表每一项的值、下标、数组本身。
* 要保证数组能访问到我们自己手写的API，必须将其挂到`数组的原型上`。


代码实现：

const arr = [
{ name: ‘zt’, age: 18 },
{ name: ‘aa’, age: 19 },
{ name: ‘bb’, age: 18 },
{ name: ‘cc’, age: 21 },
]

//代码实现
Array.prototype.my_forEach = function (callback) {
for (let i = 0; i < this.length; i++) {
callback(this[i], i, this)
}
}

//验证
arr.my_forEach((item, index, arr) => { //111 111
if (item.age === 18) {
item.age = 17
return
}
console.log(‘111’);
})


#### 2. map()


思路：


* map()也用于`数组的遍历`，与forEach不同的是，它会`返回一个新数组`，这个新数组是map接收的`回调函数`的`返回值`。  
 代码实现：

const arr = [
{ name: ‘zt’, age: 18 },
{ name: ‘aa’, age: 19 },
{ name: ‘bb’, age: 18 },
{ name: ‘cc’, age: 21 },
]

Array.prototype.my_map=function(callback){
const res=[]
for(let i=0;i<this.length;i++){
res.push(callback(this[i],i,this))
}
return res
}

//验证
let newarr=arr.my_map((item,index,arr)=>{
if(item.age>18){
return item
}
})
console.log(newarr);
//[
// undefined,
// { name: ‘aa’, age: 19 },
// undefined,
// { name: ‘cc’, age: 21 }
//]


#### 3. filter()


思路：


* filter()用于`筛选过滤`满足条件的元素，并`返回一个新数组`。


代码实现：

const arr = [
{ name: ‘zt’, age: 18 },
{ name: ‘aa’, age: 19 },
{ name: ‘bb’, age: 18 },
{ name: ‘cc’, age: 21 },
]

Array.prototype.my_filter = function (callback) {
const res = []
for (let i = 0; i < this.length; i++) {
callback(this[i], i, this) && res.push(this[i])
}
return res
}

//验证
let newarr = arr.my_filter((item, index, arr) => {
return item.age > 18
})
console.log(newarr); [ { name: ‘aa’, age: 19 }, { name: ‘cc’, age: 21 } ]


#### 4. reduce()


思路：


* reduce()用于将数组中所有元素按指定的规则进行`归并计算`，返回一个`最终值`。
* reduce()接收`两个参数`：回调函数、初始值（可选）。
* 回调函数中接收`四个参数`：初始值 或 存储上一次回调函数的返回值、每一项的值、下标、数组本身。
* 若不提供初始值，则从`第二项开始`，并将`第一个值`作为`第一次执行的返回值`。


代码实现：

const arr = [
{ name: ‘zt’, age: 18 },
{ name: ‘aa’, age: 19 },
{ name: ‘bb’, age: 18 },
{ name: ‘cc’, age: 21 },
]

Array.prototype.my_reduce = function (callback,…arg) {
let pre,start=0
if(arg.length){
pre=arg[0]
}
else{
pre=this[0]
start=1
}
for (let i = start; i < this.length; i++) {
pre=callback(pre,this[i], i, this)
}
return pre
}

//验证
const sum = arr.my_reduce((pre, current, index, arr) => {
return pre+=current.age
},0)
console.log(sum); //76


#### 5. fill()


思路：


* fill()用于`填充`一个数组的所有元素，它会`影响原数组` ，返回值为`修改后`的`原数组`。
* fill()接收`三个参数`：填充的值、起始位置（默认为0）、结束位置（默认为this.length-1）。
* 填充遵循`左闭右开`的原则
* `不提供`起始位置和结束位置时，默认填充`整个数组`。


代码实现：

Array.prototype.my_fill = function (value,start,end) {
if(!start&&start!==0){
start=0
}
end=end||this.length
for(let i=start;i<end;i++){
this[i]=value
}
return this
}

//验证
const arr=new Array(7).my_fill(‘hh’,null,3) //往数组的某个位置开始填充到哪个位置，左闭右开
console.log(arr); //[ ‘hh’, ‘hh’, ‘hh’, <4 empty items> ]


#### 6. includes()


思路：


* includes()用于判断数组中是否`包含`某个元素，返回值为`true 或 false`
* includes()提供`第二个参数`，支持从`指定位置开始`查找


代码实现：

const arr = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]

Array.prototype.my_includes = function (item,start) {
if(start<0){start+=this.length}
for (let i = start; i < this.length; i++) {
if(this[i]===item){
return true
}
}
return false
}

//验证
const flag = arr.my_includes(‘c’,3) //查找的元素，从哪个下标开始查找
console.log(flag); //false


#### 7. join()


思路：


* join()用于将数组中的`所有元素`以`指定符号`连接成一个`字符串`


代码实现：

const arr = [‘a’, ‘b’, ‘c’]

Array.prototype.my_join = function (s = ‘,’) {
let str = ‘’
for (let i = 0; i < this.length; i++) {
str += ${this[i]}${s}
}
return str.slice(0, str.length - 1)
}

//验证
const str = arr.my_join(’ ')
console.log(str); //a b c


#### 8. find()


思路：


* find()用于返回数组中`第一个满足条件`的`元素`，找不到返回`undefined`
* find()的参数为一个`回调函数`


代码实现：

const arr = [
{ name: ‘zt’, age: 18 },
{ name: ‘aa’, age: 19 },
{ name: ‘bb’, age: 18 },
{ name: ‘cc’, age: 21 },
]

Array.prototype.my_find = function (callback) {
for (let i = 0; i < this.length; i++) {
if(callback(this[i], i, this)){
return this[i]
}

}
return undefined
}

//验证
let j = arr.my_find((item, index, arr) => {
return item.age > 19
})
console.log(j); //{ name: ‘cc’, age: 21 }


#### 9. findIndex()


思路：


* findIndex()用于返回数组中`第一个满足条件`的`索引`，找不到返回`-1`
* findIndex()的参数为一个`回调函数`


代码实现：

const arr = [
{ name: ‘zt’, age: 18 },
{ name: ‘aa’, age: 19 },
{ name: ‘bb’, age: 18 },
{ name: ‘cc’, age: 21 },
]

Array.prototype.my_findIndex = function (callback) {
for (let i = 0; i < this.length; i++) {
if(callback(this[i], i, this)){
return i
}
}
return -1
}

let j = arr.my_findIndex((item, index, arr) => {
return item.age > 19
})
console.log(j); //3


#### 10. some()


思路：


* some()用来检测数组中的`元素`是否`满足`指定条件。
* 若`有一个`元素符合条件，则返回`true`，且后面的元素`不`会再检测。


代码实现：

const arr = [
{ name: ‘zt’, age: 18 },
{ name: ‘aa’, age: 19 },
{ name: ‘bb’, age: 18 },
{ name: ‘cc’, age: 21 },
]

Array.prototype.my_some = function (callback) {
for (let i = 0; i < this.length; i++) {
if(callback(this[i], i, this)){
return true
}
}
return false
}

//验证
const flag = arr.some((item, index, arr) => {
return item.age > 20
})
console.log(flag); //true


#### 11. every()


思路：


* every() 用来检测`所有元素`是否都`符合`指定条件。
* 若`有一个`不满足条件，则返回`false`，后面的元素都`不`会再执行。


代码实现：

const arr = [
{ name: ‘zt’, age: 18 },
{ name: ‘aa’, age: 19 },
{ name: ‘bb’, age: 18 },
{ name: ‘cc’, age: 21 },
]

Array.prototype.my_every = function (callback) {
for (let i = 0; i < this.length; i++) {
if(!callback(this[i], i, this)){
return false
}
}
return true
}

//验证
const flag = arr.my_every((item, index, arr) => {
return item.age > 16
})
console.log(flag); //true


### 七、数组去重


#### 1. 双层for循环 + splice()

let arr = [1, 1, ‘1’, ‘1’, 2, 2, 2, 3, 2]
function unique(arr) {
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (arr[i] === arr[j]) {
arr.splice(j, 1)
j-- //删除后j向前走了一位，下标需要减一，避免少遍历一位
}
}
}
return arr
}

console.log(unique(arr)) //[ 1, ‘1’, 2, 3 ]




### 文末
篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

![](https://img-blog.csdnimg.cn/img_convert/04273c2f50e58b6822663c5b2f379206.png)  

![](https://img-blog.csdnimg.cn/img_convert/081b5236ebd9ff24af676bcd4a51c99e.png)
2401_87288747
关注
2021 Java面试真题集锦
GL1765852966的博客
12-26 8万+
目录 … 1 大厂面试的基本流程 17 字节跳动 17 阿里 17 腾讯 18 网易游戏 18 面试前需要准备： 18 面试中可以借鉴的套路 19 用简历争取到更多的面试机会 19 自我介绍时，立即全面抛出技术栈和亮点 20 先介绍项目背景，打消面试官疑问 21 通过说项目管理工具，说明你不仅会写代码 22 用 SPRING BOOT 项目举例，说明你的技术基本面 23 用实例说明你在内存调优方面的经验 24 展示你在数据库调优方面的经验 25 总结前文说辞 26 准备项目说辞时，更可以准备后继面试官的问
牛客网-精华专题-前端校招面试题目合集
qq_41254204的博客
02-01 2961
前端校招面试题目合集 501HTML HTML 浏览器页面有哪三层构成，分别是什么，作用是什么? 构成：结构层(structural layer)、表示层(presentation layer)、行为层 (behavior layer) 分别是：HTML、CSS、JavaScript 作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务 H...
JavaScript 面试题汇总
筱的博客
05-08 2024
JavaScript 面试题汇总
最全面、最详细web前端面试题及答案总结
热门推荐
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
Web前端面试题
m0_54419847的博客
06-22 1307
注册登录是怎么实现的 1.登陆注册要做成受控组件，组件定义state，和表单绑定 2.redux-saga调用数据请求，发送action修改数据， useEffect中dispatch发送数据请求，后端比对用户名是否重复，返回state 3.前端根据返回的信息成功跳转登陆页 4.登陆发送数据请求，数据库对比用户名密码是否正确, 根据后端返回的结果进入首页 5.setCookie将用户登录名密码token存cookie中 通过JWT(Json web token) 6.免密登陆 get
JavaScript面试题汇总
狡辉两门的博客
07-01 545
JavaScript 面试题汇总
前端面试题整理
俊逸豪杰的小天地
02-24 1326
前端和计算机相关知识你能描述一下渐进增强和优雅降级之间的不同吗浏览器兼容问题如何对网站的文件和资源进行优化?怎么学习前端?怎么接触前端新知识?关于前后端分离关于浏览器内核(渲染引擎)浏览器加载文件顺序以及repaint/reflow为什么使用多个域名来存储网络资源会更有效？进程和线程的区别前端开发的优化问题Flash，Ajax各自的优缺点，使用中如何取舍？ CSSCSS3css居中的方式请写一个简单
【前端】前端面试题整理
weixin_39363245的博客
08-02 1001
前端和计算机相关知识 你能描述一下渐进增强和优雅降级之间的不同吗 浏览器兼容问题 如何对网站的文件和资源进行优化? 怎么学习前端?怎么接触前端新知识? 关于前后端分离 关于浏览器内核(渲染引擎) 浏览器加载文件顺序以及repaint/reflow 为什么使用多个域名来存储网络资源会更有效？ 进程和线程的区别 前端开发的优化问题 Flash，Ajax各自的优...
Java 面试题 2024
qq_58353992的博客
03-02 1080
2024 Java面试题，每日持续更新
2024秋招测开面试题整理
m0_67281369的博客
09-20 311
秋招面试题整理
模拟面试面试题汇总 
u011526274的博客
04-27 3002
模拟面试面试题汇总 第一轮面试题 一、描述下数据库中的事务--ACID各个的特点。 原子性：事务中的操作要么全部成功要么全部失败。 一致性：事务前后数据的完整性必须保持一致。 隔离性：多个并发的事务之间是相互隔离的，互不干扰的。 持久性：事务提交后，数据是永久改变的。 二、什么是springboot？你们公司是用的哪个版本？ SpringBoot是Spring推出用于解决传统框架配置文件冗余,装配组件繁杂的基于Maven的解决方案,旨在快速搭建单个微服务。 版本号：2...
【参考】前端面试攻略（自整理）
mus-z的博客
04-05 1195
该博主看起来挺厉害的百度携程滴滴头条360的offer都有， 我马上也要人生第一次前端实习面试了是美团的所以刷题看看人家的面经~ 链接：https://m.sohu.com/a/236608417_690895 这个各方面都有吧能找到答案的我一般都做了传送门 文章目录一、算法部分1、基本排序的方式2、二分查找。3.二叉树便利（前序中序后序）4.尽量刷牛客和剑指offer二、计算机网络部分1.最...
喜获蚂蚁offer，定级p7，面经分享，万字长文带你走完面试全过程
javadada1197的博客
08-18 1109
前言 在今天，我收到了蚂蚁金服A级的实习录用offer。 从开始面试到拿到口头offer（四面技术+一面HR）战线大约拉了半个月， 从拿到口头offer到收到正式录用邮件大概又是半个月。 思前想后，决定还是做一个整理与总结。 一方面是回顾并记录自己的努力过程， 一方面也是希望对后来者起到一些帮助。 前方高能预警，本篇文章万字有余，通读可能要很久。 快速领取通道：（点这里）免费获取！诚意满满！！！ 目录 如何进行知识积累 如何把握实践与理论的天平 我应该如何整理笔记 怎么复习才不会忘 面试前 怎么写出让人眼前
06_实现watch
qq_53109172的博客
10-16 1120
watch 本质上就是监听一个响应式数据，这个响应式数据发生变化的时候，进行通知并触发相应的回调函数。
004-按照指定功能模块名称分组
最新发布
xiaogang1226的博客
10-16 429
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
前端开发攻略---8种方法实现在浏览器中跨页面通信
nibabaoo的博客
10-15 1274
浏览器实现跨标签页通信的多种方式
前端地图数据开发
shuxiaoxii的博客
10-13 372
基于Turf.js教你快速实现地理围栏的合并拆分。turf js 地理空间分析库，处理各种地图算法。如何拆分一个乡镇或区的地图。获取市级的行政区域划分。直接导入地图的json。高德地图查看市级区域。js实现地图区域合并。
计算机毕业设计 | SSM 校园线上订餐系统(附源码)
说书客
10-14 1169
本系统基于SSM实现了餐馆点餐系统。项目功能（用户点餐子系统）：登录注册，选座，商品购买，我的订单等。（后台管理子系统）：用户管理，餐桌管理，菜品管理，菜系管理，订单管理等
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 845
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
前端面试题解析：手写JavaScript代码实现
"该资源为2021年的前端面试题汇总，重点在于手写代码题目，涵盖了JavaScript基础，包括Object.create、instanceof方法的实现以及new操作符的工作原理等核心概念。" 在前端面试中，掌握JavaScript的基础及其实现机制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值