23 个超实用 JS 技巧 _JS

文章插图
带有多个条件的 if 语句把多个值放在一个数组中，然后调用数组的 includes 方法。
// bad
if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") {
//logic
}
// better
if (["abc", "def", "ghi", "jkl"].includes(x)) {
//logic
}
使用条件表达式简化 if true...else// bad
let test: boolean;
if (x > 100) {
test = true;
} else {
test = false;
}
// better
let test = x > 10 ? true : false;
//或者这样
let test = x > 10;
console.log(test);
假值(undefined、null、0、false、NaN、空字符串)检查当我们创建了新变量，有时候想要检查引用的变量是不是null 或 undefined或空字符串等假值。JAVAScript 确实有一个很好的快捷方式来实现这种检查-逻辑或操作符(||)
||会在左侧操作数为假值时返回右侧操作数
只有当左侧为:

空字符串: ''或``
NaN
0
null
undefined
false

逻辑或操作符(||) 会返回有右侧的值
// bad
if (test1 !== null || test1 !== undefined || test1 !== "") {
let test2 = test1;
}
// better
let test2 = test1 || "";
// bad
if (test1 === true) or if (test1 !== "") or if (test1 !== null)
// better
if (test1){
// do some
}else{
// do other
}

注意：如果 test1 有值，将执行 if 之后的逻辑，这个操作符主要用于 null,undefinded,空字符串检查。

使用空值合并操作符-??只有当左侧为

null
undefined

【23 个超实用 JS 技巧】空值合并操作符(??) 会返回右侧的值
const baz = 0 ?? 42;
console.log(baz);
// expected output: 0
注意:与逻辑或操作符(||)不同，||会在左侧操作数为假值时返回右侧操作数
只有当左侧为:

空字符串: ''或``
NaN
0
null
undefined

逻辑或操作符(||) 会返回有右侧的值
var a = "" || 1;
// 输出 1
console.log(a);
null 检查和默认赋值let test1 = null;
let test2 = test1 ?? "";
console.log("null check", test2); // 输出空字符串 ""
undefined 检查和默认赋值const test = undefined ?? "default";
console.log(test);
// expected output: "default"
比较后返回// bad
let test;
function checkReturn() {
if (!(test === undefined)) {
return test;
} else {
return callMe("test");
}
}
// better
function checkReturn() {
return test ?? callMe("test");
}
使用可选链操作符-?.?. 也叫链判断运算符。它允许开发人员读取深度嵌套在对象链中的属性值，而不必验证每个引用。当引用为空时，表达式停止计算并返回 undefined
const travelPlans = {
destination: "DC",
monday: {
location: "National Mall",
budget: 200,
},
};
// bad
const res =
travelPlans &&
travelPlans.tuesday &&
travelPlans.tuesday.location &&
travelPlans.tuesday.location.href;
// better
// 输出 undefined
const res1 = travelPlans?.tuesday?.location?.href;
用于多个条件判断的 && 操作符如果只在变量为 true 时才调用函数，可以使用 && 操作符。
// bad
if (test1) {
callMethod();
}
// better
test1 && callMethod();
当你在 React 中想要有条件地渲染某个组件时，这个与 (&&)短路写法比较有用。例如：
<div> {this.state.isLoading && <Loading />} </div>
switch 简化我们可以将条件保存在键值对象中，并根据条件来调用它们。
// bad
switch (data) {
case 1:
test1();
break;
case 2:
test2();
break;
case 3:
test();
break;
// And so on...
}
// better
var data = https://www.isolves.com/it/cxkf/yy/js/2021-09-27/{
1: test1,
2: test2,
3: test,
};
// 如果type 在 data中存在，则执行对应的函数
data[type] && data[type]();
默认参数值// bad
function add(test1, test2) {
if (test1 === undefined) test1 = 1;
if (test2 === undefined) test2 = 2;
return test1 + test2;
}
// better