前端大厂面试题

前言

本篇文章主要一些面试题希望可以帮助到大家

面试题1

已知如下对象 请基于ES6的proxy方法设计一个属性拦截读取操作的例子

要求实现去访问目标对象example不存在的属性时，抛出错误

Property ${property} does not exist  --2018年今日头条

const man = {
    name: "jsCoder",
    age: 22
}
const proxy = new Proxy(man, handler)
console.log(proxy.name, proxy.age) //jsCoder 22
console.log(proxy.sex ) Error
proxy.sex = 'ss' //Error

我的答案
const handler = {
    get(target, propKey, receiver) {
        if (!target[propKey]) {
            return new Error(`Property ${propKey} does not exist`)
        } else {
            return target[propKey]
        }
    },
}
const proxy = new Proxy(man, handler)
console.log(proxy.sex ) Error

面试题2

//红灯三秒亮一次, 绿灯一秒亮一次, 黄灯2秒亮一次
//实现一个函数，如何让三个灯不断交替重复亮灯? (用Promise实现) 三个亮灯函数已经存在:
function red() {
    console.log("red");
}
function green() {
    console.log("green");
}
function yellow() {
    console.log("yellow");
}
// my answer :我的答案
const promise = new Promise((resolve, reject) => {
    resolve(123)
});
setInterval(() => {
    promise.then(res => {
        setTimeout(() => {
            red();
        }, 1000);
    }).then(res => {
        setTimeout(() => {
            green();
        }, 2000);
    }).then(res => {
        setTimeout(() => {
            yellow();
        }, 3000);
    })
}, 3000)

面试题3

//按照顺序写出控制台打印结果(2020碧桂园)
var User = {
    count: 1,
    action: {
        getCount: function () {
            return this.count
        }
    }
}
var getCount = User.action.getCount;
setTimeout(() => {
    console.log('result1', User.action.getCount())
});
console.log('result2', getCount())

//答案 
result2 undefined
result1 undefined

面试题4

简答题（字节跳动二面）

你觉得ts和js 有什么区别

ts是js超集，有更严格类型校验 有利于项目维护

ts你都用过那些类型

string Boolean null undefined 元组 泛型 枚举

ts中的type和interface的区别

interface 和 type 都可以拓展，并且两者并不是相互独立的，

也就是说 interface 可以 extends type, type 

也可以 extends interface 。 虽然效果差不多，但是两者语法不同。

type 可以声明基本类型别名，联合类型，元组等类型

面试题5

对async和await的理解，分析内部原理
①字面意思是async是异步 await是等待
②async和await本质是generator的语法糖 
③在内部维护指针对象 对象内部有个done 的布尔值 根据布尔值运行代码

面试题6

async/await 如果右边代码方法执行出错怎么办（百度2020一面）
①trycatch 包裹一下
②在右边方法加入catch查看报错

面试题7

说一下eventloop的过程 promise定义时传入的函数什么时候执行(小米3面)
答案不知道

面试题8

说一下防抖函数的应用场景 并简单说下实现方式
这一题我也不会

面试题9

说一下v8的垃圾回收机制（小米）
主要是GC算法实现的
1、引用计数算法
2、标记清除算法
3、标记整理算法
4、增量算法

面试题10

performance API总什么指标可以衡量首屏时间
答案：不知道

面试题11

在ECMAScript新特性 暂时性锁死区有什么作用
答案：防止访问

面试题12

观察者模式和发布订阅模式的区别
答案：不知道

面试题13

gulp自己写过任务吗 说一下它的构建流程

答案：写过 gulp本质基于流 读取流 转换流 读取流

构建流程: html + css + js + 服务器 （开发预览）

通过编译这些文件进行开发

面试题14

package-lock.json 有什么作用 如果项目中没有它会怎么样举例说明
作用：用于锁定安装的依赖版本号
没有package-lock.json 它的后果是：如果是当前项目需要多人协作其他人通过package下载依赖
和自己使用的依赖不一样项目可能会出现问题，某些依赖的api可能会标导致项目出现问题

面试题15

webpack 常用配置有哪些 -跟谁学
1、entry webpack入口
2、output webpack 出口
3、serverwebpack开发服务器
4、plugin webpack插件
5、rules 文件编译

面试题16

阐述webpack 成寿寺-loader的作用和原理
答案不会

面试题17

webpack中的loader和plugin的区别是什么（字节跳动和搜狐）
答案不会

面试题18

webpack，rollup，parcel的优劣

面试题19

babel.config.js和.babelrc有什么区别

面试题20

webpack中的tree shaking的用途和原理是什么

面试题21

阐述一下eventbus的原理，讲述eventbus在vue中实践（猿辅导）

面试题22

vue-loader原理是什么

谢谢观看，如有不足，敬请指教