每天10个前端小知识 ＜Day 3＞

1. 使用js生成1-10000的数组

实现的方法很多，除了使用循环（for,while,forEach等）外，最简单的是使用Array.from 
方法一 Array.from(new Array(10001).keys()).slice(1) 
方法二 Array.from({length:10000},(node,i)=> i+1)

2. 解释下如下代码的意图：Array.prototype.slice.apply(arguments)

arguments 为类数组对象，并不是真正的数组。 slice 可以实现数组的浅拷贝。 由于 arguments 不是真正的数组，所以没有 slice 方法，通过 apply 可以调用数组对象的 slice 方法，从而将 arguments 类数组转换为数组。

3. 直接在script标签中写 export 为什么会报错？

现代浏览器可以支持用 script 标签引入模块或者脚本，如果要引入模块，必须给 script 标签添加 type=“module”。如果引入脚本，则不需要 type。

4. mouseover 和 mouseenter 有什么区别？

当鼠标移动到元素上时就会触发 mouseenter 事件，类似 mouseover，它们两者之间的差别是 mouseenter 不会冒泡。 由于 mouseenter 不支持事件冒泡，导致在一个元素的子元素上进入或离开的时候会触发其 mouseover 和 mouseout 事件，但是却不会触发 mouseenter 和 mouseleave 事件。

5. offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别？

clientWidth/clientHeight 返回的是元素的内部宽度，它的值只包含 content + padding，如果有滚动条，不包含滚动条。 clientTop 返回的是上边框的宽度。 clientLeft 返回的左边框的宽度。 
offsetWidth/offsetHeight 返回的是元素的布局宽度，它的值包含 content + padding + border 包含了滚动条。 offsetTop 返回的是当前元素相对于其 offsetParent 元素的顶部的距离。 offsetLeft 返回的是当前元素相对于其 offsetParent 元素的左部的距离。 
scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸。 scrollTop 属性返回的是一个元素的内容垂直滚动的像素数。 scrollLeft 属性返回的是元素滚动条到元素左边的距离。

6. toPrecision 和 toFixed 和 Math.round 有什么区别？

toPrecision 用于处理精度，精度是从左至右第一个不为 0 的数开始数起。 toFixed 是对小数点后指定位数取整，从小数点开始数起。 Math.round 是将一个数字四舍五入到一个整数。

7. 什么是 Polyfill ？

Polyfill 指的是用于实现浏览器并不支持的原生 API 的代码。 比如说 querySelectorAll 是很多现代浏览器都支持的原生 Web API，但是有些古老的浏览器并不支持，那么假设有人写了一段代码来实现这个功能使这些浏览器也支持了这个功能，那么这就可以成为一个 Polyfill。

8. setTimeout 为什么不能保证能够及时执行？

setTimeout 并不能保证执行的时间，是否及时执行取决于 JavaScript 线程是拥挤还是空闲。 浏览器的JS引擎遇到setTimeout，拿走之后不会立即放入异步队列，同步任务执行之后，timer模块会到设置时间之后放到异步队列中。js引擎发现同步队列中没有要执行的东西了，即运行栈空了就从异步队列中读取，然后放到运行栈中执行。所以setTimeout可能会多了等待线程的时间。 这时setTimeout函数体就变成了运行栈中的执行任务，运行栈空了，再监听异步队列中有没有要执行的任务，如果有就继续执行，如此循环，就叫Event Loop。

9. JS中怎么阻止事件冒泡和默认事件？

event.stopPropagation()方法：这是阻止事件的冒泡方法，不让事件向 document 上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。
event.preventDefault()方法：这是阻止默认事件的方法，比如在a标签的绑定事件上调用此方法，链接则不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素。
return false： 这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

10. 什么是“事件代理”

事件代理（Event Delegation）也称之为事件委托。是JavaScript中常用绑定事件的常用技巧。 顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。 事件代理的原理是DOM元素的事件冒泡。 一个事件触发后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。
捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；
目标阶段：在目标节点上触发，称为“目标阶段”
冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层。