2021年8月13日金曜日

[JavaScript]Mapを使う(連想配列)

JavaScriptは、ちょっとくらい変な実装をしてもそれっぽく動くことがあります。
コンパイルする形式の言語である、C#やJavaに慣れていると、むずがゆくなることがあります。

ということで、間違えから偶然見つけて、調べてみると普通に連想配列だった話。
JavaScriptでMapを使うには、以下のようにする。そう、何も考える必要はないのです。なぜならば、objectに連想配列の機能が混ぜ込まれているからです。
コードはこんな感じ。
let map ={};
map["aaa"] = "aaa";
console.log(map["aaa"]);
//"aaa"と表示される

//ちなみに↓のようにもアクセスができる
console.log(map.aaa); // aaaと出力される

//メンバ変数のように代入もできる
map.bbb = "bbb"
console.log(map.bbb); // bbbと出力される
JSONをオブジェクト化するとこもこんな感じでやってるんだろうね。
・・・mapというか、属性を動的に増やす。という考え方。 ちなみに、objectなら何でもOK。こんなこともできる。
let list =[1,2,3];
list.bbb = "bbb";
console.log(list.bbb);// bbbと出力される
console.log(list);(3) [1, 2, 3, bbb: "bbb"]と出力される
JavaScript。。。何でもありですね。

[JavaScript]変数宣言の仕方(var let const)

JavaScriptの変数宣言。書き方いろいろある。制限(コーディング規約等)がないならlet使えというのが結論。
理由は、letを使っておけば、動作時に変数宣言の上書きに気が付けるから。です。
あと、定数はconstを使うのが結論。値を書き換えることができないからね。 

 以下、それぞれ組合せでの検証結果。

■varとletの組合せ
var let
var var a="a";
var a="b";
aの値は"b"になる!
var a="a";
let a="b";
実行時エラー
let let a="a";
var a="b";
実行時エラー
let a="a";
let a="b";
実行時エラー

constもletと同じ特性。consutは、値の更新もできない。↓のような場合エラーになる。
const b = "b";
b="B"; //エラー

let c ="c";
c = "C";// こっちはOK。というか普通の使い方。

ちなみに、varの上書きパターンこういうのが正常終了しちゃう。意味の分からない障害が出そう。
var aaa = "aaa";
var aaa = 100;
ということでletがおすすめ。

[JavaScript]Listを使う(動的に要素を増やすことのできる配列)

C#やJavaはクラスライブラリで様々な機能が提供されているけど、JavaScriptで同じようなことをしようとすると、外部のライブラリをインクルードする感じで使うのが一般的かな。と思います。
と、前置きが長くなりましたが、Listを使いたかったのです。
C#でいうと、↓のような感じ。
var list = new List<string>();
で調べてみたら、JavaScriptでは、[](Arrayというクラス)を使う。使い方は以下の通り。
JavaScriptの型については、闇が深そうなので、今日は割愛。
let list = [1,2,3];
//初期値不要なら
//let list = [];
//要素の追加
list.push(4);
console.log(list);
//(4) [1, 2, 3, 4] と表示される
つまるところ、変数に[]を代入すると、そいつは、Listになる。ってことですね。そしてなんでも入れれてしまいます。
let list = [1,2,3];
//要素の追加
list.push("あ");
console.log(list);
//(4) [1, 2, 3, "あ"] と表示される
list.push({name:"hoge"});
console.log(list);
//(5) [1, 2, 3, "あ", {…}] と表示される
genericsがなかったころのjavaを思い出します。。。 ちなみに、pushがあるならpopもあるだろと。そうあるんです。さっきの続き。
list.pop()
//戻り値→{name: "hoge"}
console.log(list);
// (4) [1, 2, 3, "あ"] 最後に突っ込んだ要素がなくなっている。
list.pop()
//戻り値→"あ"
console.log(list);
// (3) [1, 2, 3] その前の要素がなくなっている
スタックがあるならキューもあるだろーと。そうあるんです。さらに続き。
list.shift()
//戻り値→1
console.log(list);
// (2) [2, 3] 先頭の要素がなくなっている
JavaScriptなんでもありっすね。

[JavaScript]confirmやalertをオーバーライドする

sliniumun等を使って、Webサイトの自動操作をすることがあります。んーあんまりないか。
自動操作しない場合でも、デバッグの時は、alertを出し、本番環境では、ログ出力。みたいなことをしたいことがあります。んーあんまりないか。console.log使うもんね。
ということで、強制的にalertやconfirmを何とかする方法ないかな。と思って調べてみると、alertやconfirmを上書き(オーバライド?)する方法がありました。
実装は↓のような感じ。以下は、chromeのconsoleで実行しているけど、htmlに入れれば、そのまま実現できる
window.confirm = (text) => { console.log(text); return true; }
常に「はい」ボタンを押した状態と同じになっちゃいますが、自動運転中に入力不要になりいい感じ。

ちなみに、alertも同じように、window.alert = function(text){}でOK。

で、chromeのconsoleで確認してみると、↓みたいになっている。
//chromeのconsoleで↓を入力
> window.confirm
//こんなのが表示された。edgeでは表示されなかった。。。
ƒ (text) {
    recordedConfirmation = text
    if (document.body.hasAttribute('setConfirm')) {
      document.body.removeAttribute('setConfirm')
      return nextConfirmationResult
    } else {
      l…
よくわからないけど、prompt.jsというソースにたどり着き、中身が見れる。 プラグインがいろいろ入っているからかもしれないけどね。