你从未见过的 10 个令人惊叹的 JavaScript 技巧

全篇大概1500 字（含代码），建议阅读时间15分钟。

JavaScript 是一种广泛使用的编程语言，它的灵活性和功能性使其成为前端和后端开发中不可或缺的工具。今天，将分享 10 个实用的 JavaScript 技巧，这些技巧可以帮助你写出更加简洁、高效的代码。

1. 函数参数中的解构赋值

在函数参数中直接解构对象，是一种减少代码复杂度并提高可读性的方法。

const user = { name: "小那同学", age: 24 }; 
function greet({ name, age }) { 
    console.log(`你好，我叫 ${name}，我今年 ${age} 岁了。`); 
} 
greet(user); // 输出: 你好，我叫 小那同学，我今年 24 岁了。

2. 可选链操作符 (?.)

?. 操作符可以帮助你安全地访问嵌套对象的属性，避免因为访问 undefined 或 null 而报错。

通过 ?.，可以避免手动检查是否为 null 或 undefined。

const user = { profile: { name: "小那同学" } }; 
console.log(user.profile?.name); // 输出: 小那同学 
console.log(user.address?.street); // 输出: undefined

3. 空值合并操作符 (??)

?? 允许你在变量为 null 或 undefined 时，提供一个默认值。与 || 不同，它不会对空字符串或 0 进行误判。

const message = null ?? "默认消息"; 
console.log(message); // 输出: 默认消息

4. 逻辑运算符的短路操作

你可以使用 && 和 || 来简化代码逻辑。逻辑运算符的短路机制是简化条件判断的好方法。

const loggedIn = true; 
const username = loggedIn && "小那同学"; // 如果 loggedIn 为 true，则返回 "小那同学" console.log(username); // 输出: 小那同学

5. 模板字符串

模板字符串让你可以在处理多行文本时更加灵活，避免字符串拼接的复杂性。

const message = `你好，世界！ 
这是新的一行。`; 
console.log(message);

6. 对象字面量中的动态属性名

使用计算属性名动态定义对象属性，使得对象的构造更加灵活。

const prop = "name";
const user = { [prop]: "小那同学", // 动态设置 "name" 属性 }; 
console.log(user); // 输出: { name: '小那同学' }

7. 使用 flat() 扁平化数组

flat() 可以将多层嵌套数组展平成一维数组。该方法非常适合处理嵌套数组结构。

const nestedArray = [1, [2, [3, [4]]]];
const flatArray = nestedArray.flat(2); // 输出: [1, 2, 3, [4]]

8. Array.from() 创建数组

Array.from() 可以将类数组对象或可迭代对象转换为数组，同时可以进行映射操作。

const set = new Set([1, 2, 3]); 
const array = Array.from(set, x => x * 2); // 输出: [2, 4, 6]

9. freeze() 和 seal()

• Object.freeze() 可以冻结对象，防止其属性被修改或添加。
• Object.seal() 允许修改现有属性，但禁止添加新属性。

const obj = { name: "小那同学" };
Object.freeze(obj); 
obj.name = "小那同学IDEA"; // 修改失败 
console.log(obj); // 输出: { name: "Alice" }

10. 带标签的循环

当你需要在嵌套循环中控制哪个循环退出时，标签循环可以帮你简化控制流。标签循环允许你精确控制哪个循环终止。

outerLoop: 
for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) { 
       if (i === 1) break outerLoop; 
       console.log(i, j); 
    } 
}

总结

通过以上这 10 个 JavaScript 技巧，你可以编写出更加简洁、易维护的代码。无论是在处理复杂逻辑还是提高代码效率，掌握这些技巧都将使你在编程时如虎添翼。