JavaScript代码简洁之道：11种常用简写技术解析

JavaScript 凭借其灵活性，为开发者提供了众多简化代码的技巧。熟练掌握这些简写技术，不仅可以提升编码效率，还能优化代码质量，使其更具可读性和优雅性。将深入探讨 11 种常用的 JavaScript 简写技术，并结合实例代码进行演示，帮助您编写更加简洁高效的 JavaScript 代码。

一、三元运算符

三元运算符提供了一种简洁的方式来处理简单的条件语句，将原本需要多行代码的逻辑浓缩为一行。

传统写法：

let isAdmin;
if (user.role === 'admin') {
  isAdmin = true;
} else {
  isAdmin = false;
}

简写：

const isAdmin = user.role === 'admin' ? true : false;

二、对象属性简写

在创建对象时，如果属性名和变量名相同，可以使用简写语法省略属性名。

传统写法：

const name = 'Leandro';
const age = 30;
const person = { name: name, age: age };

简写：

const name = 'Leandro';
const age = 30;
const person = { name, age };

三、默认参数值

通过为函数参数设置默认值，可以避免未传递参数时出现 undefined 的情况，提高代码的健壮性。

传统写法：

function greet(name) {
  name = name || 'Guest';
  return `Hello, ${name}!`;
}

简写：

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}

四、短路评估

利用逻辑运算符的短路特性，可以简化条件判断的逻辑，避免冗余的代码。

传统写法：

const username = getUsernameFromAPI();
const displayName = username ? username : 'Anonymous';

简写：

const username = getUsernameFromAPI();
const displayName = username || 'Anonymous';

五、解构赋值

解构赋值允许从数组或对象中提取值并赋值给独立的变量，提高代码的可读性和简洁性。

传统写法：

const user = { name: 'Alice', age: 25 };
const name = user.name;
const age = user.age;

简写：

const user = { name: 'Alice', age: 25 };
const { name, age } = user;

六、展开运算符

展开运算符可以将数组或对象中的元素展开，方便进行数组合并、复制等操作。

传统写法：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = arr1.concat(arr2);

简写：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = [...arr1, ...arr2];

七、箭头函数

箭头函数提供了一种更简洁的方式来定义函数表达式，尤其适用于短小的回调函数。

传统写法：

function sum(a, b) {
  return a + b;
}

简写：

const sum = (a, b) => a + b;

八、可选链式操作符

可选链式操作符允许在访问对象属性时避免出现 undefined 错误，提高代码的健壮性。

传统写法：

const street = user && user.address && user.address.street;

简写：

const street = user?.address?.street;

九、空值合并运算符

空值合并运算符提供了一种简洁的方式来处理默认值，避免变量为 null 或 undefined 时出现错误。

传统写法：

const name = inputValue !== null && inputValue !== undefined ? inputValue : 'Default';

简写：

const name = inputValue ?? 'Default';

十、模板字符串

模板字符串提供了一种更灵活的方式来拼接字符串，避免使用繁琐的加号运算符。

传统写法：

const name = 'Alice';
const greeting = 'Hello, ' + name + '!';

简写：

const name = 'Alice';
const greeting = `Hello, ${name}!`;

十一、for...of 循环

for...of 循环提供了一种更简洁的方式来遍历数组，避免使用传统的 for 循环。

传统写法：

const numbers = [1, 2, 3];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

简写：

const numbers = [1, 2, 3];
for (const number of numbers) {
  console.log(number);
}