JS 开发的秘密武器：几个鲜为人知的实用技巧

在瞬息万变的 JavaScript 世界中，掌握一些鲜为人知的技巧至关重要。从数字美化为简化函数调用，这些实用技巧将提升您的开发能力，让您的代码更优雅、更有效。

技巧 1：数字分隔符的优雅

处理大数字时，一个简洁的小技巧可以极大地提高代码的可读性：数字分隔符。在数字中使用下划线分隔符（_）可使数字更易于理解。

例如：
使用前：

const hugeNumber = 12345678901234567890;

使用后：

const hugeNumber = 123_456_789_012_345_67890;

此技巧不仅适用于十进制，还可用于其他进制：

const binaryNumber = 0b1111_0011_1100_1001_1001;
const octalNumber = 0o777_555_333_111;
const hexadecimalNumber = 0x7b_ea_5e_3f;

注意事项： 分隔符不能出现在数字的第一位。

技巧 2：对象属性的简洁获取

从对象中获取属性的传统方式是使用点号或方括号表示法。然而，还有一种简洁高效的方法：使用可选链操作符 (?.)。

该操作符允许您安全地访问嵌套属性，即使该属性不存在也不会引发错误。例如：

const user = {
  name: 'John Doe',
  address: {
    street: '123 Main St',
  },
};

// 传统方式（可能引发错误）
console.log(user.address.city); // undefined

// 可选链操作符（安全且不会引发错误）
console.log(user.address?.city); // undefined (不输出错误)

技巧 3：函数调用的便捷方式

调用函数时，经常需要传入多个参数。如果您不想使用冗长的参数列表，可以使用展开运算符 (...) 将参数展开为数组。

例如：

function sum(a, b, c) {
  return a + b + c;
}

// 传统方式
const result1 = sum(1, 2, 3);

// 展开运算符
const numbers = [1, 2, 3];
const result2 = sum(...numbers);

技巧 4：避免重复代码的函数柯里化

当您需要创建执行部分任务的函数，但又不想重复相同的代码时，函数柯里化非常有用。

柯里化涉及将一个函数分解为多个较小的函数，其中每个函数接受一部分参数。这使您能够创建通用函数，稍后可通过提供剩余参数进行定制。

例如：

// 未柯里化的函数
const add = (a, b) => a + b;

// 柯里化函数
const add = a => b => a + b;

// 使用柯里化函数
const add5 = add(5);
const result = add5(10);

技巧 5：使用箭头函数实现简洁的事件监听器

箭头函数为事件监听器提供了简洁而优雅的语法。与传统函数相比，它们无需显式返回语句，且自动绑定 this 上下文。

例如：

// 传统函数
document.addEventListener('click', function() {
  // ...
});

// 箭头函数
document.addEventListener('click', () => {
  // ...
});

技巧 6：使用箭头函数优化数组方法

箭头函数还可简化数组方法，如 map()、filter() 和 reduce()。由于箭头函数隐式返回，因此无需使用大括号。

例如：

// 传统函数
const numbers = [1, 2, 3].map(function(num) {
  return num * 2;
});

// 箭头函数
const numbers = [1, 2, 3].map(num => num * 2);

技巧 7：解构赋值简化对象操作

解构赋值使您能够从对象中提取并存储特定属性。这比传统的方法更简洁、更优雅。

例如：

// 传统方式
const user = {
  name: 'John Doe',
  email: 'john.doe@example.com',
};

const name = user.name;
const email = user.email;

// 解构赋值
const { name, email } = user;

技巧 8：模板字符串实现动态文本

模板字符串（使用反引号 ``` `）使您能够创建动态字符串，其中嵌入变量和表达式。这比使用字符串连接运算符 (+) 更强大且更简洁。

例如：

// 字符串连接
const greeting = 'Hello, ' + name + '!';

// 模板字符串
const greeting = `Hello, ${name}!`;

技巧 9：使用 Set 实现快速查找

Set 是一个内置的数据结构，可存储唯一值。与数组不同，Set 不会包含重复项，并且提供快速查找和添加操作。

例如：

const uniqueNumbers = new Set([1, 2, 3, 4, 4, 5]); // 只包含唯一值

console.log(uniqueNumbers.has(3)); // true
console.log(uniqueNumbers.add(6)); // 添加新值

技巧 10：使用 Map 实现键值对存储

Map 是另一个内置的数据结构，可存储键值对。与对象类似，Map 允许您使用键来检索值，但 Map 具有更强大的特性，如可存储任何类型的值和接受非字符串键。

例如：

const userMap = new Map();

userMap.set('name', 'John Doe');
userMap.set('age', 30);
userMap.set('city', 'New York');

console.log(userMap.get('name')); // John Doe
console.log(userMap.has('age')); // true