10个JavaScript 简写技巧：提升代码80%效率

1. 短路求值替代条件语句

// 传统写法
let name;
if (username) {
  name = username;
} else {
  name = '匿名用户';
}
// 简写写法
const name = username || '匿名用户';

使用逻辑或运算符设置默认值，当左侧值为假值时，返回右侧的默认值。

2. 模板字符串替代字符串拼接

// 传统写法
const greeting = '你好，' + name + '！欢迎来到' + site + '。';
// 简写写法
const greeting = `你好，${name}！欢迎来到${site}。`;

模板字符串使用反引号包裹，通过${}插入变量或表达式，使字符串拼接更加直观。

3. 解构赋值简化变量声明

// 传统写法
const firstName = person.firstName;
const lastName = person.lastName;
const age = person.age;
// 简写写法
const { firstName, lastName, age } = person;
// 函数参数解构
functiongetUserInfo({ name, age, location }) {
return`${name}今年${age}岁，来自${location}`;
}

解构赋值可以从数组或对象中提取值，并赋值给变量，大大简化了代码。

4. 展开运算符的多种用途

// 数组合并
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
// 对象合并
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 };
// 函数参数
const numbers = [1, 2, 3, 4, 5];
Math.max(...numbers);

展开运算符（...）可以将可迭代对象展开，适用于数组、对象和函数参数等多种场景。

5. 箭头函数简化函数定义

// 传统写法
const multiply = function(a, b) {
return a * b;
};
// 简写写法
const multiply = (a, b) => a * b;
// 数组方法中使用
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);

箭头函数提供了更简洁的函数语法，并且自动绑定this值，特别适合在数组方法中使用。

6. 可选链操作符避免深层判断

// 传统写法
const street = user && user.address && user.address.street;
// 简写写法
const street = user?.address?.street;
// 函数调用也可使用
const result = obj.method?.();

可选链操作符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。

7. 空值合并运算符提供默认值

// 传统写法
const value = input !== null && input !== undefined ? input : 'default';
// 简写写法
const value = input ?? 'default';
// 与可选链结合使用
const name = user?.name ?? '匿名用户';

空值合并运算符（??）是一个逻辑运算符，当左侧的操作数为null或undefined时，返回其右侧操作数，否则返回左侧操作数。

8. 使用 includes 方法简化条件判断

// 传统写法
if (value === 1 || value === 2 || value === 3) {
// ...
}
// 简写写法
if ([1, 2, 3].includes(value)) {
// ...
}

includes()方法用来判断一个数组是否包含一个指定的值，返回true或false，简化多重条件判断。

9. 指数运算符简化幂运算

// 传统写法
const squared = Math.pow(2, 3); // 8
// 简写写法
const squared = 2 ** 3; // 8

指数运算符（**）返回第一个操作数做底数，第二个操作数做指数的乘方结果，语法更加简洁。

10. 对象属性简写

// 传统写法
const name = '张三';
const age = 25;
const person = {
name: name,
age: age,
sayHello: function() {
console.log('你好');
  }
};
// 简写写法
const person = {
  name,
  age,
  sayHello() {
console.log('你好');
  }
};

当对象属性名与变量名相同时，可以省略冒号和值；方法定义也可以省略function关键字。

总结

掌握这些 JavaScript 简写技巧不仅能提高开发效率，还能让代码更加简洁、易读和易于维护。不过需要注意的是，简洁并不总是意味着更好，在某些情况下，为了代码的清晰性，使用更明确的写法可能更合适。

希望这些技巧能帮助你在日常开发中写出更优雅的 JavaScript 代码！