15个非常实用的JavaScript技巧，提高你的开发效率

本文我们将探讨15个实用的JavaScript技巧，希望它们可以帮你提高开发效率，有用的话点赞收藏~。

1. 反转字符串

你有时候可能需要将字符串颠倒过来。在JavaScript中，有一个巧妙的一行代码可以实现这个目标：

const reversedString = str.split('').reverse().join('');

这段代码首先将字符串拆分为字符数组，然后颠倒字符的顺序，最后将它们重新连接成一个字符串。这个技巧在处理文本数据时非常有用。

2. 数组求和

计算数组中元素的总和是常见的任务，而JavaScript中的reduce()方法能够轻松胜任此任务。reduce()方法遍历数组中的每个元素，并将它们累积为一个值，例如计算数组元素的总和：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, number) => total + number, 0);
console.log(sum); // 15

在这个示例中，我们使用reduce()方法和一个回调函数，将数组元素累积到total中，并返回总和。

3. 寻找数组中的最大和最小值

寻找数组中的最大和最小值是常见的任务，而JavaScript提供了一种简单的方法来实现：

const numbers = [11, 2, 9, 6, 19];
console.log(Math.max(...numbers)); // 19
console.log(Math.min(...numbers)); // 2

这里我们使用了展开运算符...将数组中的元素传递给Math.max()和Math.min()方法，它们分别返回数组中的最大和最小值。

4. 从数组中删除重复项

有时候你需要从数组中去除重复的值。在JavaScript中，你可以使用Set对象和展开运算符来轻松实现：

const numbers = [2, 3, 7, 7, 2];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [2, 3, 7]

通过创建一个新的Set对象并将数组作为参数传递，你可以确保只保留唯一的值，然后使用展开运算符将Set转换回数组。

5. 遍历对象

使用Object.entries()方法，你可以获取一个对象的键值对数组，然后遍历对象的属性并对其进行操作：

const person = {name: 'Rabi Siddique',age: 25,city: 'Gujranwala'
};
for (const [key, value] of Object.entries(person)) {console.log(`${key}: ${value}`);
}

在这个示例中，我们有一个包含姓名、年龄和城市属性的对象。我们使用Object.entries()方法创建键值对数组，然后使用for...of循环来迭代数组，将键值对解构为变量key和value，最后使用模板字面量将它们输出到控制台。

6. 复制到剪贴板

通过Clipboard API，在JavaScript中将文本复制到剪贴板变得非常简单：

function copyToClipboard(text) {navigator.clipboard.writeText(text);
}

在这个函数中，我们调用navigator.clipboard.writeText()方法并传递文本参数，将文本内容写入剪贴板。

7. 检测在线/离线状态

要检查用户在Web应用中的在线/离线状态，你可以使用navigator.onLine属性：

if (navigator.onLine) {console.log('用户在线');
} else {console.log('用户离线');
}

这个属性返回一个布尔值，指示浏览器当前是在线还是离线状态。

8. 去除假值

在JavaScript中，你可以使用filter()方法来从数组中删除假值，这些假值包括false、0、空字符串''、null、undefined和NaN：

const arr = [1, 2, 0, '', undefined, null, 3, NaN, false];
const filteredArr = arr.filter(Boolean);
console.log(filteredArr); // [1, 2, 3]

在这个示例中，我们将Boolean作为filter()的回调函数，Boolean()是JavaScript中的一个内置函数，对于真值返回true，对于假值返回false。通过传递Boolean作为回调函数，filter()将从数组中删除所有假值，并返回一个仅包含真值的新数组filteredArr。

9. 展开数组

为了展平JavaScript中的多维数组，你可以使用flat()方法。flat()方法创建一个新数组，将所有子数组元素递归连接到指定深度：

const multiDimensionalArray = [[1, 2], [3, 4, [5, 6]]];
const flattenedArray = multiDimensionalArray.flat(2);
console.log(flattenedArray); // 输出: [1, 2, 3, 4, 5, 6]

在这个示例中，multiDimensionalArray是一个包含两个嵌套数组的二维数组。通过调用flat()方法并指定深度为2，所有子数组元素都被连接到一个单一的数组中，生成flattenedArray，其中包含原始多维数组的所有元素。

10. 访问自定义属性

在HTML中，数据属性提供了一种在元素中存储额外数据的方法

。要在JavaScript中访问这些数据属性，你可以使用元素的dataset属性：

<div id="myDiv" data-name="Rabi Siddique" data-age="25"></div>

要访问div元素的data-name和data-age属性，你可以使用以下JavaScript代码：

const myDiv = document.getElementById('myDiv');
const name = myDiv.dataset.name;
const age = myDiv.dataset.age;
console.log(name); // "Rabi Siddique"
console.log(age);  // "25"

在这个示例中，myDiv.dataset返回一个包含div元素上所有自定义数据属性值的对象。我们可以通过使用属性名作为dataset对象的属性，访问特定的数据属性。

11. 从可迭代对象创建数组

Array.from()是JavaScript中的一个内置方法，它可以从可迭代对象或类似数组的对象创建一个新数组：

// 将字符串转换为数组
const str = "Rabi";
const arr = Array.from(str);
console.log(arr); // 输出: ["R", "a", "b", "i"]
​
// 将Set转换为数组
const set = new Set([1, 2, 3, 3, 4, 5]);
const arr = Array.from(set);
console.log(arr); // 输出: [1, 2, 3, 4, 5]

这个方法可以用来将不同的数据结构，如字符串、Set和Map，转换成数组。

12. 数组解构

数组解构赋值是一种从数组或对象中提取值并将其分配给变量的方法，它使代码更简洁、可读性更高。例如，考虑以下数组：

const numbers = [1, 2, 3, 4, 5];

与其使用索引访问每个元素，我们可以使用解构赋值来提取特定的值：

const [first, second, , fourth] = numbers;
​
console.log(first); // 1
console.log(second); // 2
console.log(fourth); // 4

在这个示例中，我们使用方括号创建一个与数组形状匹配的模式，模式中的逗号允许我们跳过我们不感兴趣的元素。然后，我们将提取的值分配给新变量（first、second和fourth）。

13. 对象解构

对象解构赋值也非常有用，允许我们从对象中提取属性值并将其分配给变量：

const person = {name: 'Rabi Siddique',age: 25,email: 'rabi@example.com'
};
​
const {name, age, email} = person;
​
console.log(name); // 'Rabi Siddique'
console.log(age); // 25
console.log(email); // 'rabi@example.com'

在这个示例中，我们使用大括号创建一个模式，该模式匹配对象的形状。变量名（name、age和email）匹配对象的属性名，因此相应的值被提取并分配给这些变量。

14. Promise.all()

Promise.all()允许多个Promise并行执行。它接受一个Promise数组作为输入，并返回一个新的Promise，该新Promise在数组中的所有Promise都解决时解决。

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
​
Promise.all([promise1, promise2]).then(responses => {// 在这里处理两个请求的响应const response1 = responses[0];const response2 = responses[1];// 对响应进行操作}).catch(error => {// 处理任何请求的错误console.error(error);});

在这个示例中，我们使用fetch()方法创建两个Promise来获取来自不同端点的数据。我们将这些Promise放入Promise.all()，当所有Promise都完成时，我们可以在then()块中处理响应。如果任何一个Promise被拒绝，catch()块将处理错误。

15. 检测鼠标右键点击事件

要检测鼠标右键点击事件，你可以监听contextmenu事件，这个事件在用户右键点击元素时触发。以下是一个示例代码段，当用户右键点击文档时，将消息记录到控制台：

document.addEventListener('contextmenu', (event) => {event.preventDefault(); // 阻止默认的上下文菜单出现console.log('检测到右键点击事件！');
});

在这个示例中，我们使用addEventListener方法将contextmenu事件监听器添加到document对象上。当事件触发时，回调函数被执行，我们通过调用event对象上的preventDefault()方法来阻止默认上下文菜单的显示，然后将消息记录到控制台，指示检测到了右键点击事件。

检测鼠标右键点击事件的一个有趣用途是创建自定义上下文菜单。例如，你可以禁用浏览器的默认上下文菜单，然后创建自己的菜单，它将在用户右键点击你的网站的特定元素或区域时显示。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/710721.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

sheng的学习笔记-卷积神经网络经典架构-LeNet-5、AlexNet、VGGNet-16

sheng的学习笔记-卷积神经网络经典架构-LeNet-5、AlexNet、VGGNet-16

目录&#xff1a;目录 看本文章之前&#xff0c;需要学习卷积神经网络基础&#xff0c;可参考 sheng的学习笔记-卷积神经网络-CSDN博客 目录 LeNet-5 架构图 层级解析 1、输入层&#xff08;Input layer&#xff09; 2、卷积层C1&#xff08;Convolutional layer C1&…
阅读更多...
Dockerfile（5） - CMD 指令详解

Dockerfile（5） - CMD 指令详解

CMD 指定容器默认执行的命令 # exec 形式&#xff0c;推荐 CMD ["executable","param1","param2"] CMD ["可执行命令", "参数1", "参数2"...]# 作为ENTRYPOINT的默认参数 CMD ["param1","param…
阅读更多...
VUE3自定义文章排行榜的简单界面

VUE3自定义文章排行榜的简单界面

文章目录 一、代码展示二、代码解读三、结果展示 一、代码展示 <template><div class"article-ranking"><div class"header"><h2 class"title">{{ title }}</h2></div><div class"ranking-list&qu…
阅读更多...
根据A（String）字段去重，并且选择B(Ingter)字段最大的值

根据A（String）字段去重，并且选择B(Ingter)字段最大的值

数据格式&#xff1a; [SkillDTO(Job电线工, rankGrade高级工, r4), SkillDTO(Job监察员, rankGrade技师, r5), SkillDTO(Job监察员, rankGrade高级工, r4), SkillDTO(skillJob监察员, rankGrade中级工, r3)] List<SkillDTO> resultList SkillDTOList.stream().coll…
阅读更多...
电子技术——PN结电流关系方程

电子技术——PN结电流关系方程

电子技术——PN结电流关系方程 平衡状态下的PN结 平衡状态下的PN结界面总共有两种电流&#xff0c;一种为 扩散电流 另一种为 漂移电流 。两种电流形成的平衡区域称为 耗散区 。 在平衡状态扩散电流等于漂移电流&#xff0c;此时静电流为0&#xff0c;PN结外部没有电流&…
阅读更多...
Java SPI:Service Provider Interface

Java SPI:Service Provider Interface

SPI机制简介 SPI&#xff08;Service Provider Interface&#xff09;&#xff0c;是从JDK6开始引入的&#xff0c;一种基于ClassLoader来发现并加载服务的机制。 一个标准的SPI&#xff0c;由3个组件构成&#xff0c;分别是&#xff1a; Service&#xff1a;是一个公开的接口…
阅读更多...
Java ElasticSearch面试题

Java ElasticSearch面试题

Java ElasticSearch面试题 前言1、ElasticSearch是什么&#xff1f;2. 说说你们公司ES的集群架构&#xff0c;索引数据大小&#xff0c;分片有多少 &#xff1f;3. ES的倒排索引是什么&#xff1f;4. ES是如何实现 master 选举的?5. 描述一下 ES索引文档的过程&#xff1a;6、…
阅读更多...
Centos系统（Linux）挂载硬盘/数据盘详细操作和开机自动挂载的两种方式

Centos系统（Linux）挂载硬盘/数据盘详细操作和开机自动挂载的两种方式

前提&#xff1a;已经做好磁盘阵列&#xff0c;将磁盘划分好 磁盘初始化操作步骤&#xff08;如果已经可以正常挂载可跳过)&#xff1a; 使用fdisk -l命令查看多出来的大容量的磁盘名称&#xff08;如果多块磁盘&#xff0c;查看需要挂载的磁盘名称&#xff09;&#xff0c;一…
阅读更多...
embedding的原理和结构

embedding的原理和结构

embedding(向量化)是一个将数据转化为向量矩阵的过程&#xff0c;作用是&#xff1a;将高维稀疏向量转化为稠密向量&#xff0c;从而方便下游模型处理 简单的概念大家应该都知道了&#xff0c;以LLM为例 输入&#xff1a;文字 模型&#xff1a;embedding 输出&#xff1a;向量…
阅读更多...
c++高精度乘法的原理及c++代码讲解

c++高精度乘法的原理及c++代码讲解

高精度乘法的原理主要是利用数学中乘法的基本原理&#xff0c;将大整数拆分成各个位数的相乘&#xff0c;然后累加得到最终结果。其过程如下&#xff1a; 将两个大整数相乘&#xff0c;从低位开始逐位相乘&#xff0c;得到部分乘积&#xff1b;将每一位的部分乘积相加&#xf…
阅读更多...
【Emgu CV教程】7.8、图像锐化(增强)之同态滤波

【Emgu CV教程】7.8、图像锐化(增强)之同态滤波

文章目录 一、同态滤波大体原理二、代码三、效果举例 一、同态滤波大体原理 之前介绍的几个锐化、增强方法&#xff0c;包括更早之前介绍的图像模糊方法&#xff0c;都是基于空间域进行处理&#xff0c;也就是直接对目标点周边像素值进行各种数学运算。而这篇文章提到的同态滤…
阅读更多...
学习计算机的好处

学习计算机的好处

之前写了那么多计算机知识&#xff0c;却没有一篇写我学计算机的初衷。 掌握计算机技术不仅可以提高我们的就业能力和竞争力&#xff0c;同时有助于我们更好地认识世界&#xff0c;提高工作效率和解决问题的能力&#xff0c;更好地利用科技创造更美好的未来。 因此&#xff0c…
阅读更多...
pyvisa库实现仪器控制

pyvisa库实现仪器控制

python控制仪器实现自动化常用pyvisa库&#xff0c;基本控制可大致分为创建仪器控制对象、写入控制指令、读取仪表信息和查询仪表状态&#xff0c;下面进行基本的讲解。 pyvisa库创建仪表控制对象 import tkinter.messagebox import pyvisaclass InstrumentControl:inst Non…
阅读更多...
喜迎乔迁，开启新章 ▏易我科技新办公区乔迁庆典隆重举行

喜迎乔迁，开启新章 ▏易我科技新办公区乔迁庆典隆重举行

2024年1月18日&#xff0c;易我科技新办公区乔迁庆典在热烈而喜庆的氛围中隆重举行。新办公区的投入使用&#xff0c;标志着易我科技将以崭新姿态迈向新的发展阶段。 ▲ 易我科技新办公区 随着公司业务的不断发展和壮大&#xff0c;为了更好地适应公司发展的需要&#xff0c;…
阅读更多...
2024-02-29（Flink）

2024-02-29（Flink）

1.Flink原理&#xff08;角色分工&#xff09; 2.Flink执行流程 on yarn版&#xff1a; 3.相关概念 1&#xff09;DataFlow&#xff1a;Flink程序在执行的时候会被映射成一个数据流模型&#xff1b; 2&#xff09;Operator&#xff1a;数据流模型中的每一个操作被称作Operat…
阅读更多...
Spring Boot 高级实践探索：深度解读与实战演练

Spring Boot 高级实践探索：深度解读与实战演练

随着开发者对Spring Boot框架的基础运用日渐娴熟&#xff0c;迈向更深层次的技术探究和应用场景拓展显得尤为重要。本文将带领读者深入研究Spring Boot的若干核心进阶特性&#xff0c;并结合实际项目案例&#xff0c;涵盖自动化测试策略的深化应用、高级配置管理机制的巧妙运用…
阅读更多...
Redis 之四：Redis 事务和乐观锁

Redis 之四：Redis 事务和乐观锁

事务特点 Redis 事务可以一次执行多个命令&#xff0c; 并且带有以下三个重要的保证&#xff1a; 批量操作在发送 EXEC 命令前被放入队列缓存。 收到 EXEC 命令后进入事务执行&#xff0c;事务中任意命令执行失败&#xff0c;其余的命令依然被执行。不具备原子性。 在事务执…
阅读更多...
通讯录——C语言实现

通讯录——C语言实现

头文件Contact.h #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<string.h> #include<stdlib.h> #pragma once #define MAX 100 #define MAX_NAME 20 #define MAX_SEX 5 #define MAX_TELE 12 #define MAX_ADDR 30//表示一个人的信息 //struct…
阅读更多...
npm使用国内淘宝镜像的方法整理

npm使用国内淘宝镜像的方法整理

命令配置安装&#xff1a; 淘宝镜像&#xff1a; npm config set registry https://registry.npm.taobao.org/ 官方镜像&#xff1a; npm config set registry https://registry.npmjs.org 通过cnpm安装&#xff1a; npm install -g cnpm --registryhttps://registry.npm.…
阅读更多...
PTA L2-003 月饼 （附坑点说明）

PTA L2-003 月饼 （附坑点说明）

月饼是中国人在中秋佳节时吃的一种传统食品&#xff0c;不同地区有许多不同风味的月饼。现给定所有种类月饼的库存量、总售价、以及市场的最大需求量&#xff0c;请你计算可以获得的最大收益是多少。 注意&#xff1a;销售时允许取出一部分库存。样例给出的情形是这样的&#…
阅读更多...
最新文章

Copyright @ 2022~2023