学到就是赚到！来给你的JavaScript技能打打补丁

前言

作为目前如日中天的Web开发语言，JavaScript提供了许多特性和功能。无论你是经验丰富的开发人员还是刚刚入门，总有新的技巧和窍门可以帮助我们写出更高效、更有效的代码。在这篇博文中，我们将探讨 15种JavaScript编码技巧，它们可以帮助编写出更好(骚)的代码。Here we go...

字符串反转

js 复制代码

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

解释: 首先将字符串分割成一个字符数组，然后颠倒字符的顺序，最后将它们重新连接成一个字符串。

数字数组求和

js 复制代码

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

找出数组中的最大值和最小值

js 复制代码

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

数组去重

js 复制代码

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

解释: 使用 ES6 Set 对象中元素唯一的特性，对数组元素进行去重

循环对象

js 复制代码

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

解释: 使用 Object.entries() 方法创建一个包含人物对象键值对的数组。然后使用 for...of 循环遍历数组。

拷贝到粘贴板

js 复制代码

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

获取当前网络在线/离线状态

js 复制代码

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

或者可以通过事件监听

js 复制代码

// addEventListener version
window.addEventListener("online", (event) => {
  console.log("You are now connected to the network.");
});

// ononline version
window.ononline = (event) => {
  console.log("You are now connected to the network.");
};

移除 Falsy 值

js 复制代码

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

解释: 布尔值作为回调函数传给了 filter()。Boolean()函数是 JavaScript 中的一个内置函数，对于真值返回 true，对于假值返回 false。通过传递 Boolean 作为回调函数，filter() 将删除数组 arr 中的所有虚假值，并返回一个只有真实值的新数组 filteredArr。

"拍平"数组

js 复制代码

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

解释: multiDimensionalArray 是一个包含两个嵌套数组的二维数组，通过调用深度为 2 的 flat() 方法，所有子数组元素都被连接成一个单一的扁平数组。由此产生的 flatenedArray 包含了原始多维数组在一个维度上的所有元素。

访问DOM元素中的自定义属性

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

html 复制代码

<div id="myDiv" data-name="Zhang San" data-age="21"></div>

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

js 复制代码

const myDiv = document.getElementById('myDiv');  
const name = myDiv.dataset.name;  
const age = myDiv.dataset.age;  
  
console.log(name); // "Zhang San"  
console.log(age); // "21"

解释: myDiv.dataset 返回一个对象，其中包含 div 元素上所有自定义数据属性的值。因此我们可以使用特定数据属性的名称作为数据集对象的属性来访问该属性。

基于可迭代对象创建数组

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

js 复制代码

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

解构数组

解构赋值可以从数组或对象中提取值，并以更简洁、更易读的方式将其赋值给变量的一种方法。例如，请看下面的数组：

js 复制代码

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

我们可以使用解构赋值来提取特定值，而不是使用索引符号来访问每个元素：

js 复制代码

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

解构对象

方法同上。我们可以对一个对象进行解构。

js 复制代码

const person = {  
    name: 'xxxxx',  
    age: 25,  
    email: 'xxxxx@91porn.com'  
};  
  
const {name, age, email} = person;  
console.log(name); // 'xxxxx'  
console.log(age); // 25  
console.log(email); // 'xxxxx@91porn.com'

Promise.all()

Promise.all() 允许并行执行多个Promise。它将一个 Promise 数组作为输入，并在所有输入的 Promise 都已 resolve 时返回一个新的数组，结果和顺序与入参一致。

js 复制代码

const promise1 = fetch('https://api.example.com/data1');  
const promise2 = fetch('https://api.example.com/data2');  
  
Promise.all([promise1, promise2])  
.then(responses => {  
    // handle responses from both requests here  
    const response1 = responses[0];  
    const response2 = responses[1];  
    // do something with the responses  
})  
.catch(error => {  
    // handle errors from either request here  
    console.error(error);  
});

监听右击事件

要在 JavaScript 中检测右键单击事件，可以监听用户右键单击元素时触发的 contextmenu 事件。下面是一个示例代码段，当用户右键单击文档时，该代码段会将一条信息记录到控制台：

js 复制代码

document.addEventListener('contextmenu', (event) => { 
    // 阻止原始行为，即弹出菜单
    event.preventDefault(); 
    console.log('Right-click detected!');  
});

在这段代码中，我们使用 addEventListener 方法为文档对象添加了一个 contextmenu 事件监听器。事件触发后，回调函数将被执行，我们将通过调用事件对象上的 preventDefault() 方法来阻止默认上下文菜单的显示。最后，我们会在控制台中记录一条消息，说明已检测到右键单击事件。

在 JavaScript 中检测右键单击事件的常用案例是创建自定义的上下文菜单。例如我们可以禁用浏览器的默认上下文菜单，而创建自定义的菜单。

结语

以上都是一些我们在日常开发中经常使用的代码片段，虽然目前已经有很多第三方工具包实现了这些功能，但是我们还是需要秉持着刨根问底的原则，只要底层实现的原理和思路，这样我们才能有所收益。