Convert Figma logo to code with AI

Advanced-Frontend logoDaily-Interview-Question

我是依扬(木易杨),公众号「高级前端进阶」作者,每天搞定一道前端大厂面试题,祝大家天天进步,一年后会看到不一样的自己。

27,388
3,287
27,388
262

Top Related Projects

前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上5点纯手工发布面试题(死磕自己,愉悦大家),6000+道前端面试题全面覆盖,HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……

⚡️ Front End interview preparation materials for busy engineers

A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.

A long list of (advanced) JavaScript questions, and their explanations :sparkles:

List of 1000 JavaScript Interview Questions

💯 Curated coding interview preparation materials for busy software engineers

Quick Overview

Advanced-Frontend/Daily-Interview-Question is a GitHub repository that provides a collection of daily front-end interview questions and answers. It aims to help developers prepare for technical interviews and improve their knowledge of front-end development concepts. The repository is maintained in Chinese, with some English translations available.

Pros

  • Covers a wide range of front-end topics, including JavaScript, CSS, HTML, and browser-related concepts
  • Regular updates with new questions and answers
  • Encourages community participation through discussions and contributions
  • Includes both theoretical questions and practical coding challenges

Cons

  • Primarily in Chinese, which may limit accessibility for non-Chinese speakers
  • Some answers may lack depth or alternative solutions
  • Not all questions have accompanying code examples or explanations
  • The organization of topics could be improved for easier navigation

Getting Started

To use this repository:

  1. Visit the GitHub page: https://github.com/Advanced-Frontend/Daily-Interview-Question
  2. Browse through the issues to find interview questions and answers
  3. Use the search functionality to find specific topics or keywords
  4. Contribute by commenting on existing questions or submitting new ones through issues

Note: Since this is not a code library, there are no code examples or installation instructions. The repository serves as a reference and learning resource for front-end developers preparing for interviews.

Competitor Comparisons

前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上5点纯手工发布面试题(死磕自己,愉悦大家),6000+道前端面试题全面覆盖,HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……

Pros of fe-interview

  • More comprehensive coverage of frontend topics, including HTML, CSS, and JavaScript
  • Daily updates with new questions, providing a consistent learning experience
  • Includes a wider range of difficulty levels, catering to both beginners and advanced developers

Cons of fe-interview

  • Less focus on in-depth explanations for complex topics
  • May lack the same level of community engagement and discussions as Daily-Interview-Question
  • Questions might be more repetitive or cover similar concepts frequently

Code Comparison

fe-interview:

function debounce(fn, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  }
}

Daily-Interview-Question:

function throttle(fn, delay) {
  let last = 0;
  return function() {
    const now = Date.now();
    if (now - last > delay) {
      last = now;
      fn.apply(this, arguments);
    }
  }
}

Both repositories provide code examples for common frontend concepts, but they may focus on different aspects or implementations of similar topics.

⚡️ Front End interview preparation materials for busy engineers

Pros of front-end-interview-handbook

  • Comprehensive coverage of front-end topics, including HTML, CSS, JavaScript, and more
  • Well-organized structure with clear categories and subcategories
  • Available in multiple languages, making it accessible to a wider audience

Cons of front-end-interview-handbook

  • Less frequent updates compared to Daily-Interview-Question
  • Focuses more on general knowledge rather than specific, daily challenges
  • May lack some of the community engagement and discussion found in Daily-Interview-Question

Code Comparison

front-end-interview-handbook:

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

Daily-Interview-Question:

function throttle(fn, delay) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last > delay) {
      last = now;
      fn.apply(this, args);
    }
  }
}

Both repositories provide valuable resources for front-end developers preparing for interviews. front-end-interview-handbook offers a more structured and comprehensive approach, while Daily-Interview-Question provides regular, focused challenges that can help keep skills sharp. The choice between the two depends on individual learning preferences and goals.

A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.

Pros of Front-end-Developer-Interview-Questions

  • Comprehensive coverage of various front-end topics
  • Multi-language support with translations in many languages
  • Well-organized structure with categorized questions

Cons of Front-end-Developer-Interview-Questions

  • Less frequent updates compared to Daily-Interview-Question
  • Lacks detailed answers or explanations for the questions
  • May not cover the latest trends in front-end development as quickly

Code Comparison

Front-end-Developer-Interview-Questions doesn't provide code examples directly, while Daily-Interview-Question often includes code snippets in its questions and answers. For example:

Daily-Interview-Question:

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve();
  console.log(2);
});
promise.then(() => {
  console.log(3);
});
console.log(4);

Front-end-Developer-Interview-Questions focuses more on conceptual questions without code examples:

What is the difference between `==` and `===`?
Explain how `this` works in JavaScript.
What is the difference between variables created using `let`, `var` or `const`?

Both repositories serve as valuable resources for front-end developers preparing for interviews, with Daily-Interview-Question offering more frequent updates and code-based questions, while Front-end-Developer-Interview-Questions provides a broader, multi-lingual collection of conceptual questions.

A long list of (advanced) JavaScript questions, and their explanations :sparkles:

Pros of javascript-questions

  • More focused on JavaScript-specific concepts and quirks
  • Includes detailed explanations for each question and answer
  • Regularly updated with new questions and community contributions

Cons of javascript-questions

  • Limited to JavaScript topics, not covering broader frontend development
  • Less structured in terms of difficulty levels or categories
  • Fewer questions overall compared to Daily-Interview-Question

Code Comparison

javascript-questions:

let a = 3;
let b = new Number(3);
let c = 3;

console.log(a == b);
console.log(a === b);
console.log(b === c);

Daily-Interview-Question:

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve();
  console.log(2);
});

promise.then(() => {
  console.log(3);
});

console.log(4);

The javascript-questions example focuses on JavaScript's type coercion and object comparison, while Daily-Interview-Question covers more complex topics like asynchronous programming and the event loop.

Both repositories offer valuable resources for frontend developers preparing for interviews or improving their skills. javascript-questions excels in deep JavaScript knowledge, while Daily-Interview-Question provides a broader range of frontend-related topics and challenges.

List of 1000 JavaScript Interview Questions

Pros of javascript-interview-questions

  • More comprehensive coverage of JavaScript topics, including ES6+ features
  • Well-organized with clear categories and subcategories
  • Includes code snippets and explanations for each question

Cons of javascript-interview-questions

  • Less frequent updates compared to Daily-Interview-Question
  • Focuses solely on JavaScript, while Daily-Interview-Question covers broader frontend topics
  • May be overwhelming for beginners due to the large number of questions

Code Comparison

Daily-Interview-Question example:

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

javascript-interview-questions example:

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

let generator = generateSequence();
console.log(generator.next().value);

Both repositories provide valuable resources for frontend developers preparing for interviews. Daily-Interview-Question offers a broader range of topics and more frequent updates, making it suitable for daily practice. On the other hand, javascript-interview-questions provides a more in-depth focus on JavaScript, with well-organized categories and detailed explanations. The choice between the two depends on the specific needs and preferences of the developer.

💯 Curated coding interview preparation materials for busy software engineers

Pros of tech-interview-handbook

  • Comprehensive coverage of various topics beyond frontend, including system design and behavioral questions
  • Well-structured content with clear categorization and navigation
  • Includes additional resources like resume preparation and negotiation tips

Cons of tech-interview-handbook

  • Less frequent updates compared to Daily-Interview-Question
  • May be overwhelming for beginners due to the vast amount of information
  • Focuses more on general software engineering concepts rather than specific frontend challenges

Code Comparison

tech-interview-handbook:

function binarySearch(arr, target) {
  let left = 0;
  let right = arr.length - 1;
  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    if (arr[mid] === target) return mid;
    if (arr[mid] < target) left = mid + 1;
    else right = mid - 1;
  }
  return -1;
}

Daily-Interview-Question:

function debounce(fn, delay) {
  let timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

The code examples highlight the difference in focus between the two repositories. tech-interview-handbook provides more general algorithm implementations, while Daily-Interview-Question offers practical frontend-specific solutions.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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