wangpeilin
wangpeilin
### [,,,]的长度 (题目来源：https://github.com/CavsZhouyou/Front-End-Interview-Notebook) 咋了小伙伴们，感觉这道题目很简单是吗？哈哈，数一数逗号的间隙好像就能得出答案了，比如这样：  但是这道题的答案并不是`4`哟，而是`3`。 ```javascript console.log([,,,].length) // 3 ``` 所以最终我们是需要把它想象成这样的：  也就是最后一个逗号的后面是不算一项的。 这里其实涉及到了一个名为：`尾后逗号`的概念，或者说是叫做`终止逗号`。上面👆这道题好像看不出它有什么作用，让我来看看实际上为什么会有这个用法。 比如现在你的项目中这么一个文件： *config.js*: ```javascript const types = [ { name: '帅' }, { name: '阳光' },...
### 说说will-change `will-change`是`CSS3`新增的标准属性，它的作用很单纯，就是`"增强页面渲染性能"`，当我们在通过某些行为触发页面进行大面积绘制的时候，浏览器往往是没有准备，只能被动的使用CUP去计算和重绘，由于事先没有准备，对于一些复杂的渲染可能会出现掉帧、卡顿等情况。 而`will-change`则是在真正的行为触发之前告诉浏览器可能要进行重绘了，相当于浏览器把CUP拉上了，能从容的面对接下来的变形。 常用的语法主要有： - `whil-change: scroll-position;` 即将开始滚动 - `will-change: contents;` 内容要动画或者变化了 - `will-transform;` transform相关的属性要变化了(常用) 注意： - `will-change`虽然可以开启加速，但是一定要适度使用 - 开启加速的代价为手机的耗电量会增加 - 使用时遵循最小化影响原则，可以对伪元素开启加速，独立渲染 - 可以写在伪类中，例如`hover`中，这样移出元素的时候就会自动`remove`掉`will-change`了 - 如果使用`JS`添加了`will-change`，注意要及时`remove`掉，方式就是`style.willChange = 'auto'`
### 实现九宫格布局 实现效果如下：  先来看一下`HTML`方面的代码： ```html 1 2 3 4 5 6 7 8 9 ``` 还有一些`item`上的基础`css`代码： ```css #container { /* css代码 */ } .item { font-size: 2em; text-align: center;...
### 知道`insertAdjacentHTML`方法吗？ 这个方法是呆呆最近在看公司项目代码时了解到的，之前一直没有注意它。 首先对于它的用法： > **`insertAdjacentHTML()`** 方法将指定的文本解析为 [`Element`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element) 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。 其次它的作用对象是一个元素`element`，例如`const container = document.getElementById('container')` 语法上呢： ``` element.insertAdjacentHTML(position, text); ``` - `position`：一个`DOMString`，也就是表示插入内容相对元素的位置，且必须是下面的字符串之一： - `'beforebegin'`：元素自身的前面。 - `'afterbegin'`：插入元素内部的第一个子节点之前。 - `'beforeend'`：插入元素内部的最后一个子节点之后。 - `'afterend'`：元素自身的后面。 - `text`：是要被解析为HTML或XML元素，并插入到DOM树中的...
### 按位取反，为什么`~2 = -3`? 接下来，分享一道与`JavaScript`原生无关的题目吧，主要也是看到群里有小伙伴问了关于按位取反`~`的用法，这边统一科普一下，😁。 正常一个数字，例如`1`和`2`，或者`-1`和`-2`。 如果我们对它们进行按位取反的话，结果会是这样： - `~1 = -2` - `~2 = -3` - `~-1 = 0` - `~-2 = 1` 看不懂没关系，让我们来一步步看看实现的过程哈。 在这里其实是分了**正数和负数**的，因为符号不同取反的过程也会不同。 #### 1.1 正数按位取反 先让我们来看看正数的按位取反。 比如先看看`~1...
### 介绍一下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补给(上)](https://juejin.im/post/5e8dc6fd6fb9a03c97753dea#heading-9)) **实现一个isNaN**: 对于`isNaN`的`polyfill`实现起来就比较简单了，只需要利用`NaN`不等于它自身的这一点即可： ```javascript const isNaN = v => v !==...
### 实现mask函数将"123456"转为"##3456",只保留最后四个字符 (题目来源：[https://github.com/30-seconds/30-seconds-of-interviews](https://github.com/30-seconds/30-seconds-of-interviews)) 首先介绍一下题目的意思吧😄，案例🌰如下： ```javascript const mask = (str, maskChar = '#') => { // 代码 } console.log(mask('123456')); // '##3456' console.log(mask('lindaidai')); // '#####idai' ``` 这道题的难度应该没有那么大，处理方式也有很多。呆呆这边主要是讲解一下如何使用`padStart`来实现的。 简单介绍一下`padStart`方法吧，它是`ES8`新增的实例函数，与它作用差不多的还有一个叫`padEnd`的函数： - `String.prototype.padStart` - `String.prototype.padEnd`...
### 脱离文档流是不是指该元素从DOM树中脱离? 并不会，DOM树是HTML页面的层级结构，指的是元素与元素之间的关系，例如包裹我的是我的父级，与我并列的是我的兄弟级，类似这样的关系称之为层级结构。 而文档流则类似于排队，我本应该在队伍中的，然而我脱离了队伍，但是我与我的父亲，兄弟，儿子的关系还在。
原本的代码为： ```html .sub { background: hotpink; display: inline-block; } 孩子 孩子 孩子 ``` 效果为：  可以看到每个`孩子`之间都会有一个空白。`inline-block`元素间有空格或是换行，因此产生了间隙。 解决办法： - **(1) 删除html中的空白**：不要让元素之间换行： ```html 孩子 孩子 孩子 ``` - **(2) 设置负的边距**：你可以用负边距来补齐空白。但你需要调整`font-size`，因为空白的宽度与这个属性有关系。例如下面这个例子： ```css .sub...
### JS三种加载方式的区别 (答案参考来源：[前端性能优化-页面加载渲染优化](https://juejin.im/post/5e9abe2a6fb9a03c7762169b)) **正常模式** 这种情况下 JS 会阻塞浏览器，浏览器必须等待 index.js 加载和执行完毕才能去做其它事情。 ```html ``` **async(异步) 模式** async 模式下，JS 不会阻塞浏览器做任何其它的事情。它的加载是异步的，当它加载结束，JS 脚本会立即执行。 ```html ``` **defer(延缓) 模式** defer 模式下，JS 的加载是异步的，执行是被推迟的。等整个文档解析完成、DOMContentLoaded 事件即将被触发时，被标记了 defer 的 JS 文件才会开始依次执行。 ```html...