10个超实用JavaScript技巧：让你的代码更简洁、更优雅
JavaScript 是前端开发的核心。用好它，能让你的代码更简洁，运行更快，维护起来也更轻松。
今天，我们不谈那些复杂的概念，就说说十个非常实用的小技巧。这些技巧能立刻用在你的项目里。
1. 用逻辑运算符简化条件判断
写代码时，我们经常需要根据条件给变量赋值。很多人会写很长的 if...else 语句。其实有更简单的办法。
看看这段代码：
let username;
if (name) {
username = name;
} else {
username = '匿名用户';
}你可以用逻辑或运算符 || 来简化它：
let username = name || '匿名用户';如果 name 为真（比如有值），username 就等于 name。如果 name 为假（比如是 null、undefined 或空字符串），username 就等于默认用户。一行代码就搞定了。
逻辑与运算符 && 也很有用。它可以用来做条件执行：
// 传统的if写法
if (isLoggedIn) {
fetchUserData();
}
// 使用&&的简洁写法
isLoggedIn && fetchUserData();只有当 isLoggedIn 为真时，才会执行 fetchUserData() 函数。
2. 使用模板字符串拼接内容
以前拼接字符串要用加号 +，很麻烦，还容易出错：
let greeting = '你好，' + name + '！今天是' + day + '。';现在有了模板字符串，一切都变简单了。用反引号（`）包裹字符串，变量用 ${} 包起来就行：
let greeting = `你好，${name}！今天是${day}。`;这样写更清晰，也更不容易出错。模板字符串还支持多行文本，不用再写 \n 了。
3. 解构赋值：快速提取数据
从对象或数组里拿数据，你还在用点号或方括号一个个取吗？试试解构赋值。
从对象里解构：
const user = { name: '小明', age: 25, city: '北京' };
// 老方法
const name = user.name;
const age = user.age;
// 解构赋值
const { name, age } = user;
console.log(name); // 小明
console.log(age); // 25你可以只取需要的属性，还可以给变量换名字：
const { name: userName, city = '上海' } = user; // 如果user里没有city，就用默认值'上海'从数组里解构：
const numbers = [1, 2, 3, 4];
const [first, second] = numbers;
console.log(first); // 1
console.log(second); // 2交换两个变量的值，用解构赋值特别方便：
let a = 1, b = 2;
[a, b] = [b, a]; // 现在 a=2, b=14. 展开运算符 ... 的妙用
展开运算符是三个点 ...。它能把数组“展开”，或者把对象的属性“展开”。
合并数组：
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]这比用 concat() 方法更直观。
复制数组或对象：
在 JavaScript 里，直接赋值是浅拷贝，修改新变量会影响原数据。用展开运算符可以快速创建一个浅拷贝：
const originalArray = [1, 2, 3];
const copyArray = [...originalArray]; // 这是一个新的数组
const originalObj = { a: 1 };
const copyObj = { ...originalObj }; // 这是一个新的对象注意：这只是浅拷贝。如果数组或对象里嵌套了其他对象，那么嵌套的部分还是引用关系。
函数传参：
可以把一个数组“展开”成独立的参数传给函数：
const numbers = [10, 5, 8];
Math.max(...numbers); // 相当于 Math.max(10, 5, 8)5. 可选链 ?.：安全地访问深层属性
你想访问一个深层嵌套的属性，比如 user.address.street。但如果 user 或者 address 是 null 或 undefined，代码就会报错。
传统的安全写法很啰嗦：
let street;
if (user && user.address) {
street = user.address.street;
}可选链操作符 ?. 能让你安全地访问：
const street = user?.address?.street;如果 user 或 address 是 null 或 undefined，表达式会立刻停止，返回 undefined，而不会报错。
它还可以和安全调用函数一起用：
const result = someObject.someMethod?.(); // 如果someMethod存在才调用6. 空值合并 ??：提供更合理的默认值
我们之前用 || 来设置默认值。但 || 有个问题：它会把所有“假值”（比如 0、'' 空字符串、false）都当成无效的，而有时这些值是有意义的。
空值合并运算符 ?? 只会在左边的值是 null 或 undefined 时，才返回右边的默认值：
let count = 0;
let displayCount = count || '未设置'; // displayCount 会是 '未设置'，因为0是假值
let displayCount2 = count ?? '未设置'; // displayCount2 会是 0，这才是我们想要的7. 使用 Array.includes() 进行多条件判断
检查一个变量是否等于多个值中的一个，你可能会这样写：
if (fruit === 'apple' || fruit === 'orange' || fruit === 'banana') {
// ...
}用 Array.includes() 可以让代码更整洁：
const validFruits = ['apple', 'orange', 'banana'];
if (validFruits.includes(fruit)) {
// ...
}如果要判断的条件很多，这种写法的优势就更明显了。而且，你可以把 validFruits 数组定义在别处，方便统一管理。
8. 简化对象属性赋值
当变量名和要创建的对象属性名一样时，可以省略键值对的写法：
const name = '小红';
const age = 30;
// 传统写法
const user = {
name: name,
age: age
};
// 简写写法
const user = {
name,
age
};定义对象方法也可以简写：
// 传统写法
const obj = {
sayHello: function() {
console.log('Hello');
}
};
// 简写写法
const obj = {
sayHello() {
console.log('Hello');
}
};9. 使用 Array.find() 和 Array.findIndex() 查找元素
在数组里找一个符合条件的元素，以前常用 for 循环。现在有更直接的方法。
Array.find() 返回第一个满足条件的元素本身：
const users = [
{id: 1, name: '张三'},
{id: 2, name: '李四'},
{id: 3, name: '王五'}
];
const user = users.find(u => u.id === 2);
console.log(user); // {id: 2, name: '李四'}Array.findIndex() 返回第一个满足条件的元素的索引：
const index = users.findIndex(u => u.id === 2);
console.log(index); // 1如果没找到，find() 返回 undefined，findIndex() 返回 -1。
10. 用 Set 给数组去重
给数组去掉重复项是一个常见需求。自己写循环当然可以，但用 Set 对象最简单。Set 是一种新的数据结构，它里面的值都是唯一的。
const duplicateNumbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(duplicateNumbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]步骤很简单：
new Set(array) 把数组转成一个 Set，自动去重。
[...set] 用展开运算符再把 Set 转回数组。
对于简单数据类型（数字、字符串）的去重，这个方法非常高效。对于对象数组，则需要根据具体属性进行判断。
这些技巧都不难理解。关键是要在写代码的时候想起来用。
下次当你又要写一个长长的 if 判断，或者为拼接字符串发愁时，不妨先停下来想想：“有没有更简单的写法？”多练习几次，它们就会变成你的习惯。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
