js之零碎工具（四）

一、数组的去重

简单类型的去重

let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // 输出：[1, 2, 3, 4, 5]

在这个例子中，我们首先创建了一个新的 Set 对象，并将数组 arr 作为参数传递给 Set 的构造函数。这会创建一个新的 Set 对象，其中包含 arr 中的所有唯一值。然后，我们使用扩展运算符 … 将 Set 对象转换回数组。
（ps: 如果你的数组中包含对象，那么这种方法可能无法正确地去重，因为 Set 使用的是严格相等性检查 (===)，所以 {} 和 {} 是不相等的。在这种情况下，你可能需要使用其他方法来去重。）

数组中包含对象的去重

如果数组中包含的对象，属性的顺序不同，但是属性值一样，我们仍然认为它们是相同的，那么我们可以先对对象的属性进行排序，然后再进行去重。

let arr = [
  { id: 1, name: 'Tom' },
  { name: 'Jerry', id: 2 },
  { id: 1, name: 'Tom' },
  { id: 3, name: 'Spike' },
  { name: 'Jerry', id: 2 }
];

let uniqueArr = Array.from(
  new Set(
    arr.map(item => {
      return JSON.stringify(
        Object.keys(item)
          .sort()
          .reduce((result, key) => {
            result[key] = item[key];
            return result;
          }, {})
      );
    })
  )
).map(item => JSON.parse(item));

console.log('uniqueArr', uniqueArr);

在这个例子中，我们首先使用 Array.prototype.map 对数组中的每个对象进行处理。对于每个对象，我们先获取它的所有属性名，然后对属性名进行排序，然后使用 Array.prototype.reduce 创建一个新的对象，这个新的对象的属性是按照排序后的顺序添加的。然后我们将这个新的对象转换为字符串。

然后，我们使用 Set 来去重。最后，我们再次使用 Array.prototype.map 和 JSON.parse 将字符串转换回对象。
可以优化作为一个函数抛出

export function getUniqueObjArr(arr: any[]) {
  let uniqueArr = Array.from(
    new Set(
      arr.map((item: any) => {
        return JSON.stringify(
          Object.keys(item)
            .sort()
            .reduce((result: any, key) => {
              result[key] = item[key]
              return result
            }, {}),
        )
      }),
    ),
  ).map(item => JSON.parse(item))

  console.log('uniqueArr==', uniqueArr)
  return uniqueArr
}

二、实现复制到剪贴板功能

方案一

navigator.clipboard.writeText 是一个现代浏览器提供的 API，用于将文本复制到剪贴板。它返回一个 Promise 对象，当文本成功复制到剪贴板时，Promise 会被解析。

在 Vue 中，你可以在方法中使用 navigator.clipboard.writeText：

methods: {
  async copyToClipboard(text) {
    try {
      await navigator.clipboard.writeText(text);
      console.log('复制成功');
    } catch (err) {
      console.error('复制失败', err);
    }
  }
}

在这个方法中，navigator.clipboard.writeText(text) 会尝试将 text 复制到剪贴板。如果复制成功，Promise 会被解析，并打印出 ‘复制成功’。如果复制失败，Promise 会被拒绝，并打印出 ‘复制失败’ 和错误信息。

然后，你可以在模板中使用这个方法：

<button @click="copyToClipboard('要复制的文本')">复制</button>

在这个例子中，当点击按钮时，会调用 copyToClipboard 方法，并将 ‘要复制的文本’ 作为参数传递给它。

注意，navigator.clipboard.writeText 需要在用户交互的上下文中（例如点击事件处理器）使用，否则它可能会被浏览器阻止。此外，一些旧的浏览器可能不支持 navigator.clipboard.writeText，你需要确保你的目标浏览器支持它。

方案二： 采用 下载 clipboard

安装插件

npm install clipboard --save
或
yarn add clipboard

案例：

import Clipboard from 'clipboard'
/**
 * 复制功能实现
 * @param textValue: 需要复制的文本
 * @param className: 触发复制的元素的类名
 */
export const copyHandle = async (textValue: string, className: string) => {
  const clipboard = new Clipboard(className, {
    text: function () {
      return textValue
    },
  })
  clipboard.on('success', () => {
    Message({
      type: 'success',
      message: '复制成功',
    })
    // 释放内存
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    Message({
      type: 'error',
      message: '复制失败',
    })
    clipboard.destroy()
  })
}

案例使用

<mtd-button class="btn-demo-item copy-text" type="text" icon="export-o" @click="goCopyHandle">复制</mtd-button>
const  currentCodeMirrorValue = ref<string>(' ')
const goCopyHandle = async () => {
  console.log('复制表达式')
  copyHandle(currentCodeMirrorValue.value, '.copy-text')
}

三、一个对象格式化为 CSS 样式字符串

用于动态传入样式style

/**
 * formatTextStyleHandle 方法用于格式化文本样式
 * @param style 可选参数，一个对象，其键值对表示样式的属性和值
 * @returns 返回一个字符串，表示格式化后的样式内容，每个样式的属性和值用冒号分隔，每个样式之间用分号和空格分隔
 * 如果 style 参数不存在或为空，返回空字符串
 */
export const formatTextStyleHandle = (style?: { [key: string]: string }) => {
  // 判断 style 是否存在，如果存在，则将其转换为数组，并使用 map 方法遍历数组
  // 对于数组中的每个元素（即样式的属性和值），将其用冒号分隔，并返回一个新的数组
  // 最后，使用 join 方法将数组中的所有元素用分号和空格分隔，得到一个字符串
  // 如果 style 不存在或为空，返回空字符串
  const styleContent = style
    ? Object.entries(style)
        .map(([key, value]) => `${key}: ${value}`)
        .join('; ')
    : ''
  return styleContent
}

• 这段代码的主要作用是将一个对象格式化为 CSS 样式字符串。
• 函数 formatTextStyleHandle 接收一个可选参数 style，这是一个对象，其键值对应 CSS 样式的属性和值。
• 如果 style 存在，使用 Object.entries(style) 将其转换为一个二维数组，每个子数组的第一个元素是属性名，第二个元素是属性值。
• 使用 map 方法遍历这个二维数组，将每个子数组转换为一个字符串，形式为 “key: value”。
• 使用 join('; ') 方法将所有的字符串连接起来，每两个字符串之间用分号和空格隔开。
• 如果 style 不存在，返回空字符串。

代码解释：

export const formatTextStyleHandle = (style?: { [key: string]: string }) => {
  // 判断 style 是否存在
  const styleContent = style
    ? // 如果 style 存在，将其转换为二维数组，然后遍历这个数组，将每个子数组转换为一个字符串，最后将所有的字符串连接起来
      Object.entries(style)
        .map(([key, value]) => `${key}: ${value}`)
        .join('; ')
    : // 如果 style 不存在，返回空字符串
      ''
  return styleContent
}

例如，如果调用 formatTextStyleHandle({color: ‘red’, fontSize: ‘12px’})，则返回的结果是 ‘color: red; fontSize: 12px’。

使用

 const style = formatTextStyleHandle({color: 'red', fontSize: '12px'})
`<div class='format-tooltip' style='${style}'>xxx</div>`