（個人的メモ） JavaScriptで今まで知らなかった手法を個人的にまとめる

オプショナルチェーン　その１　プロパティへのアクセス alert(location?.href); alert(location?.hreeeeeeeee);

オプショナルチェーン（もしくはオプショナルチェイニング）とは、
左辺がnullだったり右辺が存在しない場合にエラー停止するのではなくundefinedを返す。
stanch環境ではテストできない。

詳しくはMozillaのMDNにて。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining

オプショナルチェーン　その２　メソッドへのアクセス window.alert?.("test");

メソッドへのアクセスでも使用可能。

オプショナルチェーン　その３　配列形式でのアクセス alert(location?.["href"]); alert(location?.["hreeeeeeeee"]);

この形式（なんて言うんだっけコレ･･･）でも使用可能。

Null 合体演算子 alert(null ?? 1); alert(undefined ?? 2); alert(0 ?? 3); alert("" ?? 4); alert(false ?? 5);

左辺がnullかundefinedの場合に右のものを返す。
0や空文字の場合は左辺が適用される。
また、右辺が実行されるのは、左辺がnullやundefinedの場合のみ。
stanch環境ではテストできない。

詳しくはMozillaのMDNにて。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

こういう新しい記述をされると少し古くなっただけのブラウザやスマホで見れないサイトが出てくるんだよな･･･
おそらく２０１９年か２０２０年以前のスマホやブラウザだと実行できない。
それによって、YoutubeなどのJavaScriptバリバリのサイトなども動かなくなったりする。
JavaScriptがこんなに癌のような存在になるなんて･･･

「!!」 alert(!!("test"));

対象をブール値に変換する。
ＩＥ６でも実行可能なほど古くから存在する記述法だった。

「in」 alert("href"in location);

メンバが存在するかどうか調べる。
この例だとlocationのメンバとしてhrefがあればtrueを、無ければfalseを返す。
ＩＥ６でも実行可能なほど古くから存在する記述法だった。

void 0 alert(void 0);

undefinedと同じ （ただし極めて特殊な状況下では違う動作をする場合もあるらしい）
ＩＥ６でも実行可能なほど古くから存在する記述法だった。

即時実行関数　その１ alert(function(){return "ZZZ";}());

ある程度知ってはいたんだが･･･なんか記述がキモくて使ってなかった。
だが他人のコードをいじる時には便利だなぁ。

なお、普通に使用する場合におけるメリットは、スコープを狭めて汚染を防ぐというのが主な理由らしい。

即時実行関数　その２　（再利用） alert(function fnc(){return "HHH";}()); alert(fnc());

･･･と思ったがFirefoxだと２つめのfnc()実行時に　fnc is not define　とエラーを吐かれてしまった。
環境によって動作が変わる可能性が高いのでこの記述はやめたほうが良さそう。

「,」（カンマ）　その１ alert( (function(){return location.href}(), !0) );

カンマでつなげると全て実行して最も右側の値を返す。

「,」（カンマ）　その２　記述法の落とし穴 alert( function(){return location.href}(), !0 );

カッコが無いとhttp://～～～が返されてしまう（右側のは実行されずに終わる？）

「,」（カンマ）　その３ function tttest() { return document.getElementsByTagName("body")[0],!0 } alert(tttest());

だが、これだとtrueが表示される。
む、難しいな･･･

オブジェクトのデストラクチャリング（分割代入） var obj = { b : 3, c : 4 }; var a, b, c; ({a, b, c} = obj); alert("a is " + a + "\nb is " + b + "\nc is " + c);

ＩＥ６では実行できないが、ＩＥ６以外ならstanch環境でも実行可能。
これ以外にも初期値を設定したり、配列のデクストラクチャリングなどもあって大変なので以下のサイトで。

JavaScript 分割代入（デストラクチャリング） #JavaScript - Qiita
https://qiita.com/akifo/items/19a4f2823fc99779dffc

MozillaのMDNもある。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring

アロー関数 var obj = { num : 0, fnc : (a, b)=>{ this.num = a * b; }, out : ()=>{ alert(this.num); } }; obj.fnc(3, 4); obj.out();

無名関数の記述を変えたもの。
引数の左のfunctionという記述が無くなり、引数の右にアローが増えた。
ＩＥ６は対応しておらずエラーとなる。

詳しくはMozillaのMDNにて。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

メリットが分からなかったんだけど、無名関数とは明確に動作が異なる場面もあり、そこにメリットがある。
アロー関数内では状況によって関数内でのthisの扱いが変わるみたいだ。

アロー関数が便利な理由と使いどころ #JavaScript - Qiita
https://qiita.com/10mi8o/items/2da84ab650f4caffdeea

arguments変数 function Arguments_Test_Func() { alert(arguments[0]); } Arguments_Test_Func("argu_test");

ＩＥ６ですら使用可能という古くから存在する手法。

こんな風に引数を渡すことも出来たのか～
明示的に変数を書くよりこっちのがいいか？
でも後から見ることを考えると明示的に書いたほうが分かりやすいか。

switch文でcaseを内容含めて一行にする var hensuu; var test_array = ["niti", "getu", "ka", "sui", "moku", "kin", "do", "STANCH!"]; for (i = 0; i < test_array.length; i++) { switch (test_array[i]) { case "niti": hensuu = 111; break; case "getu": hensuu = 222; break; case "ka": hensuu = 333; break; case "sui": hensuu = 444; break; default: hensuu = 99999999; break; case "moku": hensuu = 555; break; case "kin": hensuu = 666; break; case "do": hensuu = 777; break; } alert(hensuu); }

一行にしたら見やすそう。

2025/8/13

コメント一覧

コメントをどうぞ