每天 30 秒系列

前端精选问题集，每天仅需 30 秒

明日 30s - React Visual - 自动计数器
今日 30s - Tab 组件
昨日 30s - 星级比率组件

---

每天 30 秒系列之前端面试

精选常见面试题，帮助您准备下一次面试

HTML

• 图片标签中的 alt 有什么作用？
• 清缓存的目的是什么，如何实现？
• HTML 中可以包含多个 <header> 或者 <footer> 元素吗？
• 简单描述 HTML5 语义元素中 <header>、<article>、<section>、<footer> 的正确用法
• 简述 <script> 标签中的 defer 和 async 属性
• 什么是 DOM？
• HTML 规范和浏览器实现存在什么区别？
• XHTML 和 HTML 有什么不同?
• rel="noopener" 应在什么场景下使用，为什么？
• 什么是 HTML5 存储？解释一下 localStorage 和 sessionStorage
• 解释 MIME type 及其作用

CSS

• 介绍一下 CSS 的 BEM
• CSS 预处理器有什么优势？
• 使用 flexbox，创建一个 3 列布局，其中每列占据容器的 col-{n} / 12 比率
• 简述一下 @media 的媒体类型
• 描述 CSS 盒子模型布局并简要描述其每一个部分
• focus 有什么效果？应该怎么正确处理他们？
• em 和 rem 有什么区别？
• CSS sprites 的优点及如何使用？
• + 和 ~ 选择器有什么区别？
• CSS 优先级是如何计算的？

JavaScript

• ['1', '7', '11'].map(parseInt) 的输出结果是？
• 等于操作符 `==` 和 `===` 有什么区别
• 后置递增 `i++` 和前置递增 `++i` 操作有什么区别？
• Promise 有哪些状态？
• 根据食谱和已有食材计算可烹饪的最大次数
• 实现一个功能和 Function.prototype.bind 相同的函数
• 请举例说明什么是回调？
• 如何克隆一个 JavaScript 对象？
• JavaScript 中如何对比两个对象？
• CORS 是什么？
• 介绍事件委托及其优点，并说明如何使用？
• JavaScript 的表达式和语句有什么区别？
• JavaScript 中的真值和假值是什么？
• 生成一个包含 n 项的斐波那契数列
• 0.1 + 0.2 === 0.3 的计算结果是什么？
• 数组方法 map() 和 forEach() 有什么区别？
• 变量提升
• 提升在 JavaScript 中是如何工作的？
• 立即执行匿名函数的原因是什么？
• 词法作用域和动态作用域的区别？
• 使用星号替换字符串且显示后四位
• null 和 undefined 有什么区别？
• 参数和 arguments 有什么区别
• 列举几种创建对象的方法，并说明每种方法的使用场景
• JavaScript 通过值还是引用传递？
• 什么是 Promises？
• 原型继承和经典继承有什么区别？
• 原始值和引用值的比较
• ASI (automatic semicolon insertion) - 自动插入分号
• JavaScript 是否需要分号？
• 在 JavaScript 中同步和异步代码有什么区别？
• JavaScript 中的短路计算是什么？
• typeof
• 什么是 JavaScript 数据类型？
• var、let、const 和没有关键字的声明有什么区别？
• 什么是大 O 符号？
• 什么是闭包？请给出一个有用的示例
• 什么是事件驱动编程？
• 什么是函数式编程？
• 命令式编程和声明式编程有什么区别？
• Memoization 是什么？
• 对比 Mutable 和 Immutable 及 Mutating 和 Non-Mutating
• JavaScript 中唯一自己不等于自己的值是谁？
• 复合函数
• 什么是纯函数？
• 解释递归及其使用场景
• 静态方法和实例方法的区别
• 解释 this 关键字并介绍他是如何工作的？
• React, Vue, Angular, Hyperapp 等 JavaScript UI 库或框架的目的是什么？
• use strict 的作用
• 虚拟 DOM 是什么，库或者框架中为什么要使用他？

React

• 什么是内联条件表达式？
• React 和 HTML 的事件处理有什么不同？
• React 中的元素和组件有什么不同？
• 状态提升在 React 中的作用
• React 中如何在 JSX 树中写注释
• React 中什么是有状态的组件？
• 什么是无状态组件
• setState 使用回调函数作为参数的目的是什么？
• 为什么 React 要使用 className 来代替 HTML 中的 class？
• key 是什么？列表中使用时有什么优点？
• React 生命周期的方法有哪些？
• React 组件生命周期有哪些不同的阶段？
• 如何将参数传递给事件处理或回调函数？
• allback refs 和 findDOMNode() 之间哪一个更好？
• 什么是 children 属性？
• React 中的 context 是什么？
• 什么是 React 中的错误边界？
• fragments 是什么？
• 什么是高阶组件？
• 在 React 组件类中如何保证 this 为正确的上下文？
• React 中的 portals 是什么？
• React 中如何使用 prop 检查？
• 介绍 React 中的 Refs 及其使用场景？

Node

• NodeJS 回调的错误处理方式及其优点
• 什么是 REST？
• 如何避免地狱回调？
• 什么是 Node.js 中的事件循环？

Security

• 什么是跨站点脚本攻击（XSS）？应如何阻止他？

---

每天 30 秒系列之 CSS

精选常见交互，帮助您拥有简洁酷炫的站点

布局

• 清除浮动
• 重置 box-sizing
• 宽高保持一致
• table 居中显示
• 平均分配子元素
• 盒子模型居中
• 垂直小技巧
• 网格居中
• 最后一个元素占满剩余可用高度
• 使用 transform 进行居中
• 多行文本截断
• 文本截断

视觉

• 圆
• 自定义滚动条
• 自定义文本选中样式
• 渐变阴影
• 文本风化效果
• 图片适配
• 全屏
• 文本渐变
• 细而明显的边框
• :not 选择器
• 逃离屏幕
• 对溢出的内容进行渐变
• 漂亮的下划线
• 重置所有样式
• 带形状的分割线
• 系统字体栈
• 三角形
• 斑马条纹列表

动画

• 弹跳加载
• 按钮边框动画
• 🍩式的旋转
• 简单的变量
• 高度变化时的过渡效果
• 阴影盒子的动画效果
• 下划线动画

交互

• 选不中我
• 子元素选中后改变父元素的样式
• 跟踪光标的渐变效果
• 当鼠标移上或聚焦时弹出菜单
• 相邻兄弟视觉弱化
• 可切换的开关

其他

• Cacl()
• 计数器
• 自定义变量

---

每天 30 秒系列之 React

精选有用的 React 片段，帮助你获取最佳实践

Array

• 列表数据
• 表格数据
• 表格数据映射

Hook

• 使用内部点击
• 使用外部点击
• 使用 fetch 请求
• 使用间隔
• 使用浏览器端识别
• 使用延迟

Input

• input 传值给父组件
• 限制 textarea 输入的长度
• 单词个数限制
• 多选列表向父组件传值
• 显示密码框内容
• 下拉列表向父组建传值
• 滑动元素向父组件传值
• 文本输入框向父组件传值
• 输入框向父组件直接传值

Visual

• 手风琴 ^advanced
• 提示组件
• 文本自动转链接 ^advanced
• 轮播组件
• 折叠组件
• 时钟倒数计时器 ^advanced
• 文件的拖拽
• 旋转加载组件
• 邮件发送组件
• 弹窗组件
• 带波浪效果的按钮
• 星级比率组件
• Tab 组件
• TODO

---

每天 30 秒系列之 JavaScript Code

精选常见代码集，帮助您提高打码效率

🔌 Adapter

• ary
• call
• collectInfo
• flip
• over
• overArgs
• pipeAsyncFunctions
• pipeFunctions
• promisify
• rearg
• spreadOver
• unary

📚 Array

• all
• allEqual
• any
• arrayToCSV
• bifurcate
• bifurcateBy
• chunk
• compact
• countBy
• countOccurrences
• deepFlatten
• difference
• differenceBy
• differenceWith
• drop
• dropRight
• dropRightWhile
• dropWhile
• everyNth
• filterFalsy
• filterNonUnique
• filterNonUniqueBy
• findLast
• findLastIndex
• flatten
• forEachRight
• groupBy
• head
• indexOfAll
• initial
• initialize2DArray
• initializeArrayWithRange
• initializeArrayWithRangeRight
• initializeArrayWithValues
• initializeNDArray
• intersection
• intersectionBy
• intersectionWith
• isSorted
• join
• JSONtoCSV ^advanced
• last
• longestItem
• mapObject ^advanced
• maxN
• minN
• none
• nthElement
• offset
• partition
• permutations ^advanced
• pull
• pullAtIndex ^advanced
• pullAtValue ^advanced
• pullBy ^advanced
• reducedFilter
• reduceSuccessive
• reduceWhich
• reject
• remove
• sample
• sampleSize
• shank
• shuffle
• similarity
• sortedIndex
• sortedIndexBy
• sortedLastIndex
• sortedLastIndexBy
• stableSort ^advanced
• symmetricDifference
• symmetricDifferenceBy
• symmetricDifferenceWith
• tail
• take
• takeRight
• takeRightWhile
• takeWhile
• toHash
• union
• unionBy
• unionWith
• uniqueElements
• uniqueElementsBy
• uniqueElementsByRight
• uniqueSymmetricDifference
• unzip
• unzipWith ^advanced
• without
• xProd
• zip
• zipObject
• zipWith ^advanced

🌐 Browser

TODO

⏱️ Date

TODO

🎛️ Function

TODO

➗ Math

TODO

📦 Node

TODO

🗃️ Object

TODO

📜 String

TODO

📃 Type

TODO

🔧 Utility

TODO

❓ Other

TODO

---

鸣谢

部分翻译自以下项目，在此对这些项目的贡献者们致敬！若有翻译不恰当之处请向我们反馈，非常感谢 ❤️

• 30 seconds