戻る
オプショナルチェイニング |
オプショナルチェイニング(?.) |
プロパティにアクセスした場合nullやundefinedになりエラーが発生することがあります。
このエラーを発生する代わりにundefinedを返す機能です。
ネストされたオブジェクトのプロパティに安全にアクセスでき
助長な存在チェックコードを削減することを目的としています。
[サンプル]
copy
const num ={
num1:2,
num2:{
plus1:1,
minus1:-1,
},
};
console.log(num.num2?.plus1);//1
console.log(num.num2?.minus1);//-1
console.log(num.num2?.minus3);//undefined
console.log(num.num1 + num.num2?.plus1);//3
console.log(num.num1 + num.num2?.minus1);//1
console.log(num.num1 + num.num3?.plus1);//NAN
クラスオブジェクトをnumと定義してクラスのプロパティを
オプショナルチェイニングを使用して判定をしたサンプルです。
num.num2?.plus1
num2は存在するため、plus1の値を返します。
num.num2?.minus1
num2は存在するため、minus1の値を返します。
num.num2?.minus3
num2は存在しますが、ninus3は存在しないためundefinedを返します。
num.num1 + num.num2?.plus1
num2は存在するため、
num.num1:2
num.num2?.plus1:1
2 + 1 = 3
の値が返ります。
num.num1 + num.num2?.minus1
num2は存在するため、
num.num1:2
num.num2?.minus1:-1
2 + (-1) = 2 - 1 = 1
の値が返ります。
num.num1 + num.num3?.plus1
num3は存在しないためundefinedを返します。
num.num1の値は1ですが、undefinedと計算をすることになるため
NANが返ります。
[サンプル]
copy
const color = {
A: {
c1:"red",
c2:"blue",
},
B: {
c1:"white",
c2:"black",
}
};
function getColor(type,colorNo)
{
return (color[type]?.[colorNo]) ?? (color.A?.[colorNo]) ?? '';
}
console.log(getColor("A", "c2"));//blue
console.log(getColor("B", "c1"));//white
console.log(getColor("C", "c1"));//red
console.log(getColor("D", "c2"));//blue
console.log(getColor("E", "c3"));//empty string
getColor("A", "c2");//blue
color[type]?.[colorNo]
color[A]が存在するため、blueが返ります
getColor("B", "c1");//white
color[type]?.[colorNo]
color[B]が存在するため、whiteが返ります
getColor("C", "c1");//red
color[type]?.[colorNo]
color[C]が存在しないため、左の判定をします
color.A?.[colorNo]
Aの要素には「c1」が存在するため、redを返しています。
getColor("D", "c2");//blue
color[type]?.[colorNo]
color[D]が存在しないため、左の判定をします
color.A?.[colorNo]
Aの要素には「c2」が存在するため、blueを返しています。
getColor("E", "c3");//empty string
color[type]?.[colorNo]
color[E]が存在しないため、左の判定をします
color.A?.[colorNo]
color配列にcolor.Aの「A」が存在しますが、
Aの要素には「c3」が存在しないため、''(empty string)を返しています。
戻る
著作権情報 ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームペーよびアプリ利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。
|