Skip to main content

工具函数

去重​

/**
 * 去重
 */
handleDeduplicate(sourceArray,keyName) {
  let deduplicationList = [];
  let obj = {};
  for (let item of sourceArray) {
    if (!obj[item[keyName]]) {
      deduplicationList.push(item);
      obj[item[keyName]] = 1;
    }
  }
  return deduplicationList;
},

循环删数组元素​

也可以使用filter实现:

使用weakmap实现深拷贝​

/**
 * 使用weakmap手写深拷贝
 */
deepClone(obj, hash = new WeakMap()) {
  const isComplexDataType = obj => (typeof obj === 'object' || typeof obj === 'function') && (obj !== null);
  if (obj.constructor === Date) return new Date(obj);
  if (obj.constructor === RegExp) return new RegExp(obj);
  if (hash.has(obj)) return hash.get(obj);
  let allDesc = Object.getOwnPropertyDescriptor(obj);
  let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc);
  hash.set(obj, cloneObj);
  for (const key of Reflect.ownKeys(obj)) {
    cloneObj[key] = (isComplexDataType(obj[key]) && typeof obj[key] !== 'function') ? this.deepClone(obj[key], hash) : obj[key];
  }
  return cloneObj;
},

数组转树；树转数组​

参考：list和tree的相互转换

正则表达式​

提取小括号中的内容​

Live Editor
Result
Loading...

手机号码中间 4 位用星号（*）替换显示​

Live Editor
Result
Loading...

手机号有效性校验​

if (!(/^1[3456789]\d{9}$/.test(phone))) return Toast.show({ content: '手机号需是11位有效手机号' });

过滤表情符号​

在 JavaScript 中，可以使用正则表达式来过滤掉字符串中的表情符号。表情符号通常位于 Unicode 的特定范围内，因此我们可以使用 Unicode 范围来匹配这些表情符号。

以下是一个示例代码，展示了如何使用正则表达式来过滤掉字符串中的表情符号：

function removeEmojis(str) {
  // 正则表达式匹配表情符号
  const emojiRegex = /[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F700}-\u{1F77F}]|[\u{1F780}-\u{1F7FF}]|[\u{1F800}-\u{1F8FF}]|[\u{1F900}-\u{1F9FF}]|[\u{1FA00}-\u{1FA6F}]|[\u{1FA70}-\u{1FAFF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|[\u{1F1E6}-\u{1F1FF}]|[\u{1F201}-\u{1F251}]|[\u{1F004}-\u{1F0CF}]|[\u{1F18E}-\u{1F1AD}]|[\u{1F191}-\u{1F19A}]|[\u{1F232}-\u{1F23A}]|[\u{1F250}-\u{1F251}]|[\u{1F300}-\u{1F320}]|[\u{1F32D}-\u{1F335}]|[\u{1F337}-\u{1F37C}]|[\u{1F37E}-\u{1F393}]|[\u{1F3A0}-\u{1F3CA}]|[\u{1F3CF}-\u{1F3D3}]|[\u{1F3E0}-\u{1F3F0}]|[\u{1F3F4}-\u{1F3F8}]|[\u{1F400}-\u{1F43E}]|[\u{1F440}-\u{1F4FC}]|[\u{1F4FF}-\u{1F53D}]|[\u{1F54B}-\u{1F54E}]|[\u{1F550}-\u{1F567}]|[\u{1F57A}-\u{1F57A}]|[\u{1F595}-\u{1F596}]|[\u{1F5A4}-\u{1F5A4}]|[\u{1F5FB}-\u{1F64F}]|[\u{1F680}-\u{1F6C5}]|[\u{1F6CC}-\u{1F6CC}]|[\u{1F6D0}-\u{1F6D2}]|[\u{1F6EB}-\u{1F6EC}]|[\u{1F6F4}-\u{1F6F9}]|[\u{1F910}-\u{1F93A}]|[\u{1F93C}-\u{1F945}]|[\u{1F947}-\u{1F9FF}]|[\u{1FA70}-\u{1FA73}]|[\u{1FA78}-\u{1FA7A}]|[\u{1FA80}-\u{1FA82}]|[\u{1FA90}-\u{1FA95}]|[\u{1F004}-\u{1F004}]|[\u{1F0CF}-\u{1F0CF}]|[\u{1F170}-\u{1F171}]|[\u{1F17E}-\u{1F17F}]|[\u{1F18E}-\u{1F18E}]|[\u{1F191}-\u{1F19A}]|[\u{1F1E6}-\u{1F1FF}]|[\u{1F201}-\u{1F202}]|[\u{1F21A}-\u{1F21A}]|[\u{1F22F}-\u{1F22F}]|[\u{1F232}-\u{1F23A}]|[\u{1F250}-\u{1F251}]|[\u{1F300}-\u{1F320}]|[\u{1F32D}-\u{1F335}]|[\u{1F337}-\u{1F37C}]|[\u{1F37E}-\u{1F393}]|[\u{1F3A0}-\u{1F3CA}]|[\u{1F3CF}-\u{1F3D3}]|[\u{1F3E0}-\u{1F3F0}]|[\u{1F3F4}-\u{1F3F8}]|[\u{1F400}-\u{1F43E}]|[\u{1F440}-\u{1F4FC}]|[\u{1F4FF}-\u{1F53D}]|[\u{1F54B}-\u{1F54E}]|[\u{1F550}-\u{1F567}]|[\u{1F57A}-\u{1F57A}]|[\u{1F595}-\u{1F596}]|[\u{1F5A4}-\u{1F5A4}]|[\u{1F5FB}-\u{1F64F}]|[\u{1F680}-\u{1F6C5}]|[\u{1F6CC}-\u{1F6CC}]|[\u{1F6D0}-\u{1F6D2}]|[\u{1F6EB}-\u{1F6EC}]|[\u{1F6F4}-\u{1F6F9}]|[\u{1F910}-\u{1F93A}]|[\u{1F93C}-\u{1F945}]|[\u{1F947}-\u{1F9FF}]|[\u{1FA70}-\u{1FA73}]|[\u{1FA78}-\u{1FA7A}]|[\u{1FA80}-\u{1FA82}]|[\u{1FA90}-\u{1FA95}]/gu;

  // 使用正则表达式替换表情符号为空字符串
  return str.replace(emojiRegex, '');
}

// 示例
const stringWithEmojis = "Hello, world! 🌍😊";
const stringWithoutEmojis = removeEmojis(stringWithEmojis);
console.log(stringWithoutEmojis); // 输出: "Hello, world! "

关键点解释：

  1. 正则表达式：

    • 使用 Unicode 范围来匹配表情符号。正则表达式中的 \u{XXXXXX} 表示 Unicode 代码点，需要使用 u 标志来启用 Unicode 模式。
    • 由于表情符号分布在多个 Unicode 范围内，因此需要使用多个范围来匹配所有可能的表情符号。

  2. 替换表情符号：

    • 使用 String.prototype.replace 方法，将匹配到的表情符号替换为空字符串。

过滤空格和回车符​

在 JavaScript 中，可以使用正则表达式来过滤掉字符串中的空格和回车符。以下是一个示例代码，展示了如何实现这一功能：

function removeWhitespaceAndNewlines(str) {
  // 正则表达式匹配空格和回车符
  const whitespaceAndNewlineRegex = /\s+/g;

  // 使用正则表达式替换空格和回车符为空字符串
  return str.replace(whitespaceAndNewlineRegex, '');
}

// 示例
const stringWithWhitespaceAndNewlines = "Hello, \n world! \t This is a test.  ";
const stringWithoutWhitespaceAndNewlines = removeWhitespaceAndNewlines(stringWithWhitespaceAndNewlines);
console.log(stringWithoutWhitespaceAndNewlines); // 输出: "Hello,world!Thisisatest."

关键点解释：

  1. 正则表达式：

    • \s 匹配任何空白字符，包括空格、制表符、换页符、回车符、换行符等。
    • + 表示匹配前面的模式一次或多次。
    • g 标志表示全局匹配，即匹配字符串中的所有符合条件的子字符串。

  2. 替换空格和回车符：

    • 使用 String.prototype.replace 方法，将匹配到的空格和回车符替换为空字符串。

判断一个对象是不是一个空对象​

使用Reflect.ownKeys判断对象自身为空

复制​

function handleCopy(copyValue: string) {
  if (!navigator.clipboard) {
    // 1.创建一个可选中元素
    let textArea = document.createElement("textarea");
    textArea.value = copyValue;
    // 2.使用定位，阻止页面滚动
    textArea.style.top = "0";
    textArea.style.left = "0";
    textArea.style.position = "fixed";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      let successFlag = document.execCommand('copy');
      if (successFlag) {
        Toast.show({
          content: '复制成功',
        });
      } else {
        Toast.show({
          content: '复制失败',
        });
      }
    } catch (err) {
      Toast.show({
        content: '复制失败',
      });
    }
    // 3.移除元素
    document.body.removeChild(textArea);
    return;
  }
  navigator.clipboard.writeText(copyValue).then(function() {
    Toast.show({
      content: '复制成功',
    });
  }, function(_err) {
    Toast.show({
      content: '复制失败',
    });
  });
}

获取 URL 中的查询参数​

在 JavaScript 中，有多种方法可以获取 URL 中的查询参数。以下是几种常见的方法：

方法一：使用 URLSearchParams​

URLSearchParams 是一个现代的、简洁的 API，可以方便地解析查询参数。

示例代码:

// 假设当前 URL 是 http://example.com/?name=John&age=30

// 获取当前 URL 的查询字符串
const queryString = window.location.search;

// 创建 URLSearchParams 对象
const urlParams = new URLSearchParams(queryString);

// 获取特定参数
const name = urlParams.get('name'); // "John"
const age = urlParams.get('age'); // "30"

// 输出参数
console.log(`Name: ${name}, Age: ${age}`);

方法二：使用 URL 对象（现代浏览器）​

URL 对象在现代浏览器中也非常方便，可以直接解析 URL 和查询参数。

示例代码:

// 假设当前 URL 是 http://example.com/?name=John&age=30

// 创建一个 URL 对象
const url = new URL(window.location.href);

// 获取特定参数
const name = url.searchParams.get('name'); // "John"
const age = url.searchParams.get('age'); // "30"

// 输出参数
console.log(`Name: ${name}, Age: ${age}`);

方法三：不使用现代浏览器的API​

需要兼容旧浏览器的场景

示例代码:

function getQueryParams() {
  const query = window.location.search;
  const params: any = {};
  const pairs = query.substring(1).split('&');
  for (let i = 0; i < pairs.length; i++) {
    const pair = pairs[i].split('=');
    params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
  }
  return params;
}