前端面试总结

最新推荐文章于 2024-05-13 02:08:20 发布

barnett_y

最新推荐文章于 2024-05-13 02:08:20 发布

阅读量495

点赞数

分类专栏：【前端面试点滴知识】

原文链接：https://www.tuicool.com/articles/JfANbuN

版权

【前端面试点滴知识】专栏收录该内容

299 篇文章 39 订阅

订阅专栏

本文记录了值得研究的四大互联网大厂的面试题目，带你全面了解—— 【最近，前端面试都问些什么】

百度

1、请分析以下代码执行结果

['1', '3', '10'].map(parseInt);

2、请分析以下代码执行结果

var number = 10;
function fn() {
  console.log(this.number);
}
var obj = {
  number: 2,
  show: function(fn) {
    this.number = 3;
    fn();
    arguments[0]();
  }
};
obj.show(fn);

3、请写出 inner 的实际高度。

<style>
  .outer {
    width: 200px;
    height: 100px;
  }
  .inner {
    width: 60px;
    height: 60px;
    padding-top: 20%;
  }
</style>
<div class="outer"><div class="inner"></div></div>

4、手写一个深拷贝函数。

5、HTTP 状态码 301 302 304 403。

6、手写发布订阅模式 EventEmitter。

7、手写一个多表查询的 sql 语句。

当时用的是 left join 实现。

8、react 高阶函数的写法，通常有哪几种。

第一种是通过工厂模式直接 wrapper，第二种是通过组件反向继承的方式。

// 反向继承方式写法如下
class A extends B{
  render() {
    return (
      <div>component1 start</div>
        super.render()
      <div>component1 end</div>
    )
  }
}

9、delete 数组的 item，数组的 length 是否会 -1。

不会。

10、mongoDB 中的 BSON 是什么？

B 代表二进制。

11、关系型数据库和 nosql 查询效率谁高？

关系型是 B+ tree 查询效率相对较高。

12、使用 node app.js 开启服务，如何让它在后台运行。

开启守护进程，在命令后加上 & 符号，表示开启守护进程来执行。

node app.js &

13、尽可能写出更多的数组副作用方法。

splice、push、pop、shift、unshift。
sort、fill、reverse。

百度三面：

1、实现一个周岁函数，例如 fn('2018-8-8') 输出 1，只要是过了生日就 +1。

2、不断优化刚才实现的函数，用尽一切办法，多问一问还有吗？跳出自己的固定思维圈。

阿里

1、vue 双向数据绑定原理，依赖收集是在什么时候收集的？

是在 created 生命周期之前，render 生成虚拟 dom 的时候。

2、react hooks 原理是什么？

hooks 是用闭包实现的，因为纯函数不能记住状态，只能通过闭包来实现。

3、useState 中的状态是怎么存储的？

通过单向链表，fiber tree 就是一个单向链表的树形结构。

React Hooks 原理

爱奇艺

1、浏览器渲染 js，html，css 的顺序。

2、react dom diff 算法，list 比较首先比较的是什么？

首先比较同层级元素，从左到右。

3、为什么 react 要做成异步的呢？

因为 state 更新会导致组件重新渲染，在渲染后，才能把新的 props 传递到子组件上，所以即使 state 做成同步，props 也做不成，为了保证 state 和 props 的一致性。
为了性能优化，state 会根据不同的优先级进行更新。
为了让 react 更加灵活，如实现异步过渡，例如页面在切换的时候，如果延时很小，就在后台自动渲染了，渲染好之后再进行跳转；如果延时相对较长，可以加一个 loading。

4、对象的 {…} 解构，是 rest 吗？

是。

5、自己实现一个 Symbol Interator 。

// 给一个对象设置Symbol Interator
var obj = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
};

6、options 头是在什么时候会进行发送。

检测服务器所支持的请求方法
CORS 中的预检请求

7、sessionStorage 在两个 tab 窗口能共享吗？

不能，和后端的 session 类似，每一个窗口对应一个会话层。

8、localStorage 存放的只能是 string 类型。

插入时需要将对象转换为字符串，读取时需要做 JSON.parse 转换。

9、写一个 0-100 的正则表达式。

/^(\d|[1-9]\d|100)$/;

10、linux 中怎么查看内存和磁盘。

top 命令，查看内存。
free 命令，查看内存。
ps aux 列出当前内存中正在运行的程序。
df 命令，查看磁盘。

11、meta 标签用过吗，都用来做些什么？

seo 优化
viewreport 设置手机端适配
设置 charset 字符编码
模拟 http 标头字段

<meta name="keywords" content="电商,物流" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<!-- 模拟 html 缓存头部 -->
<meta http-equiv="expires" content="Sunday 22 July 2016 16:30 GMT" />

字节跳动

1、请分析以下代码执行结果

async function a() {
  var result = Promise.resolve();
  result.abort = function() {
    console.log('xxx');
  };
  return result;
}
var p = a();
p.abort();

2、手写一个节流函数

手写节流函数

3、什么是装箱和拆箱

装箱和拆箱操作，能够在值类型和引用类型中架起一座桥梁。换言之,可以轻松的实现值类型与引用类型的互相转换。

装箱是将值类型转换为引用类型，拆箱是将引用类型转换为值类型。

4、什么是委托

粗略来说，一个类想执行一个方法，但它本身没有这个方法，这个方法在另一个类中，于是它“委托”那个类来帮它执行。

using System;
using System.Collections.Generic;
using System.Text;
namespace Delegate
{
    //定义委托，它定义了可以代表的方法的类型
    public delegate void GreetingDelegate(string name);
    class Program
    {
        private static void EnglishGreeting(string name)
        {
            Console.WriteLine("Morning, " + name);
        }
        private static void ChineseGreeting(string name)
        {
            Console.WriteLine("早上好, " + name);
        }
        //注意此方法，它接受一个 GreetingDelegate 类型的参数，该参数是返回值为空，参数为 string 类型的方法
        private static void GreetPeople(string name, GreetingDelegate MakeGreeting)
        {
            MakeGreeting(name);
        }
        static void Main(string[] args)
        {
            GreetPeople("yhlben", EnglishGreeting);
            GreetPeople("yhlben", ChineseGreeting);
            Console.ReadKey();
        }
    }
}

5、手写一个 reduce 方法。

Array.prototype.reduce = function(reducer, initVal) {
  for (let i = 0; i < this.length; i++) {
    initVal = reducer(initVal, this[i], i, this);
  }
  return initVal;
};

6、手写一个模板字符串替换方法

function template(html, obj) {
  return html.replace(/\{\{(.*?)\}\}/g, function(match, key) {
    return obj[key.trim()];
  });
}

template('{{name}}很厉name害，才{{ age }}岁', { name: 'jawil', age: '15' });

7、看过 antd 源码吗，如何实现一个 Model，Message 组件？

只能猜想到 React Portals，未曾看过源码，有待提升。

8、如果要设计一套微前端架构，说说你的具体思路？如何实现主页面事件注册机制？如何解决多个 iframe 同时通信？

需要有落地实战项目，不然很难答好，消息加锁等。

总结

技术面试一般分为三面。

一面：考察基础，必须过硬，如：js、css、html、tcp/ip 协议栈、浏览器渲染等。

二面：结合实际项目考察技术深度，如：react、vue、koa、ts、webpack 等。

三面：结合实际项目考察项目思考，如：react 的优缺点、前端方向的思考、以及解决问题的思考方式等。

前端程序员的福利

巴菲特有句名言：“人生就像滚雪球，最重要的是发现湿的雪和长长的山坡。”职业发展亦是如此，前端人除了埋头踏实苦干，更要懂得抬头思考远望，在行业变化中找到正确的方向。如果你想：

深入了解高级前端工程师的知识体系
突破技术成长瓶颈，避免中年危机
通关 BAT 大厂技术面试，实现大厂梦
拿高薪offer，提高自己和家人的生活品质

欢迎扫描下方二维码，扫码成功添加好友，即可 免费获取 我的精品课【高级前端面试必备的核心知识点】

扫码领取

先到先得

----------------------------------------------

大纲如下：

1.一线大厂前端面试高频考点

大厂面试各环节究竟想考什么
笔试题的考察核心和经典案例
如何与HR谈薪资可以利益最大化

2.前端面试高频排序算法解析

前端面试必备的算法知识
常用排序法解析
前端算法思维的养成

3.大厂手写代码全攻略

4. Webpack开发SPA与MPA核心知识

了解SPA与MPA开发的性能指标区别
CSS in JS & JS in CSS工程实践
学习Webpack优化SPA与MPA配置区别

5.基于AST实现简版Webpack

了解Webpack基础运行原理
了解AST在前端开发具体用途
从0到1带你手写简版的Webpack

6.Webpack5新特性尝鲜与微前端

学习Webpack5最新特性和进展
学习Webpack在微前端具体实现细节

barnett_y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试总结

本文记录了值得研究的四大互联网大厂的面试题目，带你全面了解——【最近，前端面试都问些什么】百度1、请分析以下代码执行结果['1', '3', '10'].map(parseInt);2、请分析以下代码执行结果var number = 10;function fn() { console.log(this.number);}var obj = { num...
复制链接

扫一扫

专栏目录