doc: README.md

每日一题/每日一题-JS篇.md → 2020面试系列/每日一题-JS篇.md

@@ -275,30 +275,6 @@ console.log(trim('  1 1  ')) // '1 1'
 
 ## 编程题
 
-### 实现sum(1,2,3)==sum(1)(2)(3)
-
-```javascript
-function sum(...args){
-  function currySum(...rest){
-    args.push(...rest)
-    return currySum
-  }
-  currySum.toString= function(){ 
-    return args.reduce((result,cur)=>{
-      return result + cur
-    })
-  }
-  currySum.toNumber= function(){ 
-    return args.reduce((result,cur)=>{
-      return result + cur
-    })
-  }
-  return currySum
-}
-```
-
-
-
 ### 实现一个padStart()或padEnd()的polyfill
 
 `String.prototype.padStart` 和 `String.prototype.padEnd`是`ES8`中新增的方法，允许将空字符串或其他字符串添加到原始字符串的开头或结尾。我们先看下使用语法：

每日一题/霖呆呆的中大厂面试记录及2年前端薪资对比(附赠学习方法).md → 2020面试系列/霖呆呆的中大厂面试记录及2年前端薪资对比(附赠学习方法).md

@@ -1,5 +1,7 @@
 ## 前言
 
+你盼世界，我盼望你无`bug`。Hello 大家好，我是霖呆呆！
+
 呆呆最近挺感慨的，因为从四月中旬开始准备面试，到面各个中小公司，大厂，距离今天已经将近2个月了。期间经历过不少事情，也带来了些许的成长。
 
 那么这篇文章主要是说明一下这段时间自己在面不同规模的公司时的一些感悟，以及这个期间的学习和复习方法。我也会站在一个第三者的角度，将自身的优势，劣势都列举出来，希望能通过我映射出一些现阶段前端找工作的现状。
@@ -912,7 +914,7 @@ HR面
 
 文章的最后，我想要写一封与本期内容无关的感谢信，因为我不知道用何种方式来表达自己对这段时间帮助过呆呆的那些小伙伴们的感谢之情，所以唯有用文字了(总不能让我卖出色相吧，哈哈哈)。
 
-首先要感谢的是帮助过呆呆内推以及解惑的几位老哥：[子弈]()、[axuebin]()、[童欧巴](https://juejin.im/user/5a2de8a8f265da4320032fc4)、[树酱](https://juejin.im/user/5dc783e251882535ce3216d4)、[shanyue](https://juejin.im/user/56a34361816dfa005925a654)、[晨曦时梦见兮](https://juejin.im/user/5b13f11d5188257da1245183)、[若川](https://juejin.im/user/57974dc55bbb500063f522fd)、[画手大鹏](https://juejin.im/user/59c3205b6fb9a00a532763e2)、[神三元](https://juejin.im/user/5c45ddf06fb9a04a006f5491)、[前端森林](https://juejin.im/user/5a767928f265da4e78327344)、[网易严选-付超]()、[家有佳欣宝贝](https://juejin.im/user/5d53ec6051882525d374eea2)，自己还是比较幸运的，能通过写博客认识这么多优秀的大佬，且都很热心的帮助我，有的大佬甚至被呆呆打扰了好几次了，哈哈，还好呆呆皮比较厚，也是感谢你们的宽宏大量，真的非常感谢🙏。
+首先要感谢的是帮助过呆呆内推以及解惑的几位老哥：[子弈](https://juejin.im/user/5c35502ae51d45522160d7dd)、[axuebin](https://juejin.im/user/574f910b207703005cd8686a)、[童欧巴](https://juejin.im/user/5a2de8a8f265da4320032fc4)、[树酱](https://juejin.im/user/5dc783e251882535ce3216d4)、[shanyue](https://juejin.im/user/56a34361816dfa005925a654)、[晨曦时梦见兮](https://juejin.im/user/5b13f11d5188257da1245183)、[若川](https://juejin.im/user/57974dc55bbb500063f522fd)、[画手大鹏](https://juejin.im/user/59c3205b6fb9a00a532763e2)、[神三元](https://juejin.im/user/5c45ddf06fb9a04a006f5491)、[前端森林](https://juejin.im/user/5a767928f265da4e78327344)、[家有佳欣宝贝](https://juejin.im/user/5d53ec6051882525d374eea2)、网易严选-付超，自己还是比较幸运的，能通过写博客认识这么多优秀的大佬，且都很热心的帮助我，有的大佬甚至被呆呆打扰了好几次了，哈哈，还好呆呆皮比较厚，也是感谢你们的宽宏大量，真的非常感谢🙏。
 
 哈哈哈，再就是要重点感谢另外三位非常nice的小伙伴：[Yiming君](https://juejin.im/user/5e57f2e6f265da574947499b)、[TerryLife](https://juejin.im/user/57c7f94279bc440063e90595)、[LINGLONG](https://juejin.im/user/5cd2341ce51d456e5c5baba3)。可以说，呆呆这段时间能够撑过来很大一部分原因是有你们三位的鼓励与支持。在面试期间，我成立了一个只有四个人的微信群，并找到了三位和我一样努力求生存、志同道合的小伙伴。这个群的目的很简单，就是互相分享、互相鼓励，一起进步。呆呆前面提到了自己每天是登2次微信的，每次上来除了处理一些消息回复之外，就是在这个群里分享一下今天又学了什么，面试又被问了什么，然后一起打打气，坚持下去。
 

DD每周前端七题详解/DD每周前端七题详解-第三期.md

@@ -0,0 +1,250 @@
+## DD每周前端七题详解-第三期
+
+## 系列介绍
+
+你盼世界，我盼望你无`bug`。Hello 大家好！我是霖呆呆！
+
+呆呆每周都会分享七道前端题给大家，系列名称就是「DD每周七题」。
+
+系列的形式主要是：`3道JavaScript` + `2道HTML` + `2道CSS`，帮助我们大家一起巩固前端基础。
+
+所有题目也都会整合至 [LinDaiDai/niubility-coding-js](https://github.com/LinDaiDai/niubility-coding-js/issues) 的`issues`中，欢迎大家提供更好的解题思路，谢谢大家😁。
+
+一起来看看本周的七道题吧。
+
+
+
+## 正题
+
+### 一、使用delete删除数组元素，其长度会改变吗？
+
+(题目来源：[https://github.com/haizlin/fe-interview/issues/2462](https://github.com/haizlin/fe-interview/issues/2462))
+
+咱来写个案例🌰看看就知道了：
+
+```javascript
+var arr = [1, 2, 3]
+delete arr[1]
+console.log(arr)
+console.log(arr.length)
+```
+
+结果如下：
+
+![](https://user-gold-cdn.xitu.io/2020/6/7/1728f5bf677c341f?w=468&h=266&f=jpeg&s=19210)
+
+通过结果，我们可以得出结论：**使用`delete`删除数组元素，其长度是不会改变的。**
+
+关于这一点，大家可以把数组理解为是一个特殊的对象，其中的每一项转换为对象的伪代码为：
+
+```javascript
+key: value
+// 对应:
+0: 1
+1: 2
+2: 3
+length: 3
+```
+
+所以我们使用`delete`操作符删除一个数组元素时，相当于移除了数组中的一个属性，被删除的元素已经不再属于该数组。但是这种改变并不会影响数组的`length`属性。
+
+**扩展：**
+
+- 如果你想让一个数组元素继续存在但是其值是 `undefined`，那么可以使用将 `undefined` 赋值给这个元素而不是使用 `delete`。例如：`arr[1] = undefined`
+- 如果你想通过改变数组的内容来移除一个数组元素，请使用[`splice()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 方法。例如：`arr.splice(1, 1)`
+
+[https://github.com/LinDaiDai/niubility-coding-js/issues/15](https://github.com/LinDaiDai/niubility-coding-js/issues/15)
+
+
+
+### 二、创建一个函数batches返回能烹饪出面包的最大值
+
+(题目来源：[https://github.com/30-seconds/30-seconds-of-interviews](https://github.com/30-seconds/30-seconds-of-interviews))
+
+```javascript
+/**
+batches函数接收两个参数：
+1. recipe 制作一个面包需要的各个材料的值
+2. available 现有的各个材料的值
+要求传入 recipe 和 available，然后根据两者计算出能够烹饪出面包的最大值
+**/
+
+// 0个面包，因为 butter黄油需要50ml，但是现在只有48ml
+batches(
+  { milk: 100, butter: 50, flour: 5 },
+  { milk: 132, butter: 48, flour: 51 }
+)
+batches(
+  { milk: 100, butter: 4, flour: 10 },
+  { milk: 1288, butter: 9, flour: 95 }
+)
+
+// 1个面包
+batches(
+  { milk: 100, butter: 50, flour: 10 },
+  { milk: 198, butter: 52, flour: 10 }
+)
+
+// 2个面包
+batches(
+  { milk: 2, butter: 40, flour: 20 },
+  { milk: 5, butter: 120, flour: 500 }
+)
+```
+
+这道题的解题思路其实就是比较`recipe`和`available`两个对象的每一个属性值，用后者的属性值除以前者的属性值，然后得到一个数，例如0个面包中的：
+
+- `available.milk / recipe.milk`，得到`1.32`；
+- `available.butter / recipe.butter`，得到`0.96`
+- `available.flour / recipe.flour`，得到`10.2`
+
+然后取三个结果中的最小值`0.96`，再向下取整，得出最终能制作的面包个数为`0`。
+
+所以我们可以得出第一种解题方法：
+
+```javascript
+const batches = (recipe, available) =>
+  Math.floor(
+    Math.min(...Object.keys(recipe).map(k => available[k] / recipe[k] || 0))
+  )
+```
+
+过程分析：
+
+- `Object.keys(recipe)`，迭代`recipe`对象，得到所有的`key`：`['milk', 'butter', 'flour']`
+- 之后使用`map`遍历刚刚所有的`key`，并返回`available[k]/recipe[k]`的值：`[1.32, 0.96, 10.2]`
+- 需要得出上面一步数组中的最小值，所以可以使用`Math.min(...arr)`方法来获取
+- 最后将最小值`0.96`向下取整得到`0`。
+
+当然这道题你也可以使用`Object.entries()`，效果是一样的：
+
+```javascript
+const batches = (recipe, available) =>
+  Math.floor(
+    // Math.min(...Object.keys(recipe).map(k => available[k] / recipe[k] || 0))
+    Math.min(...Object.entries(recipe).map(([k, v]) => available[k] / v || 0))
+  )
+```
+
+[https://github.com/LinDaiDai/niubility-coding-js/issues/16](https://github.com/LinDaiDai/niubility-coding-js/issues/16)
+
+
+
+### 三、typeof typeof 0 的结果？
+
+(题目来源：[https://github.com/30-seconds/30-seconds-of-interviews](https://github.com/30-seconds/30-seconds-of-interviews))
+
+这道题其实不难，最终结果是`"string"`。
+
+过程分析：
+
+- `typeof 0`的结果为`"number"`，是个字符串
+- 所以`typeof "number"`的结果是`"string"`
+
+[https://github.com/LinDaiDai/niubility-coding-js/issues/17](https://github.com/LinDaiDai/niubility-coding-js/issues/17)
+
+
+
+### 四、target="_blank"有哪些问题？
+
+**存在问题：**
+
+1. 安全隐患：新打开的窗口可以通过`window.opener`获取到来源页面的`window`对象即使跨域也可以。某些属性的访问被拦截，是因为跨域安全策略的限制。 但是，比如修改`window.opener.location`的值，指向另外一个地址，这样新窗口有可能会把原来的网页地址改了并进行页面伪装来欺骗用户。
+2. 新打开的窗口与原页面窗口共用一个进程，若是新页面有性能不好的代码也会影响原页面
+
+**解决方案：**
+
+1. 尽量不用`target="_blank"`
+
+2. 如果一定要用，需要加上`rel="noopener"`或者`rel="noreferrer"`。这样新窗口的window.openner就是null了，而且会让新窗口运行在独立的进程里，不会拖累原来页面的进程。(不过，有些浏览器对性能做了优化，即使不加这个属性，新窗口也会在独立进程打开。不过为了安全考虑，还是加上吧。)
+
+（参考来源：[慎用target="_blank"](https://juejin.im/post/5eb8ed20e51d454db55fb353)）
+
+[https://github.com/LinDaiDai/niubility-coding-js/issues/18](https://github.com/LinDaiDai/niubility-coding-js/issues/18)
+
+
+
+### 五、children以及childNodes的区别
+
+- `children`和只获取该节点下的所有`element`节点
+- `childNodes`不仅仅获取`element`节点还会获取元素标签中的空白节点
+- `firstElementChild`只获取该节点下的第一个`element`节点
+- `firstChild`会获取空白节点
+
+[https://github.com/LinDaiDai/niubility-coding-js/issues/19](https://github.com/LinDaiDai/niubility-coding-js/issues/19)
+
+
+
+### 六、float:left对比position:absolute
+
+相同点：
+
+- 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
+- 包裹性：也就是都会让元素`inline-block`化。等同于没有高度与宽度的`inline-block`元素。
+  - 对于块状元素默认的宽度为`100%`，若设置为了绝对定位则宽度由内容决定
+  - 对于内联元素原本设置`width`属性无效，若设置了浮动则可以设置`width`值
+- 破坏性：都会导致父级高度塌陷。但若是设置了绝对定位的话，其父级即使设置为`float:left;`也还是不能解决高度塌陷的问题。
+
+不同点：
+
+- 虽然它们都会脱离文档流，但是使用`float`脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用`position:absolute`脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
+
+[https://github.com/LinDaiDai/niubility-coding-js/issues/20](https://github.com/LinDaiDai/niubility-coding-js/issues/20)
+
+
+
+### 七、float:left对比inline-block
+
+- **文档流**：浮动会脱离文档流，且使得被覆盖的元素的文字内容会环绕在周围；而`inline-block`不会脱离文档流也就不会覆盖其它元素。浮动也会引发父级高度塌陷问题。
+- **水平位置**：不能给有浮动元素的父级设置`text-align:center`使得子集浮动元素居中，而`inline-block`却可以。
+- **垂直对齐**：`inline-block`元素沿着默认的基线对齐(`baseline`)，若是两个元素的`font-size`不同则可能会看到一高一低，你可以通过设置`vertical-align: top或者bottom;`来使得它们基于顶线或者底线对齐(注意这个是设置到元素本身而不是设置到它们的父级)。而浮动元素紧贴顶部，不会有这个问题。
+- **空白**：`inline-block`包含`html`空白节点。如果你的`html`中一系列元素每个元素之间都换行了，当你对这些元素设置`inline-block`时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴。
+
+针对第三点，垂直对齐可以看下面👇这个案例：
+
+默认情况下：
+
+*css代码为：*
+
+```css
+.sub {
+  background: hotpink;
+  display: inline-block;
+}
+```
+
+![](https://user-gold-cdn.xitu.io/2020/6/7/1728f5c2724a713f?w=302&h=192&f=jpeg&s=15299)
+
+设置了`vertial-align: top;`后：
+
+*css代码为：*
+
+```css
+.sub {
+  background: hotpink;
+  display: inline-block;
+  vertical-align: top;
+}
+```
+
+![](https://user-gold-cdn.xitu.io/2020/6/7/1728f5c467fb3e50?w=296&h=186&f=jpeg&s=13657)
+
+[https://github.com/LinDaiDai/niubility-coding-js/issues/21](https://github.com/LinDaiDai/niubility-coding-js/issues/21)
+
+
+
+## 后语
+
+你盼世界，我盼望你无`bug`。这篇文章就介绍到这里。
+
+您每周也许会花`48`小时的时间在工作💻上，会花`49`小时的时间在睡觉😴上，也许还可以再花`20`分钟的时间在呆呆的7道题上，日积月累，我相信我们都能见证彼此的成长😊。
+
+什么？你问我为什么系列的名字叫`DD`？因为`呆呆`呀，哈哈😄。
+
+喜欢**霖呆呆**的小伙还希望可以关注霖呆呆的公众号 `LinDaiDai` 或者扫一扫下面的二维码👇👇👇。
+
+![](https://user-gold-cdn.xitu.io/2020/5/27/17254d5d0a277620?w=900&h=500&f=gif&s=1632550)
+
+我会不定时的更新一些前端方面的知识内容以及自己的原创文章🎉
+
+你的鼓励就是我持续创作的主要动力 😊。

DD每周七题/DD每周七题-第二期.md → DD每周前端七题详解/DD每周前端七题详解-第二期.md

@@ -10,6 +10,8 @@
 
 所有题目也都会整合至 [LinDaiDai/niubility-coding-js](https://github.com/LinDaiDai/niubility-coding-js/issues) 的`issues`中，欢迎大家提供更好的解题思路，谢谢大家😁。
 
+一起来看看本周的七道题吧。
+
 
 
 ## 正题

DD每周前端七题详解/README.md

@@ -0,0 +1,16 @@
+### DD每周前端七题详解目录
+
+每期目录下都会有两个地址，第一个为`github`的地址，第二个为掘金的地址。
+
+- 第一期(2020年05月27日)
+  - [第一期](./DD每周前端七题详解-第一期.md)
+  - https://juejin.im/post/5ece0955e51d45784960ae58
+
+- 第二期(2020年06月03日)
+  - [第二期](./DD每周前端七题详解-第二期.md)
+  - https://juejin.im/post/5ed732dfe51d457879333878
+
+- 第三期(2020年06月10日)
+  - [第三期](./DD每周前端七题详解-第三期.md)
+  - 
+

DD每周前端七题详解/codes/week3.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <script>
+    // 1
+    // var arr = [1, 2, 3]
+    // delete arr[1]
+    // console.log(arr)
+    // console.log(arr.length)
+    // 2
+const batches = (recipe, available) =>
+  Math.floor(
+    // Math.min(...Object.keys(recipe).map(k => available[k] / recipe[k] || 0))
+    Math.min(...Object.entries(recipe).map(([k, v]) => available[k] / v || 0))
+  )
+    const res0 = batches(
+      { milk: 100, butter: 50, flour: 5 },
+      { milk: 132, butter: 48, flour: 51 }
+    )
+    const res1 = batches(
+      { milk: 100, butter: 50, cheese: 10 },
+      { milk: 198, butter: 52, cheese: 10 }
+    )
+    const res2 = batches(
+      { milk: 2, sugar: 40, butter: 20 },
+      { milk: 5, sugar: 120, butter: 500 }
+    )
+    console.log(res0)
+    console.log(res1)
+    console.log(res2)
+
+  </script>
+</body>
+</html>