Daily-Interview-Question README

The project's README from github.com/Advanced-Frontend/Daily-Interview-Question. As one markdown file: README.md.

Daily-Interview-Question

加入「前端面试互助群」学习小组,搜索公众号「高级前端进阶」,关注即可加入!

工作日每天一道大厂前端面试题,一年后再回头,会感谢曾经努力的自己!

线上版本阅读更流畅,点击阅读


推荐一个不错的前端算法系列,点击查看


推荐扫码使用微信小程序,除了本项目之外,还囊括了算法题、选择题等多种类型题目和详细解析

记住我们的 Slogan:上下班路上刷一点,半年突击进大厂


今日面试题

第 162 题:实现对象的 Map 函数类似 Array.prototype.map

解析:第 162 题


最近汇总

第 161 题:用最精炼的代码实现数组非零非负最小值 index

// 例如:[10,21,0,-7,35,7,9,23,18] 输出 5, 7 最小
function getIndex(arr){
      let index=null;
      ...
      return index;
}

解析:第 161 题


第 160 题:输出以下代码运行结果,为什么?如果希望每隔 1s 输出一个结果,应该如何改造?注意不可改动 square 方法

const list = [1, 2, 3]
const square = num => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(num * num)
    }, 1000)
  })
}

function test() {
  list.forEach(async x=> {
    const res = await square(x)
    console.log(res)
  })
}
test()

解析:第 160 题


第 159 题:实现 Promise.retry,成功后 resolve 结果,失败后重试,尝试超过一定次数才真正的 reject

解析:第 159 题


第 158 题:如何模拟实现 Array.prototype.splice

解析:第 158 题


第 157 题:浏览器缓存 ETag 里的值是怎么生成的

解析:第 157 题


第 156 题:求最终 left、right 的宽度

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

<style>
  * {
    padding: 0;
    margin: 0;
  }
  .container {
    width: 600px;
    height: 300px;
    display: flex;
  }
  .left {
    flex: 1 2 300px;
    background: red;
  }
  .right {
    flex: 2 1 200px;
    background: blue;
  }
</style>

注:此题和 155 题 left、right 样式有些不同

解析:第 156 题


第 155 题:求最终 left、right 的宽度

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

<style>
  * {
    padding: 0;
    margin: 0;
  }
  .container {
    width: 600px;
    height: 300px;
    display: flex;
  }
  .left {
    flex: 1 2 500px;
    background: red;
  }
  .right {
    flex: 2 1 400px;
    background: blue;
  }
</style>

解析:第 155 题


第 154 题:弹性盒子中 flex: 0 1 auto 表示什么意思

解析:第 154 题


第 153 题:实现一个批量请求函数 multiRequest(urls, maxNum)


要求如下:

  1. 要求最大并发数 maxNum

  2. 每当有一个请求返回,就留下一个空位,可以增加新的请求

  3. 所有请求完成后,结果按照 urls 里面的顺序依次打出

解析:第 153 题


2019-12-31

第 152 题:实现一个 normalize 函数,能将输入的特定的字符串转化为特定的结构化数据

解析:第 152 题


2019-11-25

第 151 题:用最简洁代码实现 indexOf 方法

解析:第 151 题


2019-11-21

第 150 题:二分查找如何定位左边界和右边界

不使用JS数组API,查找有序数列最先出现的位置和最后出现的位置

解析:第 150 题


2019-11-12

第 149 题:babel 怎么把字符串解析成 AST,是怎么进行词法/语法分析的?

解析:第 149 题


2019-11-01

第 148 题: webpack 中 loader 和 plugin 的区别是什么(平安)

解析:第 148 题


2019-10-31

第 147 题:v-if、v-show、v-html 的原理是什么,它是如何封装的?

解析:第 147 题


2019-10-29

第 146 题:Vue 中的 computed 和 watch 的区别在哪里(虾皮)

解析:第 146 题


2019-10-24

第 145 题:前端项目如何找出性能瓶颈(阿里)

解析:第 145 题


2019-10-22

第 144 题:手写二进制转 Base64(阿里)

解析:第 144 题


2019-10-21

第 143 题:将 '10000000000' 形式的字符串,以每 3 位进行分隔展示 '10.000.000.000'

解析:第 143 题


2019-10-17

第 142 题:(算法题)求多个数组之间的交集(阿里)

解析:第 142 题


2019-10-15

第 141 题:Vue 中的 computed 是如何实现的(腾讯、平安)

解析:第 141 题


2019-10-14

第 140 题:为什么 HTTP1.1 不能实现多路复用(腾讯)

解析:第 140 题


2019-09-17

第 139 题:谈一谈 nextTick 的原理

解析:第 139 题


2019-09-11

第 138 题:反转链表,每 k 个节点反转一次,不足 k 就保持原有顺序(哔哩哔哩)

解析:第 138 题


2019-09-04

第 137 题:如何在 H5 和小程序项目中计算白屏时间和首屏时间,说说你的思路

解析:第 137 题


所有面试题汇总


半月刊


联系我

进阶系列文章汇总如下,觉得不错点个 star,欢迎 加群 互相学习。

https://github.com/yygmind/blog

我是木易杨,公众号「高级前端进阶」作者,跟着我每周重点攻克一个前端面试重难点。接下来让我带你走进高级前端的世界,在进阶的路上,共勉!

image

Daily-Interview-Question (Advanced-Frontend/Daily-Interview-Question)

Searching Database…

What is this?A long-running, daily Chinese front-end interview question series curated by blogger 木易杨 (WeChat account 高级前端进阶). Each entry poses one real-world front-end interview problem - covering JavaScript, CSS, Vue, React and browser internals - with a linked, detailed written solution.
Is this a structured course or just a running list of questions?It is a running list, not a course: on workdays a new standalone question-and-answer entry is added, numbered sequentially (past #160 so far), with no fixed curriculum or required order between entries.
How is the list organized, and where should I start?Each question is numbered and dated with a short problem statement linking to a Markdown file containing the full solution; new readers are pointed to the biweekly digests ('半月刊') and the '壹题所有题目及答案汇总' index, which group high-frequency questions for faster review instead of scrolling every daily entry.
Does it cover anything beyond front-end JavaScript/CSS, and is it still active?No - the scope stays strictly front-end (JavaScript, CSS, Vue, React, browser caching, webpack, Babel, Promises, basic algorithms); there is no backend or mobile content. The project has kept adding numbered entries continuously since 2019, with the latest tracked question at #162.
Who is this aimed at?Front-end developers preparing for interviews at major Chinese tech companies - many questions are explicitly tagged with the company that asked them, such as Alibaba, Tencent, Ping An and Shopee.
What is the WeChat Mini Program mentioned in the README?The author also runs a WeChat Mini Program alongside the WeChat Official Account '高级前端进阶', which adds extra algorithm problems and multiple-choice questions with detailed explanations beyond what is in this repo.
Is there an easier way to read all the questions than scrolling the README?Yes, the README links to a smoother-reading online version of the full question list for easier browsing than the raw GitHub page.
Does it include hands-on coding exercises or just conceptual Q&A?Both - several entries are hands-on coding tasks, like reimplementing Array.prototype.splice, writing a concurrency-limited batch request function, or finding intersections across arrays, in addition to conceptual questions.
Size
0.2 MB
Stars
27.3K
Updated
CommitNov 09
Age
7y
Commits · 90 Days