前端工具方法整理

2025-05-28
黑龙江
本文字数：3042 字
阅读完需：约 10 分钟

@[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 falsy0 is falsy-0 is falsy0n is falsy is falsynull is falsyundefined is falsyNaN is falsy

复制代码

6.格式化字符串

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

String.formatString.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：十六进制整数

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

用法示例

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} 等来引用后续参数。

主要区别

格式化语法:
String.format 使用 % 符号和格式说明符。
MessageFormat 使用 {} 占位符。
国际化:
MessageFormat 更适合用于国际化，因为它支持格式化日期、数字和货币等更复杂的格式。
String.format 主要用于简单的字符串格式化。
性能:
在简单的格式化场景下，String.format 可能更快，因为它的实现相对简单。
MessageFormat 在处理复杂的国际化需求时更为强大，但可能在性能上稍逊一筹。
选择建议
如果你只需要进行简单的字符串格式化，并且不需要国际化支持，可以使用 String.format。
如果你的应用需要处理多语言，或者需要格式化日期、货币等复杂类型，建议使用 MessageFormat。
总结
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()

复制代码

发布于: 刚刚阅读数: 4

刘大猫

关注

还未添加个人签名 2022-08-23 加入

还未添加个人简介

发布

暂无评论

创作场景

前端工具方法整理

0.在数组中找到匹配项

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

2.对象转 JSON 字符串

3.JSON 字符串转 JSON 对象

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

5.判断参数不为空

6.格式化字符串

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

8.刷新整个页面

9.判断字符串长度

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

本人其他相关文章链接

刘大猫

评论