DD每周前端七题详解-第五期
DD每周前端七题详解-第五期
系列介绍
你盼世界，我盼望你无bug。Hello 大家好！我是霖呆呆！
呆呆每周都会分享七道前端题给大家，系列名称就是「DD每周七题」。
系列的形式主要是：3道JavaScript + 2道HTML + 2道CSS，帮助我们大家一起巩固前端基础。
所有题目也都会整合至 LinDaiDai/niubility-coding-js 的issues中，欢迎大家提供更好的解题思路，谢谢大家????。
一起来看看本周的七道题吧。
正题
一、实现mask函数将"123456"转为"##3456",只保留最后四个字符
(题目来源：https://github.com/30-seconds/30-seconds-of-interviews)
首先介绍一下题目的意思吧????，案例????如下：
const mask = (str, maskChar = '#') => {
// 代码
}
console.log(mask('123456')); // '##3456'
console.log(mask('lindaidai')); // '#####idai'
这道题的难度应该没有那么大，处理方式也有很多。呆呆这边主要是讲解一下如何使用padStart来实现的。
简单介绍一下padStart方法吧，它是ES8新增的实例函数，与它作用差不多的还有一个叫padEnd的函数：
String.prototype.padStartString.prototype.padEnd
「作用」：允许将空字符串或其他字符串添加到原始字符串的开头或结尾。
「语法」：
padStart(targetLength, [padString])
targetLength: 必填，当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。padString: 可选，填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为" "。
例如：
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
哈哈，另外想要了解如何实现一个padStart的小伙伴可以看呆呆之前一篇文章哟：DD每周前端七题详解-第二期
「言归正传」，让我们回到这道题目哈，首先让我们来处理一下输入参数边界的情况，例如输入的str不存在或者长度小于4的时候：
const mask = (str, maskChar = '#') => {
if (!str || str.length <= 4) return str;
}
其次，我们可以只保留住str的末尾四个字符，然后使用padStart将这四个字符填充至str.length即可，如下：
const mask = (str, maskChar = '#') => {
if (!str || str.length <= 4) return str;
return str.slice(-4).padStart(str.length, maskChar);
}
slice不会影响原本的字符串使用
padStart填充即可
https://github.com/LinDaiDai/niubility-coding-js/issues/30
二、介绍一下NaN并实现一个isNaN
「介绍一下NaN」：
NaN属性是代表非数字值的特殊值，该属性用于指示某个值不是数字；NaN是不等于NaN的，即NaN === NaN的结果是false；使用
Object.is()来比较两个NaN结果是true，即Object.is(NaN, NaN)的结果是true；typeof NaN为"number"；方法
parseInt()和parseFloat()在不能解析指定的字符串时就返回这个值；可以使用
isNaN来判断一个变量是不是NaN，它是JS内置对象Number上的静态方法。
(关于第三点，大家可以看一下我之前的一篇文章哟，里面的「第二补：JS类型检测-Object.is()和===的区别」有提到：读《三元-JS灵魂之问》总结,给自己的一份原生JS补给(上))
「实现一个isNaN」:
对于isNaN的polyfill实现起来就比较简单了，只需要利用NaN不等于它自身的这一点即可：
const isNaN = v => v !== v;
https://github.com/LinDaiDai/niubility-coding-js/issues/31
三、按位取反，为什么~2 = -3?
接下来，分享一道与JavaScript原生无关的题目吧，主要也是看到群里有小伙伴问了关于按位取反~的用法，这边统一科普一下，????。
正常一个数字，例如1和2，或者-1和-2。
如果我们对它们进行按位取反的话，结果会是这样：
~1 = -2~2 = -3-1 = 0-2 = 1
看不懂没关系，让我们来一步步看看实现的过程哈。
在这里其实是分了「正数和负数」的，因为符号不同取反的过程也会不同。
1.1 正数按位取反
先让我们来看看正数的按位取反。
比如先看看~1 = -2，过程如下：
「1. 十进制转为二进制原码」
首先将十进制的1转化为二进制原码为：0000 0001
「2. 二进制原码按位取反」
之后将原码按位取反：
也就是将0000 0001 => 1111 1110
(取反应该知道啥意思吧？就是0换成1，1换成0)
「3. 取反后的二进制转为原码」
再将取反后的二进制码转为原码二进制：
也就是将1111 1110 => 1000 0010
这里你估计看着都点懵了，当我们将「取反后的二进制」转为「原码二进制」的时候，其实是有以下两步的：
需要判断取反后的二进制的第一个位是不是
1，这个第一位我们称之为「符号位」，如果是1的话就表示即将要转成的数是一个负数，如果是0的话表示即将要转的数是一个正数，这个符号位是不能动的；在这里我们可以看到1111 1110的第一位是1，所以表示即将要转的数是一个负数，同时我们不动它。然后将除了第一位以外其它位数取反并
+1。所以会有这么两个过程：
1111 1110=>1000 00011000 0001=>1000 0010(这步是对上一步的结果+1，因为上一步的最后一个数是1，所以它再加上1就需要向前进一位了，因此变成了1000 0010)
「4. 将原码二进制转为十进制」
最后一步就是将我们前面得到的1000 0010这个二进制转化为十进制了。
第一位符号位，是1，则表示是个负数，所以结果为-2。
OK????，搞懂了这个步骤之后再让我们自己来转换一下~2 = -3吧：
1. 0000 0010
2. 1111 1101
3. 1000 0011
4. -3
「正数按位取反总结」
十进制转为二进制原码
二进制原码按位取反
符号位保留，其余位取反+1
二进制原码转为十进制
1.2 负数按位取反
负数的按位取反和上面就有些不一样了，主要是第二步和第三步调换一下顺序：
十进制转为二进制原码
符号位保留，其余位取反+1
二进制原码按位取反
二进制原码转为十进制
例如：~-1 =0的转换过程：
「1. 十进制转为二进制原码」
这步和正数按位取反是一样的：
-1 => 1000 0001
「2. 符号位保留，其余位取反+1」
转换过程：
1000 0001=>1111 1110(取反)1111 1110=>1111 1111(取反后 + 1)
「3. 二进制原码按位取反」
将刚刚得到的再进行按位取反：
1111 1111 => 0000 0000
「4. 二进制原码转为十进制」
0000 0000 => 0
OK????，现在自己来转换一下~-2 = 1吧：
1. 1000 0010
2. 1111 1110
3. 0000 0001
4. 1
这里没啥诀窍，关键就是要记住转换的过程然后不断的练习吧 ????。
另外关于~~的用法还可以看呆呆的另一篇文章哟《JS中按位取反运算符~及其它运算符》
https://github.com/LinDaiDai/niubility-coding-js/issues/32
四、知道insertAdjacentHTML方法吗？
这个方法是呆呆最近在看公司项目代码时了解到的，之前一直没有注意它。
首先对于它的用法：
「
insertAdjacentHTML()」 方法将指定的文本解析为Element元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。
其次它的作用对象是一个元素element，例如const container = document.getElementById('container')
语法上呢：
element.insertAdjacentHTML(position, text);
position：一个DOMString，也就是表示插入内容相对元素的位置，且必须是下面的字符串之一：'beforebegin'：元素自身的前面。'afterbegin'：插入元素内部的第一个子节点之前。'beforeend'：插入元素内部的最后一个子节点之后。'afterend'：元素自身的后面。text：是要被解析为HTML或XML元素，并插入到DOM树中的DOMString。
「案例」：
让我们来看看它的用法，例如????现在有一个HTML的结构为：
我是one JavaScript代码中加上这段话：
const one = document.getElementById('one');
one.insertAdjacentHTML('afterend', '我是two 现在最终的渲染结果就变成了这样：
我是one 「工作上的用法」：
在项目中，主要可以应用于这样的场景：一个空的容器(你可以理解为一个div)，开始需要一个loading的效果，在数据加载完毕之后，需要把loading取掉且清空容器内的元素并以其它方式重新渲染出容器的内容。
这里呆呆就以定时器来模拟一下数据加载的过程，实现代码如下：
(当然，我们不要为了刻意用而去用，适合自己的才是最好的)
「安全问题」：
使用
insertAdjacentHTML插入用户输入的HTML内容的时候，需要转义之后才能使用。例如：
const one = document.getElementById('one'); // 由于 encodeURI('我是two')会被转译为： // %3Cdiv%20id=%22two%22%3E%E6%88%91%E6%98%AFtwo%3C/div%3E // 因此最终会被当成 "%3Cdiv%20id=%22two%22%3E%E6%88%91%E6%98%AFtwo%3C/div%3E"字符串渲染 one.insertAdjacentHTML('afterend', encodeURI('
如果只是为了插入文本内容（而不是HTML节点），不建议使用这个方法，建议使用node.textContent 或者 node.insertAdjacentText()。因为这样不需要经过HTML解释器的转换，性能会好一点。(这里是引用的MDN-insertAdjacentHTML上的内容)
https://github.com/LinDaiDai/niubility-coding-js/issues/33
五、insertAdjacentHTML和insertAdjacentElement的区别
第二个参数的类型不同， 前者接收的是是要被解析为HTML或XML元素的字符串，而后者接收的是一个element元素。
const one = document.getElementById('one');
one.insertAdjacentHTML('afterend', '我是two https://github.com/LinDaiDai/niubility-coding-js/issues/34
六、实现九宫格布局
实现效果如下：
先来看一下HTML方面的代码：
1 