前端日常使用函数实现

前端

2023-09-06 23:38:52

函数实现：前端开发中的利器

引言

在前端开发中，熟练运用函数至关重要。它们使我们能够执行复杂任务、简化代码并提高应用程序效率。本文将深入探讨日常使用的函数实现，涵盖数组去重、扁平化数组、自定义 instanceof 实现等多种场景。

数组去重

数组去重意味着移除数组中的重复元素。有两种常见方法：

Set + Array.splice： 利用 Set 的唯一性，去除重复元素后更新原数组。
循环 + indexOf： 遍历数组，使用 indexOf 查找重复元素并删除。

扁平化数组

扁平化数组是指将嵌套数组中的所有元素合并到一个一维数组中。

ES6 中的 flat： ES6 提供了 flat 方法，可以轻松扁平化数组。
reduce： 使用 reduce 循环遍历数组，遇到嵌套数组则递归扁平化。

自定义 instanceof 实现

instanceof 操作符用于检查一个对象是否属于某个类的实例。我们可以自定义一个 instanceOf 函数来实现类似的功能：

function instanceOf(obj, constructor) {
  let proto = Object.getPrototypeOf(obj);

  while (proto) {
    if (proto === constructor.prototype) {
      return true;
    }

    proto = Object.getPrototypeOf(proto);
  }

  return false;
}

getElementById 递归实现

getElementById 函数可以获取页面中的元素。我们可以递归实现它来遍历 DOM 树：

function getElementByIdRecursive(id, element = document) {
  if (element.id === id) {
    return element;
  }

  for (let child of element.children) {
    const foundElement = getElementByIdRecursive(id, child);

    if (foundElement) {
      return foundElement;
    }
  }

  return null;
}