返回

JS超级帮手:十一个常用函数助你高效编码

前端

深拷贝

深拷贝是指将一个对象或数组的全部属性和值复制到另一个新对象或数组中,而不会修改原始对象或数组。在JavaScript中,可以通过递归的方式实现深拷贝。

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  let newObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }

  return newObj;
}

数组去重

数组去重是指从数组中删除重复元素,只保留唯一元素。在JavaScript中,可以使用多种方法来实现数组去重。

// 方法一:使用Set
function removeDuplicates(arr) {
  return [...new Set(arr)];
}

// 方法二:使用indexOf和filter
function removeDuplicates(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}

// 方法三:使用对象
function removeDuplicates(arr) {
  let obj = {};
  arr.forEach((item) => {
    obj[item] = true;
  });

  return Object.keys(obj);
}

判断数据类型

判断数据类型是JavaScript中一项基本操作,可以通过多种方法来实现。

// 方法一:使用typeof运算符
function checkDataType(data) {
  return typeof data;
}

// 方法二:使用instanceof运算符
function checkDataType(data) {
  return data instanceof Array ? 'array' : typeof data;
}

// 方法三:使用Object.prototype.toString.call()方法
function checkDataType(data) {
  return Object.prototype.toString.call(data).slice(8, -1).toLowerCase();
}

字符串去重

字符串去重是指从字符串中删除重复字符,只保留唯一字符。在JavaScript中,可以使用正则表达式来实现字符串去重。

function removeDuplicateChars(str) {
  return str.replace(/(\w)\1+/g, '$1');
}

防抖

防抖是指在一段时间内只执行一次函数,即使该函数被多次触发。在JavaScript中,可以使用setTimeout()方法来实现防抖。

function debounce(func, delay) {
  let timer = null;
  return function() {
    if (timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(() => {
      func.apply(this, arguments);
      timer = null;
    }, delay);
  };
}

节流

节流是指在一段时间内只执行一次函数,即使该函数被多次触发。与防抖不同,节流会在一段时间内只执行一次函数,而防抖会在一段时间后执行一次函数。在JavaScript中,可以使用setInterval()方法来实现节流。

function throttle(func, delay) {
  let lastTime = 0;
  return function() {
    let now = new Date().getTime();
    if (now - lastTime > delay) {
      func.apply(this, arguments);
      lastTime = now;
    }
  };
}

拆解URL参数

拆解URL参数是指将URL中的参数部分提取出来,并以键值对的形式返回。在JavaScript中,可以使用正则表达式或URLSearchParams对象来实现URL参数拆解。

// 方法一:使用正则表达式
function parseURLParams(url) {
  const regex = /([^&=]+)=([^&=]+)/g;
  const params = {};
  let match;

  while (match = regex.exec(url)) {
    params[match[1]] = match[2];
  }

  return params;
}

// 方法二:使用URLSearchParams对象
function parseURLParams(url) {
  const params = new URLSearchParams(url);
  const obj = {};

  params.forEach((value, key) => {
    obj[key] = value;
  });

  return obj;
}

数组排序

数组排序是指将数组中的元素按照一定顺序排列。在JavaScript中,可以使用sort()方法来对数组进行排序。

function sortArray(arr, order) {
  if (order === 'asc') {
    return arr.sort((a, b) => a - b);
  } else if (order === 'desc') {
    return arr.sort((a, b) => b - a);
  }
}

字符串处理

字符串处理是JavaScript中一项常见操作,包括各种字符串的操作和转换。

// 字符串反转
function reverseString(str) {
  return str.split('').reverse().join('');
}

// 字符串首字母大写
function capitalizeFirstLetter(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

// 字符串驼峰命名法转换
function camelCase(str) {
  return str.replace(/[-_]+(\w)/g, (_, c) => c.toUpperCase());
}

// 字符串下划线命名法转换
function snakeCase(str) {
  return str.replace(/[A-Z]/g, (c) => `_${c.toLowerCase()}`);
}

数组扁平化

数组扁平化是指将多维数组转换为一维数组。在JavaScript中,可以使用递归或reduce()方法来实现数组扁平化。

// 方法一:使用递归
function flattenArray(arr) {
  let result = [];

  arr.forEach((item) => {
    if (Array.isArray(item)) {
      result = result.concat(flattenArray(item));
    } else {
      result.push(item);
    }
  });

  return result;
}

// 方法二:使用reduce()方法
function flattenArray(arr) {
  return arr.reduce((acc, item) => {
    return acc.concat(Array.isArray(item) ? flattenArray(item) : item);
  }, []);
}

常用正则验证规则

正则表达式是一种用于匹配字符串中特定模式的工具。在JavaScript中,可以使用正则表达式来进行各种数据验证。

// 邮箱验证
function isValidEmail(email) {
  return /\S+@\S+\.\S+/.test(email);
}

// 电话号码验证
function isValidPhone(phone) {
  return /^\d{11}$/.test(phone);
}

// 身份证号码验证
function isValidIDCard(idCard) {
  return /^\d{17}(\d|X)$/.test(idCard);
}

// URL验证
function isValidURL(url) {
  return /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/.test(url);
}