【前端--面试】常见面试题（六）—— JavaScript

这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战

不得不感叹，双休是真好，周末能睡懒觉可太幸福了，每天都跟自己说，一定要坚持下去，不知道今天有人会看题吗~~

类数组转化为数组

const arr = document.querySelectorAll('div');

类数组是具有length属性，但不具有数组原型上的方法。常见的类数组有arguments、DOM操作方法返回的结果。

方法一：Array.from

Array.from(arr)

Array.from()方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

语法：Array.from(arrayLike[, mapFn[, thisArg]])

• arrayLike：想要转换成数组的伪数组对象或可迭代对象。
• mapFn： 可选，如果指定了该参数，新数组中的每个元素会执行该回调函数。
• thisArg：可选参数，执行回调函数 mapFn 时 this 对象。

方法二：Array.prototype.slice.call()

Array.prototype.slice.call(arr)

我们知道，Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组，除了IE下的节点集合（因为ie下的dom对象是以com对象的形式实现的，js对象与com对象不能进行转换），所以，这个过程我们是不是可以理解为 Array.prototype.slice.call(arguments)的实现过程就是把传入进来的具有length属性的第一个参数arguments转换为数组，再调用它的slice（截取）方法。

方法三：扩展运算符

[...arr]

扩展运算符是三个点（...）。用于取出参数对象的所有可遍历属性，然后拷贝到当前对象之中。...arr返回的并不是一个数组，而是各个数组的值。只有[...arr]才是一个数组，所以...arr可以用来对方法进行传值

方法四：利用concat

Array.prototype.concat.apply([], arr);

concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

防抖（debounce）与节流（throttle）

防抖是触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间，常应用于用户进行搜索输入节约请求资源，window触发resize事件时进行防抖只触发一次。

节流是高频时间触发,但n秒内只会执行一次,所以节流会稀释函数的执行频率，常应用于鼠标不断点击触发、监听滚动事件。

// 防抖
const debounce = (fn, time) => {
  let timeout = null;
  return function() {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, time);
  }
};

// 节流
const throttle = (fn, time) => {
  let flag = true;
  return function() {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      flag = true;
    }, time);
  }
}