javaScript小技巧

🔥 10个让你写出更优雅JavaScript代码的小技巧

嘿，程序员朋友们！👋

不管你是JavaScript新手，还是已经在各种框架里游刃有余的老手，回过头来打磨一下原生JS的基本功总是没错的。

今天分享10个简单但超实用的JavaScript小技巧，每个都有现成的代码示例，拿来就能用！
一起来看看吧！🧠💻

✅ 1. map() vs forEach() — 别再搞混了

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

// map() 会返回一个全新的数组
const doubled = numbers.map(num => num * 2);   

// forEach() 只是遍历，不返回新数组
const result = [];
numbers.forEach(num => result.push(num * 2));

console.log(doubled);  // [2, 4, 6, 8]
console.log(result);   // [2, 4, 6, 8]

💡 记住：想要新数组就用 map()，只是想做点什么事情（比如打印日志）就用 forEach()。

✅ 2. 可选链 — 再也不怕程序崩溃

const user = {
  name: 'John',
  address: {
    city: 'Beijing'
  }
};

console.log(user?.address?.city);     // 'Beijing'
console.log(user?.contact?.email);    // undefined (不会报错！)

💡 记住：用 ?. 可以安全地访问嵌套属性，即使中间某个属性不存在也不会让程序崩溃。

✅ 3. 空值合并 vs 逻辑或 — 细节很重要

const count = 0;

const result1 = count || 10;    // 10 ❌ (把0当成了假值)
const result2 = count ?? 10;    // 0 ✅ (只有null/undefined才用默认值)

console.log(result1); // 10
console.log(result2); // 0

💡 记住：当你想保留0、false、""这些"假值"时，用 ?? 而不是 ||。

✅ 4. 解构赋值 — 让代码更简洁

const person = {
  name: "Alice",
  age: 28,
  location: "Shanghai"
};

// 直接提取需要的属性
const { name, age } = person;

console.log(name); // Alice
console.log(age);  // 28

💡 记住：解构让你的代码看起来更清爽，特别是处理API返回的数据时。

✅ 5. 循环里的setTimeout — var和let的区别

// 错误示例：全部输出3
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000); // 3 3 3 ❌
}

// 正确示例：输出0 1 2
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000); // 0 1 2 ✅
}

💡 记住：在有异步操作的循环里用 let，因为 var 是函数作用域，let 是块作用域。

✅ 6. 字符串转数字的快捷方式

const str = "42";

console.log(+str);          // 42 (最简洁)
console.log(Number(str));   // 42 (最清晰)
console.log(parseInt(str)); // 42 (处理整数)

💡 记住：+ 号是最快的转换方式，但 Number() 更容易理解。

✅ 7. 复制对象不踩坑

const original = { name: "Dev", age: 25 };
const copy = { ...original };  // 创建副本

copy.name = "Code";

console.log(original.name); // Dev (原对象没变)
console.log(copy.name);     // Code

💡 记住：用 { ...obj } 创建浅拷贝，避免意外修改原对象。

✅ 8. 数组过滤很简单

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

const evenNumbers = numbers.filter(n => n % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]

💡 记住：filter() 返回符合条件的新数组，不会改变原数组。

✅ 9. 检查对象是否为空

const obj = {};

const isEmpty = Object.keys(obj).length === 0;

console.log(isEmpty); // true

💡 记住：这招在验证表单数据、API响应时特别有用。

✅ 10. 函数默认参数 — 告别繁琐检查

function greet(name = "朋友") {
  return `你好，${name}！`;
}

console.log(greet());        // 你好，朋友！
console.log(greet("小明")); // 你好，小明！

💡 记住：默认参数让你的函数更健壮，不用写一堆 if 判断。

总结

这些小技巧看起来简单，但在实际开发中能让你的代码更优雅、更可靠。不管是做前端页面还是后端服务，掌握这些基础技能都能让你事半功倍。

你还有什么好用的JavaScript技巧吗？欢迎在评论区分享，或者转发给你的程序员朋友们！🚀