カメリアの記事

意味があることやないことを綴ります

トップ > JavaScript

配列か連想配列か、いや、両方だ！

JavaScript

下のような何かがあったとします。これは配列でしょうか、連想配列でしょうか。

let something = [0]

確かめてみましょう。下のようになりました。

console.log(typeof something)            // object
console.log(something instanceof Array)  // true
console.log(something instanceof Object) // true
console.log(Array.isArray(something))    // true

これは配列であると同時に連想配列である、ということになるのではないでしょうか。そもそも Array は Object 系列の存在のようです。下のようになります。

console.log(Array instanceof Object) // true
console.log(Object instanceof Array) // false

つまり「連想配列であり配列ではない」＝「 Object であり Array ではない」ことを確かめるには下のような二つの条件のチェックが必要になるようです。

if (something instanceof Object && !(something instanceof Array)) {
  console.log("object")
}

なんか面倒ですね。もうちょっとすっきりした書き方はないんでしょうか。合ってもよさそうなんですが、必死になってググるのも面倒なので僕はこのくらいで納得しておくことにします。

配列・連想配列を与えるとテーブルを返す JavaScript のライブラリ maketable.js

JavaScript

配列・連想配列を与えるとテーブルを返す JavaScript のライブラリです。

第 2 引数の thead は省略可能です。ここにはフォームがありませんがテーブルに与える id と class を引数に与えることができます。詳細は GitHub のページを参照してください。

JavaScript で配列に見える文字列を配列にする

JavaScript

結論から言うと JSON.parse( 配列に見える文字列 ) です。でも時間が合ったら僕の講釈に付き合ってください。

さて、下のようなものがあったとします。配列に見えますがテキストエリアに書いてあるだけだと文字列です。 JavaScript の中に書いてあると配列なんですが。

これを配列にするのにどうしたらいいでしょう。下のようにすることもできます。え、できるからってなんでもいいわけじゃねぇよ。何が言いたかったかというと split() じゃダメってことです。

`["a", "b", "c"]`
.slice(1, -1)
.split(", ")
.map(rly => rly.slice(1, -1))

僕は思い付きました。 Array を作るなら Array でしょ！

Array.from(`["a", "b", "c"]`)

さて、配列はできるでしょうか。結果は下のとおり。全部バラバラです。ぜんぜんダメ。

['[', '"', 'a', '"', ',', ' ', '"', 'b', '"', ',', ' ', '"', 'c', '"', ']']

そして最終的に気付いたわけです。下のようにします。知ってた。知ってたけどね。

JSON.parse(`["a", "b", "c"]`)

JavaScript で配列・連想配列を比較するライブラリ

JavaScript

2 つの配列・連想配列を比較する JavaScript のライブラリです。 GitHub で配布しています。

github.com

JavaScript の .childNodes と .children の違い

JavaScript

「何を言ってやがる、違わねぇよ！
　おまえは NodeList で、オレは HTMLCollection だ！
　そこになんの違いもありゃしねぇだろうが！」

というわけでどう違うのかって話なんですが、僕はよく分かっていません。分かっていることといえば .childNodes はタグの内側の文字列も扱うという点でしょうか。下のようにすると分かります。

<body>
  <p id="p">abcde</p>
</body>
<script>
  let p = document.querySelector("#p")
  console.log(p.childNodes) // 戻り値 : NodeList [text]
  console.log(p.children) // 戻り値 : HTMLCollection []
</script>

.childNodes が length = 1 の配列でまだ何か含んでいるのに対して、 .children は length = 0 の配列でこれ以上奥に HTML 要素がないことを示しています。ここでさらに下のようにしてみます。

<body>
  <p id="p">abcde</p>
</body>
<script>
  let p = document.querySelector("#p")
  console.log(p.childNodes[0].textContent) // 戻り値 : abcd
</script>

なんか難しい話になると、きっと処理速度が .children のほうが 1ns 速いとかそんなことになるんじゃないかと想像しているんですが、どうなんでしょうね。