一行代码实现 if 判断, 多结果判断

JavaScript 中判断运算是最常见的运算之一, 最常规的当然就是 if
但最常用, 最灵活的却另有其"人"

与运算符

利用了与运算符的特性, 第一项为 false 时, 不执行后面直接返回第一项结果

用法: statement1 && statement2
注意: statement1 需要 return 一个布尔值, 否则会认为 undefined

//  完整 demo 在文末
console.log(_true && true_fun());
// 执行 true_fun()
// 返回 true_fun() 的执行结果

console.log(_false && true_fun());
// 不执行 true_fun()
// 返回 _false

console.log(true_fun() && false_fun());
// 执行 true_fun() 后执行 false_fun()
// 返回 false_fun() 的执行结果

console.log(false_fun() && true_fun());
// 执行 false_fun()
// 不执行 true_fun()
// 返回 false_fun() 的执行结果

条件运算符

条件运算符又叫三元表达式, 三元运算符,
条件运算符的语法很直白, 判断 condition
condition 为 true 执行 statement1
condition 为 false 执行 statement2
用法: condition ? statement1 : statement2

//  完整 demo 在文末
console.log(_true ? true_fun() : false_fun());
// 执行 true_fun()
// 返回 true_fun() 的执行结果

console.log(_false ? true_fun() : false_fun());
// 执行 false_fun()
// 返回 false_fun() 的执行结果

利用匿名数组实现多结果判断

无论 if_else, &&, ?_: 都是出入一个布尔值, 返回两个预期结果中的一个
当遇到多给预期结果时, 就会用到 switch_case, 或者用多层 if_else 嵌套来实现

虽然功能能正确执行, 但是代码量比较大, 可读性比较差
这里有个相对轻量级的, 可以实现多结果判断的方法

都知道一个数组, 通过 [] 传入一个合法下标, 即可得到对应的项的内容
利用数组的这个功能, 就可以实现多结果判断

用法: [statement1, statement2, statement3 …][condition]
注意:

• condition 传入的不是布尔值, 而是目标项的下标值
• 把匿名数组改成具名数组, 可以实现复用

//  完整 demo 在文末
var condition = 0
console.log([statement1_fun, statement2_fun, statement3_fun][condition]())
// 返回 statement1_fun 方法本身
// 返回结果后, 用 () 实现执行方法

console.log(["男", "女", "未知"][condition])

condition = 1
console.log([statement1_fun, statement2_fun, statement3_fun][condition]())
console.log(["男", "女", "未知"][condition])
condition = 2
console.log([statement1_fun, statement2_fun, statement3_fun][condition]())
console.log(["男", "女", "未知"][condition])
// 与前例同理

利用匿名对象实现多结果判断

这个方法其实就是 “利用匿名数组实现多结果判断” 的拓展
数组变成对象, 传入下标变成传入属性名

利用对象属性名的多样性, 实现更复杂的判断需求
相对的, 代码复杂度会提高, 可读性变差, 失去了"一行代码"的简捷

用法: { statement1: “statement1”, statement2: “statement2”, statement3: “statement3” … }[condition]
注意: 如果你觉得写出来的代码难以阅读, 说明你遇到的需求并不适合使用这个方法

var condition = "a"
console.log({ a: "a", b: "b", c: "c" }[condition])
// 代码变得复杂了, 不利于阅读, 可能你最后会觉得 switch_case 或 多层 if_else 反而更好用

完整 Demo

单独执行一个 step 更容易理解

function true_fun() {
	console.log("true")
	return 1
}

function false_fun() {
	console.log("false")
	return 0
}

function statement1_fun() {
	console.log("statement1_fun")
	return "statement1_fun"
}

function statement2_fun() {
	console.log("statement2_fun")
	return "statement2_fun"
}

function statement3_fun() {
	console.log("statement3_fun")
	return "statement3_fun"
}

var _true = 1;
var _false = 0;

function step1() {

	console.log(_true && true_fun());
	// 执行 true_fun()
	// 返回 true_fun() 的执行结果

	console.log(_false && true_fun());
	// 不执行 true_fun()
	// 返回 _false

	console.log(true_fun() && _true);
	// 执行 true_fun()
	// 返回 _true

	console.log(true_fun() && false_fun());
	// 执行 true_fun() 后执行 false_fun()
	// 返回 false_fun() 的执行结果

	console.log(false_fun() && true_fun());
	// 执行 false_fun()
	// 不执行 true_fun()
	// 返回 false_fun() 的执行结果

};

function step2() {
	console.log(_true ? true_fun() : false_fun());
	// 执行 true_fun()
	// 返回 true_fun() 的执行结果

	console.log(_false ? true_fun() : false_fun());
	// 执行 false_fun()
	// 返回 false_fun() 的执行结果
};

function step3() {
	var condition = 0
	console.log([statement1_fun, statement2_fun, statement3_fun][condition]())
	// 返回 statement1_fun 方法本身
	// 返回结果后, 用 () 实现执行方法

	console.log(["男", "女", "未知"][condition])

	condition = 1
	console.log([statement1_fun, statement2_fun, statement3_fun][condition]())
	console.log(["男", "女", "未知"][condition])
	condition = 2
	console.log([statement1_fun, statement2_fun, statement3_fun][condition]())
	console.log(["男", "女", "未知"][condition])
	// 与前例同理
}

function step4() {
	var condition = "a"
	console.log({
		a: "a",
		b: "b",
		c: "c"
	}[condition])
	// 代码变得复杂了, 不利于阅读, 可能你最后会觉得 switch_case 或 多层 if_else 反而更好用
}
step1()
step2()
step3()
step4()

end