15 个实用的 JavaScript 技巧

在今天这篇文章中，我们将分享 15 个实用的 JavaScript 技能。我们希望它们能够帮助您提高开发效率。

10年积累的网站设计制作、成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有冷水滩免费网站建设让你可以放心的选择与我们合作。

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 循环迭代该数组，将键值对解构为变量 sum key, value，最后使用模板文字 将它们输出到控制台。

6.复制到剪贴板

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

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

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

7. 检测在线/离线状态

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

if (navigator.onLine) {
   console.log('User online');
} else {
   console.log('User offline');
}

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

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。通过传递布尔值作为回调函数，filter()将从数组中删除所有假值，并返回一个仅包含真值的新数组filteredArr。

9. 扩展数组

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

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

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

10. 访问自定义属性

在 HTML 中，数据属性提供了一种在元素中存储附加数据的方法。要在 JavaScript 中访问这些数据属性，您可以使用元素的数据集属性：

要访问 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 中的内置方法，它从可迭代或类似数组的对象创建新数组：

//Convert string to array
const str = "Rabi";
const arr = Array.from(str);
console.log(arr); // Output: ["R", "a", "b", "i"]


// Convert Set to array
const set = new Set([1, 2, 3, 3, 4, 5]);
const arr = Array.from(set);
console.log(arr); // Output: [1, 2, 3, 4, 5]

此方法可用于将不同的数据结构（例如字符串、集合和映射）转换为数组。

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

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

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'

在此示例中，我们使用花括号来创建与对象形状匹配的模式。变量名称（姓名、年龄和电子邮件）与对象的属性名称匹配，因此提取相应的值并将其分配给这些变量。

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 => {
     // Handle the responses to both requests here
     const response1 = responses[0];
     const response2 = responses[1];
     // operate on the response
   })
   .catch(error => {
     // Handle any requested errors
     console.error(error);
   });

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

15.检测鼠标右键事件

要检测鼠标右键单击事件，您可以侦听 contextmenu 当用户右键单击某个元素时触发的事件。下面是一个示例代码片段，当用户右键单击文档时，它将向控制台记录一条消息：

document.addEventListener('contextmenu', (event) => {
   event.preventDefault(); // Prevent the default context menu from appearing
   console.log('Right click event detected!');
});

在此示例中，我们使用 addEventListener 方法将上下文菜单添加事件侦听器到文档对象。

当事件触发时，回调函数被执行，我们通过调用对象的方法 event PreventDefault() 来阻止显示默认上下文菜单，然后将一条消息记录到控制台，指示检测到右键单击事件。

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

文章标题：15 个实用的 JavaScript 技巧
本文路径：http://www.36103.cn/qtweb/news3/36903.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联