フロントエンド面接クエスチョンバンク（面接に必要）オススメ度：★★★★★
実際には、変数に値を割り当てる必要がある場合、データ ソースが制御できない場合は、通常、そのデータ ソースにデフォルト値を設定します (空のオブジェクト モードと同様)。JavaScript には、関数パラメーターのデフォルト値、割り当てのデフォルト値の構造化など、このようなデフォルト値の設定をサポートする構文が多数あります。ただし、この記事では主に、手動割り当て時の 3 つのデフォルト値設定方法について説明します。
- 次のような条件判断を使用してデフォルト値を設定します。
let result = input || {} - 次のような空の判定演算子を使用します。
let result = input ?? {} typeof次のように、判定タイプと組み合わせてデフォルト値を設定します。let result = typeof(input) !== 'undefined' ? input : {}
|| 演算子
この形式は主に 演算子のBoolean() 型変換と || 短絡特性を利用しており、三項演算子 ( ?:) や If-else ステートメントに書き換えることもできますが、ブール型変換によって制限され、すべての false 値は未代入とみなされます。
// 当 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 ||= {};
?? オペレーター
すべての false 値は無視されるため 、TC39 は、左側のオペランドが or である 場合に右側の式のみを評価する 演算子を || ES2020提案で提案しています 。多くの場合、オプションの連鎖演算子と組み合わせて使用されます 。??nullundefined?.
// 当 input 为：undefined、null 时会被忽略
let input;
// 即 result 值不会为：undefined、null；可以是：''、0、NaN、false
let result;
result = input ?? {};
// 若只涉及一个变量，还可简写
obj ??= {};
演算子の種類
入力が である場合にのみ、入力が無効であると見なされるシナリオもあります undefined 。 null つまり、入力は有効な入力であると見なされます。typeof このとき、演算子を 使用して入力の型を区別するかどうかを判断できます undefined 。入力変数が宣言されていることが明らかな場合は、変数を undefined 比較して等しいかどうかを判断できます。
// 当 input 为：undefined 时会被忽略
let input;
// 即 result 值不会为：undefined；可以是：null、''、0、NaN、false
let result;
result = (typeof(input) !== 'undefined') ? input : {};
// 变体：直接和 undefined 判断，需注意若input未声明会报错
result = (input !== undefined) ? input : {};
要約する
オブジェクト指向プログラミングのプロセスでは、ほとんどのシーン変数がオブジェクトを参照しますが、この場合、 ?? その連携は ?. 現代のプログラミング言語の記述方法に沿ったものとなり、公式にも推奨されています。
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;
}フロントエンド面接クエスチョンバンク（面接に必要）オススメ度：★★★★★