FrankKai

### Normal Flow Normal Flow也可以理解为document flow（文档流）。 - normal flow是在没有人为修改layout的情况下，元素自己排列的规则，很有必要掌握 - 可以改变element在一个normal flow下的position - 可以将element从一个normal flow中移除出来 - normal flow是为了readable document设计的 #### css盒模型细节是怎样的？ 独立的一个元素盒子，先由content占据内容，然后再添加padding，border和margin。 #### individual元素默认是怎么布局的？ - 块级元素宽度继承自父元素的100%，高度是自己的content。代际遗传明显，财大气粗的二代。 - 行内元素宽度高度都是自己的content，且不能修改，只能完全升级为block或者inline-block才行。完全靠自己打拼，一无所有的一代。 - **行内元素位于块级元素的content内**。...

### Flexbox - Flexbox是一个行列方向的一维矩阵布局方法。 - 具有flex特性的item会调整额外的space和shrink去适应小空间。 - Flexbox是一个layout system，将其当做一个system，需要系统性地进行学习。 - Flexbox是为了解决floats和positioning布局解决不了的问题而产生的。 - Flexbox在以下几种情况下功力十分威猛 - 在父元素内垂直居中一个block - 在不管有多少width/height可以分配的情况下，让容器的所有子元素都可以占据等份的width/height。 - 让包含子内容个数不同的多列，占据相同的height，这是因为默认了多列中最高的height赋值给了flex item。 - 设置display属性为flex时，是要设置给flex container，可以通俗地理解为应用flex布局的item的parent元素。 #### display:inline-flex属性怎么用？ >display: inline-flex does not make...

### css-tricks的flex指南 细读css-tricks flex文章: [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-examples) - 建议直接设置flex，智能设置参数。 - flex-grow占比 flex-shrink压缩 flex-basis基础大小。 - flex-grow flex-grow:0->普通行内布局。因此**flex-grow是为了自动分配容器空间。** - flex-shrink flex-grow:0->超出容器。因此**flex-shrink是为了保证flex item在容器 内。** - flex item的默认值为1 0 auto，设置为1时变为1 1 0%。（重要）...

### for循环比forEach做break和return方便一些 - forEach适用于遍历整个数组，对于精确的条件控制并不适用（若想控制，需要将加入辅助变量） - for(无论是for...of或是常规for)就没这烦恼，想break就break，想return就return - forEach中的return, 相当于for与continue（label）的组合 举个例子： [1,2,3]我只想打印第一项的1。 #### forEach适用于遍历整个数组，对于精确的条件控制并不适用（若想控制，需要将加入辅助变量） ```js // 这种写法报错 [1,2,3].forEach((item)=>{ if(item===2) break ; console.log(item); }) ``` => SyntaxError: Illegal break statement ```js [1,2,3].forEach((item)=>{...

### 过滤出存在至少一个mqtt协议的条目 ```js let protocols = [["http","https"], ['mqtts', 'tcp'],['ws', 'wss', 'https']] let mqttProtocols = ['mqtt', 'mqtts', 'tcp', 'tls', 'ws', 'wss', 'wxs' , 'alis'] const validProtocols = protocols.filter((item)=>item.some((e)=>mqttProtocols.includes(e))) JSON.stringify(validProtocols) // "[[\"mqtts\",\"tcp\"],[\"ws\",\"wss\",\"https\"]]"...

### 实现一个sleep函数，并且每隔1秒打印出心形的一行 ```js const heart = [" ***** *****"," ******* *******", "******************", " **************", " **********", " ****"] ``` ```js function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }...

### 小数取整 #### 位操作符（为了读懂别人的代码，不建议使用） ```js console.log(~~ 6.45) // 6 console.log(6.45 >> 0) // 6 console.log(6.45 >>不可对负数取整 console.log(6.45 >>> 0) // 6 ``` #### parseInt（推荐使用，可读性好） ```js parseInt(6.45) // 6 parseInt(6.54) //...

### 十六进制色转RGB(A)方便调整透明度 UI经常会给一个十六进制色，后面跟一个透明度。 而我们如果想调透明度是需要用rgba(x,y,z,a)的，其实这个a我们知道，但是x，y，z我们是不知道的。 下面这个方法可以很好实现转换。 ```js function hexColorToRGB(hexColor, alpha){ let hexData = hexColor.split(""); if (hexData.length === 4) { hexData = hexData.reduce((acc, cur) => cur === "#" ? [...acc, cur] :...

### await一个promise异常如何捕获？ ```js let promise = () => { return new Promise((resolve, reject) => { if (Math.random() > 0.5) { resolve("foo"); } else { reject("bar"); } }); }; async function...

### 计算属性不仅仅可用于拼接，还可以用于逻辑计算 #### 三元表达式 ```js let key = ''; let obj = { [key? 'foo': 'bar']: 'value' } ``` obj {bar: 'value'} #### 或 ```js let key = ''; let...