工具函数

去重

/**
 * 去重
 */
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的相互转换

list转tree

function list2tree(list) {
  const [map, treeData] = [{}, []];

  for (let i = 0; i < list.length; i += 1) {
    map[list[i].id] = i;
    list[i].children = [];
  }

  for (let i = 0; i < list.length; i += 1) {
    const node = list[i];
    if (node.pid && list[map[node.pid]]) {
      list[map[node.pid]].children.push(node);
    } else {
      treeData.push(node);
    }
  }
  return treeData;
}

写一个js函数铺平包含`children`的`list`

function flattenList(list) {
    let result = [];

    function flatten(item) {
        result.push(item);
        if (item.children && item.children.length > 0) {
            item.children.forEach(child => flatten(child));
        }
    }

    list.forEach(item => flatten(item));
    return result;
}

// 示例用法
const nestedList = [
    {
        id: 1,
        name: 'Item 1',
        children: [
            {
                id: 2,
                name: 'Item 1.1',
                children: []
            },
            {
                id: 3,
                name: 'Item 1.2',
                children: [
                    {
                        id: 4,
                        name: 'Item 1.2.1',
                        children: []
                    }
                ]
            }
        ]
    },
    {
        id: 5,
        name: 'Item 2',
        children: []
    }
];

const flatList = flattenList(nestedList);
console.log(flatList);

上述的实现会保留每个节点的 children 属性。如果你希望在铺平的结果中去掉 children 属性，可以在添加节点到结果列表之前删除 children 属性。以下是修改后的代码：

function flattenList(list) {
    let result = [];

    function flatten(item) {
        // 创建一个新的对象，复制item的所有属性，除了children
        let { children, ...rest } = item;
        result.push(rest);
        if (children && children.length > 0) {
            children.forEach(child => flatten(child));
        }
    }

    list.forEach(item => flatten(item));
    return result;
}

// 示例用法
const nestedList = [
    {
        id: 1,
        name: 'Item 1',
        children: [
            {
                id: 2,
                name: 'Item 1.1',
                children: []
            },
            {
                id: 3,
                name: 'Item 1.2',
                children: [
                    {
                        id: 4,
                        name: 'Item 1.2.1',
                        children: []
                    }
                ]
            }
        ]
    },
    {
        id: 5,
        name: 'Item 2',
        children: []
    }
];

const flatList = flattenList(nestedList);
console.log(flatList);

在这个版本中，我们使用了对象解构赋值语法 let { children, ...rest } = item; 来创建一个新的对象 rest，其中包含 item 的所有属性，除了 children。这样，添加到结果列表中的对象就不会包含 children 属性。

正则表达式

提取小括号中的内容

Live Editor

function demo(props) {
  // 提取小括号中的内容
  let sourceStr = 'aa(bb)cc';
  let regex = /\((.+)\)/g; // 匹配小括号
  let tempString = sourceStr.match(regex)[0];
  let result = tempString.substring(1,tempString.length-1);

  return (
    <p>结果为：{result}</p>
  )
}

function demo(props) {
  // 提取小括号中的内容
  let sourceStr = 'aa(bb)cc';
  let regex = /\((.+)\)/g; // 匹配小括号
  let tempString = sourceStr.match(regex)[0];
  let result = tempString.substring(1,tempString.length-1);

  return (
    <p>结果为：{result}</p>
  )
}

Result

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

Live Editor

function demo(props) {
  // 手机号码中间 4 位用星号（*）替换显示
  let phone = '13701134148';
  let result = phone.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2');

  return (
    <p>结果为：{result}</p>
  )
}

function demo(props) {
  // 手机号码中间 4 位用星号（*）替换显示
  let phone = '13701134148';
  let result = phone.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2');

  return (
    <p>结果为：{result}</p>
  )
}

Result

手机号有效性校验

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! "

关键点解释：

正则表达式：
- 使用 Unicode 范围来匹配表情符号。正则表达式中的 \u{XXXXXX} 表示 Unicode 代码点，需要使用 u 标志来启用 Unicode 模式。
- 由于表情符号分布在多个 Unicode 范围内，因此需要使用多个范围来匹配所有可能的表情符号。
替换表情符号：
- 使用 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."

关键点解释：

正则表达式：
- \s 匹配任何空白字符，包括空格、制表符、换页符、回车符、换行符等。
- + 表示匹配前面的模式一次或多次。
- g 标志表示全局匹配，即匹配字符串中的所有符合条件的子字符串。
替换空格和回车符：
- 使用 String.prototype.replace 方法，将匹配到的空格和回车符替换为空字符串。

`input`只允许输入数字包括小数

你可以使用 Vue.js 的 computed 属性来实现一个只允许输入数字（包括小数）的输入框。以下是一个示例：

<div id="app">
  <input v-model="inputValue" @input="validateInput" />
  <p>输入的值: {{ inputValue }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      inputValue: ''
    },
    computed: {
      // 计算属性可以用来处理和返回数据
    },
    methods: {
      validateInput(event) {
        // 使用正则表达式只允许数字和小数点
        const value = event.target.value;
        const regex = /^[0-9]*\.?[0-9]*$/;
        if (regex.test(value)) {
          this.inputValue = value;
        } else {
          // 如果输入不合法，移除最后一个字符
          this.inputValue = value.slice(0, -1);
        }
      }
    }
  });
</script>

在这个示例中，我们使用 Vue.js 的 v-model 指令来绑定输入框的值，并使用 @input 事件监听器来调用 validateInput 方法。validateInput 方法使用正则表达式来验证输入值是否为数字或小数。如果输入值不符合要求，则移除最后一个字符。

这样可以确保输入框只允许输入数字和小数。

input只允许输入大于等于1的正整数

你可以使用 Vue.js 的 computed 属性和 @input 事件来实现一个只允许输入大于等于1的正整数的输入框。以下是一个示例：

<div id="app">
  <input v-model="inputValue" @input="validateInput" />
  <p>输入的值: {{ inputValue }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      inputValue: ''
    },
    methods: {
      validateInput(event) {
        // 使用正则表达式只允许大于等于1的正整数
        const value = event.target.value;
        const regex = /^[1-9]\d*$/;
        if (regex.test(value) || value === '') {
          this.inputValue = value;
        } else {
          // 如果输入不合法，移除最后一个字符
          this.inputValue = value.slice(0, -1);
        }
      }
    }
  });
</script>

在这个示例中，我们使用 Vue.js 的 v-model 指令来绑定输入框的值，并使用 @input 事件监听器来调用 validateInput 方法。validateInput 方法使用正则表达式来验证输入值是否为大于等于1的正整数。如果输入值不符合要求，则移除最后一个字符。

这样可以确保输入框只允许输入大于等于1的正整数。

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

使用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;
}

去重​

循环删数组元素​

使用weakmap实现深拷贝​

数组转树；树转数组​

list转tree​

写一个js函数铺平包含children的list​

正则表达式​

提取小括号中的内容​

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

手机号有效性校验​

过滤表情符号​

过滤空格和回车符​

input只允许输入数字包括小数​

input只允许输入大于等于1的正整数​

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

复制​

获取 URL 中的查询参数​

方法一：使用 URLSearchParams​

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

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

去重

循环删数组元素

使用`weakmap`实现深拷贝

数组转树；树转数组

list转tree

写一个js函数铺平包含`children`的`list`

正则表达式

提取小括号中的内容

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

手机号有效性校验

过滤表情符号

过滤空格和回车符

`input`只允许输入数字包括小数

input只允许输入大于等于1的正整数

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

复制

获取 URL 中的查询参数

方法一：使用 `URLSearchParams`

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

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