Skip to main content

6 posts tagged with "有赞"

View All Tags

Promise

务必掌握 Promise 常用方法,如 thenallraceresolvereject

Promise 的关键点在于

  • 三个状态
  • 链式调用

更多详情:[图解 Promise](

flat、拍平数组、自己实现拍平数组的效果

这里只提供两个比较简单的实现,后面还会涉及到使用reduce和栈、使用Generator、原型链等等,详细见:面试官连环追问:数组拍平(扁平化) flat 方法实现 - 知乎 (zhihu.com)

  1. 最简单的遍历实现
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, 'string', { name: '弹铁蛋同学' }]
// concat + 递归
function flat(arr) {
let arrResult = []
arr.forEach((item) => {
if (Array.isArray(item)) {
arrResult = arrResult.concat(flat(item)) // 递归
// 或者用扩展运算符
// arrResult.push(...arguments.callee(item));
} else {
arrResult.push(item)
}
})
return arrResult
}
flat(arr)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "弹铁蛋同学" }];
  1. 传入数组控制递归层数
// reduce + 递归
function flat(arr, num = 1) {
return num > 0
? arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? flat(cur, num - 1) : cur), [])
: arr.slice()
}
const arr = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, 'string', { name: '弹铁蛋同学' }]
flat(arr, Infinity)
// [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { name: "弹铁蛋同学" }];

react hooks

react hooks#

它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

  • 使用 state
  • 状态逻辑复用

它出现的动机更多的还是说在组件之间复用状态逻辑很难,纵然我们已有高阶组件,render props 可以去做这样的事情,但二者或多或少多存在一些问题

例如,高阶组件在做逻辑复用时

  • 无法清晰的标识数据的来源
  • props 可能会被覆盖

而 render props 则很容易导致

  • 嵌套地狱

所以说 react hooks 的出现更多的是解决了状态逻辑复用的完整性

更多钩子函数请前往 Hooks

什么是 BFC

详情请见:块格式化上下文 - Web 开发者指南 | MDN (mozilla.org)

块格式化上下文(Block Formatting Context,BFC) 是 Web 页面的可视 CSS 渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

块格式化上下文对浮动定位(参见 float)与清除浮动(参见 clear)都很重要。浮动定位和清除浮动时只会应用于同一个 BFC 内的元素。浮动不会影响其它 BFC 中元素的布局,而清除浮动只能清除同一 BFC 中在它前面的元素的浮动。外边距折叠(Margin collapsing)也只会发生在属于同一 BFC 的块级元素之间。