[JavaScript知识库]JavaScript 代码技巧合集 （2021-08-17）

代码技巧

多表达式多if判断：
我们可以在数组中存储多个值，并且可以使用数组include方法

// 长
if (x === 'a' || x === 'b' || x === 'c') {
	// logic
}
// 短
if (['a', 'b', 'c'].includes(x)) {
	// logic
}

&& 运算符
如果仅在变量值为 true 的情况下才调用函数，则可以使用 && 运算符。

// 长
if (test) {
	callMehtod();
}
// 短
test && callMethod();

箭头函数

// 长
function add (a, b) {
	return a + b;
}
// 短
const add = (a, b) => a + b;

短函数调用
可以使用三元运算符来实现这些功能。

const fun1 = () => console.log('fun1');
const fun2 = () => console.log('fun2');
// 长
let test = 1;
if (test == 1) {
	fun1();
} else {
	fun2();
}
// 短
(test === 1 ? fun1 : fun2)();

Switch
我们可以将条件保存在键值对象中，并可以根据条件使用。

// 长
switch (data) {
	case 1:
		test1();
		break;
	case 2:
		test2();
		break;
	case 3:
		test3();
		break;
	default:
		break;
}
// 短
const data = {
	1: test1,
	2: test2,
	3: test3
};
data[something] && data[something]();

默认参数值

// 长
function add (test1, test2) {
	if (test1 === undefined) {
		test1 = 1;
	}
	if (test2 === undefined) {
		teste2 = 2;
	}
	return test1 + test2;
}
// 短
const add = (test1 = 1, test2 = 2) => (test1 + test2);

扩展运算符

// 长-合并数组
const data = [1, 2, 3];
const test = [4, 5, 6].concat(data);
// 短-合并数组
const data = [1, 2, 3];
const test = [4, 5, 6, ...data];

// 长-拷贝数组
const test1 = [1, 2, 3];
const test2 = test1.slice()
// 短-拷贝数组
const test1 = [1, 2, 3];
const test2 = [...test1];

模板字符串

// 长
const welcome = 'Hi' + test1 + ' ' + test2 + '.'
// 短
const welcome = `Hi ${test1} ${test2};`

在数组中查找最大值和最小值

const arr = [1, 2, 3];
Math.max(...arr); 3
Math.min(...arr); 1