Front-end interview question bank ( necessary for interview) recommendation: ★★★★★
Address: front-end interview question bank
In practice, when you need to assign a value to a variable, if the data source is uncontrollable, you usually set a default value for it (just like the empty object mode). There are many syntaxes in JavaScript that support setting such default values, such as function parameter default values, destructuring assignment default values, etc. But this article mainly discusses the 3 default value setting methods during manual assignment:
- Use conditional judgment to set the default value, such as:
let result = input || {}
- Use the empty judgment operator, such as:
let result = input ?? {}
- Set the default value in conjunction with
typeof
the judgment type, such as:let result = typeof(input) !== 'undefined' ? input : {}
|| operator
This form mainly utilizes Boolean()
the type conversion and ||
the short-circuit characteristics of the operator, which can also be rewritten into a ternary operator ( ?:
) or an If-else statement; restricted by Boolean type conversion, all false values will be considered unassigned.
// 当 input 为:undefined、null、''、0、NaN、false 时会被忽略
let input;
// 即 result 值不会为:undefined、null、''、0、NaN、false
let result;
result = input || {};
// 变体(1):三目运算符形式
result = input ? input : {};
// 变体(2):If-else 语句
if(input) {
result = input;
} else {
result = {};
}
// 若只涉及一个变量,还可简写
obj ||= {};
?? operator
Since all false values will be ignored, TC39 proposes an operator ||
in the ES2020 proposal that only evaluates the expression on the right when the operand on the left is or . Often used in conjunction with the optional chaining operator .??
null
undefined
?.
// 当 input 为:undefined、null 时会被忽略
let input;
// 即 result 值不会为:undefined、null;可以是:''、0、NaN、false
let result;
result = input ?? {};
// 若只涉及一个变量,还可简写
obj ??= {};
typeof operator
There are also scenarios where the input undefined
is considered invalid only when the input is , null
that is, it is considered a valid input. typeof
At this time , operators can be used to judge whether the input type is undefined
to distinguish; if it is clear that the input variable has been declared, the variable can be undefined
compared to judge whether it is equal.
// 当 input 为:undefined 时会被忽略
let input;
// 即 result 值不会为:undefined;可以是:null、''、0、NaN、false
let result;
result = (typeof(input) !== 'undefined') ? input : {};
// 变体:直接和 undefined 判断,需注意若input未声明会报错
result = (input !== undefined) ? input : {};
Summarize
In the process of object-oriented programming, most scene variables refer to objects. In these cases, ??
the cooperation ?.
will be more in line with the writing method of modern programming languages, and it is also officially recommended.
const EMPTY_WALLET = {
money: 0
}
function consume(user = null, goods = null) {
if (null === (goods?.price ?? null)) {
return false;
}
let wallet = user?.info?.wallet ?? EMPTY_WALLET;
if (wallet.money < goods.price) {
return false;
}
wallet.money -= goods.price;
return true;
}
Front-end interview question bank ( necessary for interview) recommendation: ★★★★★
Address: front-end interview question bank