前端工程师进阶之旅-手撕代码【前端常用方法以及面试常见题】

最新推荐文章于 2024-08-28 09:29:31 发布

耶温

最新推荐文章于 2024-08-28 09:29:31 发布

阅读量301

点赞数

分类专栏：前端笔记 JavaScript 文章标签： javascript css html vue.js es6

本文链接：https://blog.csdn.net/weixin_48206613/article/details/116128289

版权

本文是前端工程师的进阶教程，涵盖了数据类型判断、数组操作（去重、排序、扁平化）、深拷贝、继承方式、事件总线、防抖节流、图片懒加载、Cookie管理等核心知识点。通过实际代码实现，帮助开发者提升技能，为面试做好准备。

摘要由CSDN通过智能技术生成

前端工程师进阶之旅-手撕代码

主要包括一些工作中常用的方法，面试常问到的方法。还有一些不太了解，趁机深入了解的知识点。

废话少说，直接干代码就完事了。

数据类型判断

使用 Object.prototype.toString 实现。

function myTypeof(data) {
   
  return Object.prototype.toString.call(data).slice(8, -1).toLowerCase();
}

数组去重

//new Set() 集合
//ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
function unique(arr) {
   
  return [...new Set(arr)];
}

//数组去重 filter
function unique(arr) {
   
  return arr.filter((item, index, array) => {
   
    return array.indexOf(item) === index;
  });
}

// 数组去重  forEach
function unique(arr) {
   
  let res = [];
  arr.forEach((item) => {
   
    res.includes(item) ? "" : res.push(item);
  });
  return res;
}

数组排序

// 快排排序
function quickSort(arr) {
   
    // 数组长度为1 直接返回
    if (arr.length <= 1) return arr
    var left = [],
        right = []
    var centerIndex = Math.floor(arr.length / 2)
    // 定义中间值
    var center = arr[centerIndex];
    for (let i = 0; i < arr.length; i++) {
   
        // 小于中间值数据添加到left
        if (arr[i] < center) {
   
            left.push(arr[i])
        } else if (arr[i] > center) {
   
            // 大于中间值数据添加到right
            right.push(arr[i])
        }
    }
    // 递归返回 concat连接返回数据
    return quickSort(left).concat([center], quickSort(right))
}
// 冒泡排序
function bubbleSort(arr) {
   
    for (var i = 0; i < arr.length - 1; i++) {
   
        for (var j = i + 1; j < arr.length; j++) {
   
            if (arr[i] > arr[j]) {
   
                var temp = arr[j]
                arr[j] = arr[i]
                arr[i] = temp
            }
        }
    }
    return arr
}

数组扁平化

//使用 Infinity，可展开任意深度的嵌套数组
arr.flat(Infinity);

//适用JSON转换
JSON.parse("[" + JSON.stringify(arr).replace(/\[|\]/g, "") + "]");

//递归
function myFlat(arr) {
   
  let res = [];
  arr.forEach((item) => {
   
    if (Array.isArray(item)) {
   
      res = res.concat(myFlat(item));
    } else {
   
      res.push(item);
    }
  });
  return res;
}
//some
function myFlat(arr) {
   
  while (arr.some((res) => Array.isArray(res))) {
   
    arr = [].concat(...arr);
  }
  return arr;
}

深拷贝深克隆

// 简单克隆 无法复制函数
var newObj = JSON.parse(JSON.stringify(obj));

// 深克隆  无法克隆特殊实例  Date等
function deepClone(target) {
   
  if (typeof target !== "object") {
   
    return target;
  }
  var result;
  if (Object.prototype.toString.call(target) == "[object Array]") {
   
    // 数组
    result = [];
  } else {
   
    // 对象
    result = {
   };
  }
  for (var prop in target) {
   
    if (target.hasOwnProperty(prop)) {
   
      result[prop] = deepClone(target[prop]);
    }
  }
  return result;
}

//复杂版深克隆
function deepClone(target) {
   
  if (typeof target !== "object") return target;
  // 检测RegDate类型创建特殊实例
  let constructor = target.constructor;
  if (/^(RegExp|Date)$/i.test(constructor.name)) {