========= 7.20 笔记 =========
bfc: Block formating context (块级格式化上下文)
作用：
- margin 重叠，
- float 脱离文档流， 导致高度坍塌
规则：
- 一个独立布局空间， 内部元素 与 外面 互相不影响。
- 同一个bfc 内，margin 会发生坍塌，只计算最大的margin.
- 元素内部垂直方向一个接一个排布
- 高度计算 包含float 元素。
- float 盒子不叠加到 bfc 上
形成要件：
- overflow 不为 visible
- display: inline-block, table-cell, flex
- position: absolute, fixed
- float 不为 none
迭代器： Iterator
- juejin.cn/post/684490…
- for of 迭代遍历
- 判断是否可迭代： 看有没有 Symbol.iterator 属性
作用：
- 是一种接口，能给不同数据结构提供统一的访问机制。
构成：
- 迭代器对象 （包含 value: any, done： boolean 属性， next: func 方法）， 迭代每次返回一个迭代器对象 function Iterator() {
}
对象可迭代实现：
- 实现 obj[Symbol.iterator] 属性。
obj[Symbol.iterator] = function() {
var selt = this;
var i = 0;
return {
next: function() {
return {
value: any,
done: boolean
}
}
}
}
应用：
- 解构， 扩展运算（...）,
生成器： Generator
- 生成迭代器,简化迭代器的构造
- function* 声明生成器函数
构成：
- yield & yield*， 可以将函数控制权交给外部处理； next, throw 可以将控制权移交回函数
- yield - 给外部返回值
- yield* - 给外部返回一个可迭代对象
- next() -
实现：
const generator = function* () {
yield 'hello';
yield 'jjm';
yield* '123456789';
yield 'end';
}
let obj = {
[Symbol.iterator]: generator
}
for (const val of obj) {
console.log(val);
}
