优化JavaScript条件判断的7个实用技巧
本文介绍优化JavaScript条件语句的七个技巧，包括使用否定逻辑简化判断、利用Array.includes检查多值、通过every和some处理集合匹配，以及采用早期返回避免深层嵌套。结合解构、可选链和空值合并等现代特性，帮助开发者编写更简洁、易维护的代码。
引言
介绍
如果你和我一样追求代码的整洁，那么你会尽量在项目中减少条件语句的使用。通常情况下，面向对象编程（OOP）允许我们利用继承和多态来替代复杂的条件逻辑，我认为应当尽可能遵循这一原则。
正如我在另一篇文章《JavaScript 整洁代码的最佳实践》中提到的，代码不仅仅是给机器执行的，更是给“未来的自己”和其他开发者阅读的。
然而，由于各种原因，代码中可能仍然不可避免地存在条件语句。可能是修复 Bug 的时间紧迫，或者移除条件语句会对现有代码库造成过大改动。本文将针对这些问题提供解决方案，并帮助你更好地组织和管理条件逻辑。
技巧
以下是关于如何构建 if...else 语句，以及如何用更少的代码实现更多功能的技巧。阅读愉快！
优化条件判断的7个技巧
1. 要事第一。小细节，但很重要
避免使用否定条件式（这容易让人困惑），同时利用条件简写来表示布尔值。这一点无需多言，尤其是否定条件，因为它不符合正常的思维逻辑。
不好的：
const isEmailNotVerified = (email) => {
// 实现
}
if (!isEmailNotVerified(email)) {
// 做一些事...
}
if (isVerified === true) {
// 做一些事...
}
好的：
const isEmailVerified = (email) => {
// 实现
}
if (isEmailVerified(email)) {
// 做一些事...
}
if (isVerified) {
// 做一些事...
}
理清上述基础后，我们就可以开始深入探讨。
2. 对于多个条件，使用 Array.includes
假设我们想要在函数中检查汽车模型是否为 renault 或 peugeot。代码可能如下所示：
const checkCarModel = (model) => {
if(model === 'renault' || model === 'peugeot') {
console.log('model valid');
}
}
checkCarModel('renault'); // 输出 'model valid'
虽然只有两个模型时这样写似乎可以接受，但如果需要检查更多模型，增加更多的 or 语句会让代码变得难以维护且不够整洁。为了使其更简洁，我们可以重写函数：
const checkCarModel = (model) => {
if(['peugeot', 'renault'].includes(model)) {
console.log('model valid');
}
}
checkCarModel('renault'); // 输出 'model valid'
上面的代码看起来已经相当美观。为了进一步优化，我们可以创建一个变量来存储汽车模型列表：
const checkCarModel = (model) => {
const models = ['peugeot', 'renault'];
if(models.includes(model)) {
console.log('model valid');
}
}
checkCarModel('renault'); // 输出 'model valid'
现在，如果需要检查更多模型，只需向数组中添加新元素即可。此外，如果该列表很重要，我们还可以将 models 变量定义在函数作用域之外，并在需要的地方复用。这种方式让我们能够集中管理，使维护变得轻而易举，因为只需更改代码中的一个位置。
3. 匹配所有条件，使用 Array.every 或者 Array.find
在本例中，我们想要检查每个汽车模型是否都等于传入函数的值。为了以更命令式的方式实现，我们会这样做：
const cars = [
{ model: 'renault', year: 1956 },
{ model: 'peugeot', year: 1968 },
{ model: 'ford', year: 1977 }
];
const checkEveryModel = (model) => {
let isValid = true;
for (let car of cars) {
if (!isValid) {
break;
}
isValid = car.model === model;
}
return isValid;
}
console.log(checkEveryModel('renault')); // 输出 false
如果你更喜欢命令式风格，上面的代码或许还不错。另一方面，如果你不关心底层实现细节，可以重写上述函数并使用 Array.every 或者 Array.find 来达到相同的结果。
const checkEveryModel = (model) => {
return cars.every(car => car.model === model);
}
console.log(checkEveryModel('renault')); // 输出 false
通过使用 Array.find 并做轻微调整，我们可以达到相同的结果。两者的表现是一致的，因为两个函数都为数组中的每一个元素执行了回调，并且在找到一个 falsy 项时立即返回 false。
const checkEveryModel = (model) => {
return cars.find(car => car.model !== model) === undefined;
}
console.log(checkEveryModel('renault')); // 输出 false
4. 匹配部分条件，使用 Array.some
Array.every 用于匹配所有条件，而 Array.some 则可以轻松地检查我们的数组是否包含某一个或某几个元素。为此，我们需要提供一个回调并基于条件返回一个布尔值。
我们可以通过编写一个类似的 for...loop 语句来实现相同的结果，就像之前写的一样。但幸运的是，有非常酷的 JavaScript 函数可以来帮助我们完成这件事。
const cars = [
{ model: 'renault', year: 1956 },
{ model: 'peugeot', year: 1968 },
{ model: 'ford', year: 1977 }
];
const checkForAnyModel = (model) => {
return cars.some(car => car.model === model);
}
console.log(checkForAnyModel('renault')); // 输出 true
5. 提前返回而不是使用 if...else 分支
当我还是学生的时候，就有人教过我：一个函数应该只有一个返回语句，并且只从一个地方返回。如果细心处理，这个方法倒也还好。我这么说也就意味着，我们应该意识到它在某些情况下可能会引起条件式嵌套地狱。如果不受控制，多个分支和 if...else 嵌套将会让我们感到很痛苦。
另一方面，如果代码库很大且包含很多行代码，位于深层的一个返回语句可能会带来问题。现在我们都实行关注点分离和 SOLID 原则，因此，代码行过多这种情况挺罕见的。
举例来解释这个问题。假设我们想要显示所给车辆的模型和生产年份：
const checkModel = (car) => {
let result; // 首先，定义一个 result 变量
// 检查是否有车
if(car) {
// 检查是否有车的模型
if (car.model) {
// 检查是否有车的年份
if(car.year) {
result = `Car model: ${car.model}; Manufacturing year: ${car.year};`;
} else {
result = 'No car year';
}
} else {
result = 'No car model'
}
} else {
result = 'No car';
}
return result; // 我们的单独的返回语句
}
console.log(checkModel()); // 输出 'No car'
console.log(checkModel({ year: 1988 })); // 输出 'No car model'
console.log(checkModel({ model: 'ford' })); // 输出 'No car year'
console.log(checkModel({ model: 'ford', year: 1988 })); // 输出 'Car model: ford; Manufacturing year: 1988;'
正如你所看到的，即使本例的问题很简单，上面的代码也实在太长了。可以想象一下，如果我们有更加复杂的逻辑会发生什么事。大量的 if...else 语句。
我们可以重构上面的函数，分解成多个步骤并稍做改善。例如，使用三元操作符，包括 && 条件式等。不过，这里我直接跳到最后，向你展示借助现代 JavaScript 特性和多个返回语句，代码可以有多简洁。
const checkModel = ({model, year} = {}) => {
if(!model && !year) return 'No car';
if(!model) return 'No car model';
if(!year) return 'No car year';
// 这里可以任意操作模型或年份
// 确保它们存在
// 无需更多检查
// doSomething(model);
// doSomethingElse(year);
return `Car model: ${model}; Manufacturing year: ${year};`;
}
console.log(checkModel()); // 输出 'No car'
console.log(checkModel({ year: 1988 })); // 输出 'No car model'
console.log(checkModel({ model: 'ford' })); // 输出 'No car year'
console.log(checkModel({ model: 'ford', year: 1988 })); // 输出 'Car model: ford; Manufacturing year: 1988;'
在重构版本中，我们包含了解构和默认参数。默认参数确保我们在传入 undefined 时有可用于解构的值。注意，如果传入 null ，函数将会抛出错误。这也是之前那个方法的优点所在，因为那个方法在传入 null 的时候会输出 'No car'。
对象解构确保函数只取所需。例如，如果我们在给定车辆对象中包含额外属性，则该属性在我们的函数中是无法获取的。
根据偏好，开发者会选择其中一种方式。实践中，编写的代码通常介于两者之间。很多人觉得 if...else 语句更容易理解，并且有助于他们更为轻松地遵循程序流程。
6. 使用索引或者映射，而不是 switch 语句
假设我们想要基于给定的国家获取汽车模型。
const getCarsByState = (state) => {
switch (state) {
case 'usa':
return ['Ford', 'Dodge'];
case 'france':
return ['Renault', 'Peugeot'];
case 'italy':
return ['Fiat'];
default:
return [];
}
}
console.log(getCarsByState()); // 输出 []
console.log(getCarsByState('usa')); // 输出 ['Ford', 'Dodge']
console.log(getCarsByState('italy')); // 输出 ['Fiat']
上诉代码可以重构，完全去除 switch 语句。
const cars = new Map()
.set('usa', ['Ford', 'Dodge'])
.set('france', ['Renault', 'Peugeot'])
.set('italy', ['Fiat']);
const getCarsByState = (state) => {
return cars.get(state) || [];
}
console.log(getCarsByState()); // 输出 []
console.log(getCarsByState('usa')); //输出 ['Ford', 'Dodge']
console.log(getCarsByState('italy')); // 输出 ['Fiat']
或者，我们还可以为包含可用汽车列表的每个国家创建一个类，并在需要的时候使用。不过这个就是题外话了，本文的主题是关于条件句的。更恰当的修改是使用对象字面量。
const carState = {
usa: ['Ford', 'Dodge'],
france: ['Renault', 'Peugeot'],
italy: ['Fiat']
};
const getCarsByState = (state) => {
return carState[state] || [];
}
console.log(getCarsByState()); // 输出 []
console.log(getCarsByState('usa')); // 输出 ['Ford', 'Dodge']
console.log(getCarsByState('france')); // 输出 ['Renault', 'Peugeot']
7. 使用自判断链接和空合并
到了这一小节，我终于可以说“最后”了。在我看来，这两个功能对于 JavaScript 语言来说是非常有用的。作为一个来自 C# 世界的人，可以说我经常使用它们。
在写这篇文章的时候，这些还没有得到完全的支持。因此，对于以这种方式编写的代码，你需要使用 Babel 进行编译。你可以在自判断链接这里以及在空合并这里查阅。
自判断链接允许我们在没有显式检查中间节点是否存在的时候处理树形结构，空合并可以确保节点不存在时会有一个默认值，配合自判断链接使用会有不错的效果。
让我们用一些例子来支撑上面的结论。一开始，我们还是用以前的老方法：
const car = {
model: 'Fiesta',
manufacturer: {
name: 'Ford',
address: {
street: 'Some Street Name',
number: '5555',
state: 'USA'
}
}
}
// 获取汽车模型
const model = car && car.model || 'default model';
// 获取厂商地址
const street = car && car.manufacturer && car.manufacturer.address && car.manufacturer.address.street || 'default street';
// 请求一个不存在的属性
const phoneNumber = car && car.manufacturer && car.manufacturer.address && car.manufacturer.phoneNumber;
console.log(model) // 输出 'Fiesta'
console.log(street) // 输出 'Some Street Name'
console.log(phoneNumber) // 输出 undefined
因此，如果我们想要知道厂商是否来自 USA 并将结果打印，那么代码是这样的：
const checkCarManufacturerState = () => {
if(car && car.manufacturer && car.manufacturer.address && car.manufacturer.address.state === 'USA') {
console.log('Is from USA');
}
}
checkCarManufacturerState() // 输出 'Is from USA'
我无需再赘述如果对象结构更加复杂的话，代码会多么混乱了。许多库，例如 lodash，有自己的函数作为替代方案。不过这不是我们想要的，我们想要的是在原生 js 中也能做同样的事。我们来看一下新的方法：
// 获取汽车模型
const model = car?.model ?? 'default model';
// 获取厂商地址
const street = car?.manufacturer?.address?.street ?? 'default street';
// 检查汽车厂商是否来自 USA
const checkCarManufacturerState = () => {
if(car?.manufacturer?.address?.state === 'USA') {
console.log('Is from USA');
}
}
这看起来更加漂亮和简洁，对我来说，非常符合逻辑。如果你想知道为什么应该使用 ?? 而不是 || ，只需想一想什么值可以当做 true 或者 false，你将可能有意想不到的输出。
顺便说句题外话。自判断链接同样支持 DOM API，这非常酷，意味着你可以这么做：
const value = document.querySelector('input#user-name')?.value;
总结
结论
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38