前端工具方法整理

@[toc]

0.在数组中找到匹配项

示例假设 this.connectors 的结构如下：

this.connectors = [
    { targetID: '123' },
    { targetID: '456' },
    { targetID: '789' }
];

如果 nodeId 是 '456'，则代码：

const element = this.connectors.find(connection => connection.targetID.includes(nodeId));
console.log(element); // 输出: { targetID: '456' }

如果 nodeId 是 '999'，则：

const element = this.connectors.find(connection => connection.targetID.includes(nodeId));
console.log(element); // 输出: undefined

1.在数组中找到匹配项，然后创建新对象

const modifiedRecords = ref([])
const handleBlur = (record) => {
    const index = modifiedRecords.value.findIndex(item => item.serialNo === record.serialNo);
      if (index !== -1) {
        modifiedRecords.value[index] = { ...record };
      } else {
        modifiedRecords.value.push({ ...record });
      }
}

在 JavaScript 中，{ ...record } 是一种对象展开运算符（spread operator）的用法。它用于将一个对象的所有可枚举属性复制到一个新对象中。具体来说，{ ...record } 的作用是创建一个新的对象，该对象具有与 record 相同的属性和属性值。
这里的 { ...record } 确保了更新时不会直接修改 record 对象，而是创建了一个新的对象，这在处理状态管理和数据更新时是一个良好的实践。

2.对象转JSON字符串

JSON.stringify(response.principal)

3.JSON字符串转JSON对象

JSON.parse(principal)

4.有个响应式对象，然后想清空所有属性

const checkedList = reactive({})
Object.keys(checkedList).forEach(key => {
    delete checkedList[key];
});

5.判断参数不为空

第一种方案：

if (data.note1 == undefined || data.note1 == null || data.note1 == "") {
    param.remark = "";
} 

第二种方案：

在 JavaScript 中，if (param) 语句会根据 param 的值来判断其真假（truthy 或 falsy）。在 JavaScript 中，以下值被视为“假”（falsy），即在条件判断中会被认为是 false：
Falsy 值
false: 布尔值 false。
0: 数字零。
-0: 负零。
0n: BigInt 类型的零。
"": 空字符串（无论是单引号还是双引号）。
null: 空值。
undefined: 未定义。
NaN: 非数字（Not a Number）。

示例

let values = [false, 0, -0, 0n, "", null, undefined, NaN];

values.forEach(value => {
    if (value) {
        console.log(`${value} is truthy`);
    } else {
        console.log(`${value} is falsy`);
    }
});

输出

false is falsy
0 is falsy
-0 is falsy
0n is falsy
 is falsy
null is falsy
undefined is falsy
NaN is falsy

6.格式化字符串

在 Java 中，String.format 和 MessageFormat 都可以用于格式化字符串，但它们的用法和适用场景有所不同。下面是对这两种方法的详细比较和用法示例。

1. String.format
   String.format 是一个静态方法，用于创建格式化字符串。它使用 C 语言风格的格式说明符，适合于简单的字符串格式化。

用法示例

String name = "Alice";
int age = 30;

// 使用 String.format 进行格式化
String formattedString = String.format("My name is %s and I am %d years old.", name, age);
System.out.println(formattedString); // 输出: My name is Alice and I am 30 years old.

格式说明符

• %s：字符串
• %d：整数
• %f：浮点数
• %x：十六进制整数

2. MessageFormat
   MessageFormat 是一个用于国际化的类，它允许你在字符串中使用占位符，并根据提供的参数进行格式化。它适合于需要处理多语言和复杂格式的场景。

用法示例

import java.text.MessageFormat;

String name = "Alice";
int age = 30;

// 使用 MessageFormat 进行格式化
String pattern = "My name is {0} and I am {1} years old.";
String formattedMessage = MessageFormat.format(pattern, name, age);
System.out.println(formattedMessage); // 输出: My name is Alice and I am 30 years old.

占位符

• {0}：第一个参数
• {1}：第二个参数
• 可以继续使用 {2}、{3} 等来引用后续参数。

主要区别

1. 格式化语法:

   • String.format 使用 % 符号和格式说明符。
   • MessageFormat 使用 {} 占位符。

2. 国际化:

   • MessageFormat 更适合用于国际化，因为它支持格式化日期、数字和货币等更复杂的格式。
   • String.format 主要用于简单的字符串格式化。

3. 性能:

   • 在简单的格式化场景下，String.format 可能更快，因为它的实现相对简单。
   • MessageFormat 在处理复杂的国际化需求时更为强大，但可能在性能上稍逊一筹。

4. 选择建议

   • 如果你只需要进行简单的字符串格式化，并且不需要国际化支持，可以使用 String.format。
   • 如果你的应用需要处理多语言，或者需要格式化日期、货币等复杂类型，建议使用 MessageFormat。

5. 总结

   • String.format: 用于简单的字符串格式化，适合快速格式化。
   • MessageFormat: 用于国际化和复杂格式化，适合需要处理多种格式的场景。

7.解析数组内容用逗号拼接

我有个["0", "1", "2", "3", "4"]，我想输出："0,1,2,3,4"

const warningNotice = ["0", "1", "2", "3", "4"];
const warningNoticeString = warningNotice.join(','); // 使用逗号作为分隔符
console.log(warningNoticeString); // 输出： "0,1,2,3,4"    

8.刷新整个页面

总结：类似于执行F5刷新按钮

window.location.reload();

9.判断字符串长度

Array.from(str).length > 20    

10.控制事件的传播和默认行为

比如图例中禁止鼠标右键默认弹窗而想展示自己绘制的弹窗时；比如阻止冒泡/捕获传播行为等等。

方法用于阻止事件的进一步传播。事件在 DOM 中是通过“冒泡”或“捕获”的方式进行传播的，调用这个方法可以阻止事件向上（冒泡）或向下（捕获）传播。

方法：
event.stopPropagation() 

用于阻止事件的默认行为。例如，当用户点击一个链接时，浏览器会默认跳转到链接指向的页面；当用户提交一个表单时，浏览器会默认提交表单。调用这个方法可以阻止这些默认行为。

方法：
event.preventDefault()

本人其他相关文章链接

1.Vue3快速上手简介
2.vue3第一章基础：创建Vue3.0工程，包括使用vue-cli 创建、使用 vite 创建
3.《vue3第二章》常用组合式 Composition API，包括setup、ref函数、reactive函数、vue3.0中的响应式原理、计算属性与监听属性
4.vue3知识点：setup
5.vue3知识点：ref函数
6.vue3知识点：reactive函数
7.vue3知识点：Vue3.0中的响应式原理和 vue2.x的响应式
8.vue3知识点：reactive对比ref
9.vue3知识点：计算属性与监视属性
10.vue3知识点：生命周期
11.vue3知识点：自定义hook函数
12.vue3知识点：toRef函数和toRefs函数
13.《vue3第三章》其它 Composition API(不常用，了解即可)，包括shallowReactive 与 shallowRef、readonly 与 shallowReadonly等等
14.vue3知识点：shallowReactive 与 shallowRef
15.vue3知识点：readonly 与 shallowReadonly
16.vue3知识点：toRaw 与 markRaw
17.vue3知识点：customRef
18.vue3知识点：provide 与 inject
19.vue3知识点：响应式数据的判断
20.vue3第四章》Composition API 的优势，包含Options API 存在的问题、Composition API 的优势
21.《vue3第五章》新的组件，包含：Fragment、Teleport、Suspense
22.《vue3第六章》其他，包含：全局API的转移、其他改变
23.vue3知识点：Teleport组件
24.vue3知识点：Suspense组件
25.vue3使用音频audio标签
26.vue3 脚手架初始化项目生成文件的介绍
27.vue3 开发电子地图功能
28.快速上手Vue3国际化 (i18n)
29.java使用websocket推送消息到页面