JavaScript 作为前端开发的核心语言，其灵活性和强大的功能深受开发者喜爱。但有时候，我们可能会写出冗长且重复的代码。今天，就来分享一些实用的 JavaScript 简写技巧，让你的代码更简洁、更高效！
1. 三元运算符：简化 if...else
传统的 if...else 语句有时显得过于繁琐。三元运算符 condition ? exprIfTrue : exprIfFalse 可以让你一行代码搞定条件判断：
// 传统写法
let age = 20;
let status;
if (age >= 18) {
status = '成年';
} else {
status = '未成年';
}
// 简写
let age = 20;
let status = age >= 18 ? '成年' : '未成年';
2. 短路求值：优雅处理默认值
利用 || (或) 和 && (与) 的短路特性，可以简化默认值设置和条件判断：
// 传统写法
let name;
if (userName) {
name = userName;
} else {
name = 'Guest';
}
// 简写
let name = userName || 'Guest'; // 如果 userName 为假值，则使用 'Guest'
let isLogin = user && user.isLogin; // 如果 user 存在且 user.isLogin 为真，则 isLogin 为 true
3. 模板字符串：告别字符串拼接
使用反引号 ` 包裹字符串，并用 `${}` 插入变量，让字符串拼接更加直观：
// 传统写法
let name = 'Alice';
let greeting = 'Hello, ' + name + '!';
// 简写
let name = 'Alice';
let greeting = `Hello, ${name}!`;
4. 解构赋值：快速提取对象和数组的值
解构赋值可以让你从对象或数组中提取值并赋给变量，代码更简洁：
// 传统写法
let person = { name: 'Bob', age: 30 };
let name = person.name;
let age = person.age;
// 简写
let person = { name: 'Bob', age: 30 };
let { name, age } = person;
// 数组解构
let colors = ['red', 'green', 'blue'];
let [first, second, third] = colors;
5. 展开运算符：复制和合并数组/对象
展开运算符 ... 可以复制数组/对象，也可以合并多个数组/对象：
// 复制数组
let arr1 = [1, 2, 3];
let arr2 = [...arr1];
// 合并数组
let arr3 = [4, 5, 6];
let mergedArr = [...arr1, ...arr3];
// 复制对象
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1 };
// 合并对象
let obj3 = { c: 3, d: 4 };
let mergedObj = { ...obj1, ...obj3 };
6. 可选链操作符：避免访问不存在的属性报错
使用 ?. 可以安全地访问嵌套对象的属性，避免因属性不存在而报错：
// 传统写法
let user = { profile: { address: { city: 'New York' } } };
let city;
if (user && user.profile && user.profile.address) {
city = user.profile.address.city;
}
// 简写
let user = { profile: { address: { city: 'New York' } } };
let city = user?.profile?.address?.city; // 如果任何一个属性不存在，则返回 undefined
7. 箭头函数：更简洁的函数定义
箭头函数 () => {} 可以让你更简洁地定义函数，尤其适用于回调函数：
// 传统写法
function add(a, b) {
return a + b;
}
// 简写
const add = (a, b) => a + b;
// 箭头函数作为回调
[1, 2, 3].map(item => item * 2);
8. Array.from()：将类数组转换为数组
Array.from() 可以将类数组对象（如 arguments、NodeList）转换为真正的数组：
function sum() {
let args = Array.from(arguments);
return args.reduce((acc, cur) => acc + cur, 0);
}
9. Array.includes()：检查数组是否包含某个值
Array.includes() 可以快速检查数组是否包含某个值，返回 true 或 false：
let colors = ['red', 'green', 'blue'];
let hasRed = colors.includes('red'); // true
let hasYellow = colors.includes('yellow'); // false
10. 指数运算符：快速计算幂
使用 ** 可以快速计算幂：
// 传统写法
let result = Math.pow(2, 3); // 8
// 简写
let result = 2 ** 3; // 8
总结：
掌握这些 JavaScript 简写技巧，可以让你写出更简洁、更高效、更易读的代码。在实际开发中，灵活运用这些技巧，可以大大提升你的开发效率。
结尾：
希望这篇文章对你有所帮助！如果你有其他 JavaScript 简写技巧，欢迎在评论区分享！
