分享15个实用的JavaScript技巧

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

1. 反转字符串

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

ini 复制代码

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

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

2. 数组求和

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

typescript 复制代码

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

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

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

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

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对象和展开运算符来轻松实现：

ini 复制代码

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

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

5. 遍历对象

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

javascript 复制代码

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中将文本复制到剪贴板变得非常简单：

arduino 复制代码

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

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

7. 检测在线/离线状态

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

arduino 复制代码

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

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

8. 去除假值

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

ini 复制代码

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()方法创建一个新数组，将所有子数组元素递归连接到指定深度：

ini 复制代码

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属性：

bash 复制代码

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

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

ini 复制代码

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

vbnet 复制代码

// 将字符串转换为数组
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. 数组解构

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

ini 复制代码

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

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

arduino 复制代码

const [first, second, , fourth] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(fourth); // 4

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

13. 对象解构

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

arduino 复制代码

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都解决时解决。

ini 复制代码

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事件，这个事件在用户右键点击元素时触发。以下是一个示例代码段，当用户右键点击文档时，将消息记录到控制台：

javascript 复制代码

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

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

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