java keyを配列で表記したい

Question

keyがbai,stime,etime,wari,tc,number,r,has,si,col,monoで各keyに１，２，３，４，５と付け足されています。例えばbai1,bai2,bai3,bai4,bai5
これをarrayに配列としていれたいのですがどうすればいいでしょうか？
let array = [number1, number2, number3, number4, number5 , r1, r2, r3, r4, r5];

        for (let i = 1; i < 6; i++) {　
            let array = [number + (i)];

        }
numberであればいいのでしょうがこれを全てのkeyをarrayに代入したいです。
よろしくお願いします。

fujillin · Accepted Answer

No9です。

＞([...elms].map(e => e.value));のものを調べていたんですが～
.map は配列のメソッドの一つで、順に指定した処理を行った結果を新しい配列にして返すものです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

一方で、要素リストは配列に似ていますが 、直接には .map メソッドが使えないので、一旦、配列化してから適用しています。
その展開をしているのが、[...elms] の部分で、スプレッド構文と言われるもののようです。
（↑名称を知りませんでした）
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

fujillin · Answer

No8です。「使い方」や「文書の構造」,「実行のタイミング（トリガー）」などが一切不明なので、よくわからないままですが、勝手な条件設定と勝手な文書構造で似た感じ（？）のものを作成してみました。条件としては・HTML構造は動的に変化しない・対象はの入力値とする・複数の入力値を1セットとして、保存あるいは読込みを行う文書構造としては・fieldsetをデータの1セットとして、子要素のinputをひとまとめで扱う・データセットの識別子としては、fieldsetのidを利用という設定です。 fieldsetの数、inputの数は1以上であれば、数に関係なく同じスクリプトで対応可能になっています。（多分、この辺りが質問者様にとって苦手な部分かと推測します）ご質問には直接関係のないチェックなども加えてありますので、スクリプトは若干長くなっていますけれど、以下ご参考にでもなれば・・・ ※ 回答文に文字数制限があるため、個々の説明は省略です。 ◆ HTML,CSS部分 Sample

AAAA

BBBB

CCCC

◆ javascript部分 window.addEventListener('DOMContentLoaded', () => { const NoUse = () => {alert('ストレージが使えません')}, NoData = () => {alert('記録データがありません')}, GetElms = f => f.querySelectorAll('input[type="text"]'), Storage = { save : NoUse, load : NoUse }; // ** Storageの機能設定 ** try { const s = window.localStorage; s.setItem('__test__', 'test'); s.removeItem('__test__'); Storage.save = f => { const elms = GetElms(f), key = f.id?f.id:'no_key'; if(elms.length) { const j = JSON.stringify([...elms].map(e => e.value)); s.setItem(key, j); } }; Storage.load = f => { const elms = GetElms(f), key = f.id?f.id:'no_key'; if(elms.length) { const d = JSON.parse(s.getItem(key)); if(d) elms.forEach((e, i) => { e.value = d[i] }); else NoData(); } }; } catch(e){ }; // ** イベント設定 ** document.getElementById('wrapper').addEventListener('click', e => { const t = e.target; if(t.nodeName != 'INPUT' || t.type != 'button') return; const f = t.closest('fieldset'); if(f) e.preventDefault(); else return; if(t.classList.contains('save')) Storage.save(f); else if(t.classList.contains('load')) Storage.load(f); }); });

fujillin · Answer

No7です。

何をどのように使うのかわかっていないので、どこまでを1セットにして扱いたいのか（セットにする必要があるのかも含めて）よくわかりませんけれど、そのあたりは無視してご提示のままとするのなら・・

"baitai"と"stime"は別物として扱いたいのではないのでしょうか？
同じkey（＝'key_name'）で記録してしまったのでは、上書きされてしまうため、何がなんだかわからなくなりますけれど・・？

また、各要素に値を戻すのであれば（各要素に必ずidが付与されているのならば）idもセットに含めて記録しておくことで、読みだした際に「該当するidの要素に値を設定する」という処理だけで済むことになり、
＞document.getElementById("baitai1").value = (arr[0]);
を連記する必要もなくなると思いますけれど・・・
あるいは、記録する時に要素順に記録しているので、設定する際も要素順に設定してゆくようにすれば、処理の上では要素のidも不要にできるでしょう。
（どこかに代表となる識別子は必要でしょうけれど・・）

fujillin · Answer

No6です。

＞やりたい事はローカルストレージに～～idに表記されているものを
＞保存、呼び出し、削除といったボタンで実行したいです。
現状で、どこまでできているのか不明ですが・・

まずは、一つの要素で保存、読み取り、削除はできているのでしょうか？
できているのなら、それを複数処理できるように考えてみてください。
できていないのなら、そこから始めましょう。

複数化するのには、勿論、コピペして変数名を変えてもできますが、数が多くなったら面倒です。
同じ記述を繰り返し利用できるようなループ等の処理でできる方法を考えるのが良いでしょう。
一つだけの処理と複数の処理では考えるうえで隔たりがありますが、コツさえつかめばさほどの事ではありませんし、あとはいくつ増えても同様に処理が可能になると思います。

想像するところ、
<input type="text" id="baitai1" />の値を取得するのに、
　baitai1.value
のような記述方法をなさっているのではないかと推測しますが、No5にも書きましたが、複数を処理する上ではこの辺りの発想の転換が一番の鍵になると思います。

No6に示しましたように、例えば、idがbaitai1~5の要素であるなら
　querySelectorAll('input[id^="baitai"]')
などで、DOMリストを取得することが可能です。
（他にも取得の方法はいろいろあると思います）
更には、上記は「baitai」の部分が直接の記述になっていますが、この部分を変数化しておけば、stimeでもetimeの場合でも、同じ処理を利用することができる様になるといった意味合いのことです。

まぁ、最悪の場合は、最後の手段として、全部ベタ書きで書き並べてしまうという方法も残されてはいます。
記述量が多くなるだけで処理はきちんとできるはずですし、実際には、ほぼコピペ作業を行うだけとも言えますから。

fujillin · Answer

No5です。よくわからないので、勝手に妄想してみただけですが・・・（ですので、以下は当たるも八卦です）例えば、以下のようなHTML要素がある時に、

idがbaitai1~5の要素のvalue値を配列に入れたいってことかもしれないと想像しました。もしもその様なことであれば、要素のリストを取得して値を配列に入れれば「変数名云々」ということを考える必要はなくなります。単純に値だけからなる配列でよければ、 const elms = document.querySelectorAll('input[id^="baitai"]'); const ary = [...elms].map(e => e.value); とすることで、変数aryに値の配列を取得できます。仮に、それぞれの入力値が 'A', 'B', 'C', 'D', 'E' だったとするなら、結果は　['A', 'B', 'C', 'D', 'E'] となります。もしも {要素id: 要素value} 形式からなる配列を得たいのなら、同様に const elms = document.querySelectorAll('input[id^="baitai"]'); const ary = [...elms].map(e => Object.fromEntries([[e.id, e.value]])); などとしておくことで、以下のような配列を得ることができます。 [{baitai1: 'A'},{baitai2: 'B'},{baitai3: 'C'},{baitai4: 'D'},{baitai5: 'E'}] ※ 後者の場合は、単一オブジェクトにしてしまった方が扱いやすい気がしますが、ご質問が「配列」となっていましたので・・

fujillin · Answer

No3です。

＞(中身はbai文字,stime時間,etime時間,wari数字,tc数字,
＞number数字,r数字,has数字,si数字,col数字,mono数字)
No4様と同じような疑問を持ちながら回答しているので、質問者様がいったい何を意図しているのかよくわかっていません。
No3の回答は、冒頭にお断りしてあるように、あくまでも'number1', 'number2'・・・のような「文字列」を配列にする場合の例です。

あるいは、numberという名の変数の値が数値、stimeという名の変数の値が時間・・・というような意味でしょうか？
その値を配列にしたいってことなのかなぁ・・・？
であるなら、変数を参照するのを簡略化する方法はありません。
（すでにNo2様の回答にある通りです）

まぁ、グローバル変数なら window['変数名'] みたいな方法でも参照はできますけれど、あまり勧められる方法ではありませんし、そもそもグローバル変数としてそんなものをたくさん作成しておくこと自体も疑問です。
変数が number1, number2 ・・・ number5 のようにあって、一律の処理を行いたいのであれば、初めから number を配列として定義しておくのが一般的な解決方法ではないでしょうか。
その他の「r」や「has」等も同様なら、まとめて2次元配列にしたり、オブジェクトにしておくなども考えられます。

一方で、
＞<input type="text" id="baitai1"/>のように全て”text”としており、
DOM要素の直接の値は文字列ですけれど、それを型変換して変数に代入してるってことでしょうか？
それともそのまま使っているのでしょうか？
もしもそのままなら、お礼に書かれた「時間」,「数字」などは人間にとっての意味だけであって、スクリプトでの扱いでは全て「文字列」になります。

勝手に雰囲気から想像するところ、上記のHTMLの例で言えば、idが baitai1, baitai2 ・・・のような同じ扱いの要素が複数あって、それをストレージにいれたいということのような気もしてきました。
ストレージ上のデータの扱いは基本的に「key：value」形式になっていますけれど、その際の key は id と一致しているのでしょうか？
もしそうであるなら、DOM上の要素リストを取得して、個々の要素に対して「要素id: 要素value」を key:value として扱うようにすれば、ループで処理できますのでご質問のような手間も不要になるのではないかと思います。

あるいは、ご提示の例ではJSON化している雰囲気もありますが、一つのkey内にJSON化した文字列でまとめて保存しようという意図なのでしょうか？
実際に何をなさりたくて、全体でどうなっているのかがよくわからないので、何とも言えないのですが・・・

なお、余談にではありますが、雰囲気的にDOM要素のidをそのまま変数名として使っていらっしゃるのではないかと勝手に推測しましたけれど、idをそのまま変数名として使用する場合に、うまくいかないケースがあったと記憶しています。
（具体例がすぐに思いつかないので省略しますが、予約語との関係だったかなぁ・・）
　getElementById('id')　　や
　form.elements[’id名称’]
などのような指定方法の方が、若干記述量は増えますが安全で確実と言えます。
とは言え、同種類の扱いのものが複数あるのなら、個別に処理を行わずに上でも述べたようにループで処理することを考える方が効率的と思います。
ちなみに、上のような要素の指定方法を用いれば、idは文字列（＝変数名ではなく）として扱えますので、ループ内で1,2・・を付け加えるようなことも可能です。

＞＞ cametan_42 様
趣味で勉強中の身ですので、あまり詳しいことは存じません。
SymbolやMapなどが追加されたことは存じていますが、実際の内容については、まだまったく理解していない状態です。

cametan_42 · Answer

ああ、JavaScriptに関しては #3 のfujillin さんが出てくればもう安心だよ(笑)。
fujillinさんはJavaScriptハッカーなんで、彼が書くコードが理解できるようになれば万々歳だ。彼のコードに良く学ぼう。最新仕様にキチンと準じた「正しい」JSコードを教えてくれる筈だ。

でもまぁ取り敢えず、だな。

> bai,stime,etime,wari,tc,number,r,has,si,col,monoという文字列に

これは文字列なのかどうか、コッチ側からは分からんのよね。
文字列は大方のプログラミング言語だと、

"bai,stime,etime,wari,tc,number,r,has,si,col,mono"

と表記する、って約束事がある(全部が全部そうじゃないけど)。
貴方のように

> bai,stime,etime,wari,tc,number,r,has,si,col,monoという文字列に

と書けば、一体何を表してるか分からんのだ。baiみたいに個別に文字列、って言いたいのか、あるいは"bai,stime,etime,wari,tc,number,r,has,si,col,mono"と言う長い文字列を表してるのか。
仮に"bai,stime,etime,wari,tc,number,r,has,si,col,mono"と言う長い文字列を表してるのなら、 #3 のfujillin さんのやってる通りにすべきだと思う。それが一番簡単な書き方、だからだ。

でも怪しいのは、

> すみません。勉強中で立派なことが書けません。

だからなぁ。ホントに「文字列」を意図してるかどうか分からん。

仮に、マジに「変数名」を何とかしたい、ってぇのなら#2でも書いたけど「それは無理だ」って話になる。

>> fujillin さん

調べてみたらES2015以降だと「Symbol型」ってのがJSには出てきたみたいですが、それは「変数名にはならない」って考えて良いんですよね?

fujillin · Answer

こんにちは

＞bai,stime,etime,wari,tc,number,r,has,si,col,monoという文字列に
＞number1,number2,number3,number4,number5のように出したいです。

文字列の配列として
　["number1", "number2", "number3", ・・・,"r1", "r2", ・・・]
のようなものを作りたいのだけれど、「いちいち並べ立てなくても良い方法ないか？」ってことでしょうか？

配列なので順序をどうしたいのかも関係してきますけれど、とりあえずの例として。
const ary = 'number,r,has,si'.split(',').flatMap(s => [1,2,3,4,5].map(i => s + i));
console.log(ary);

//['number1', 'number2', 'number3', 'number4', 'number5', 'r1', 'r2', 'r3', 'r4', 'r5', 'has1', 'has2', 'has3', 'has4', 'has5', 'si1', 'si2', 'si3', 'si4', 'si5']

みたいなことでしょうか？

cametan_42 · Answer

> 違いがわかってません。っつーか、JavaとJavaScriptは名前は似てるけど全然別の言語です。多分JavaScriptでしょ。それでだな。ちと日本語が拙いんで何がやりたいんだか分かりづらいんだけど。 // 例えばkeyなんつーのが何を指してるのか分からん。 // 通常、keyと言うのは連想配列/辞書に用いる用語だから、だ。 // //【JavaScript入門】連想配列(Dictionary)の取得/追加/ソートまとめ: // https://www.sejuku.net/blog/27965 // // 他にも「付け足されています」ってのも何を言ってるか良く分からない。残念なお知らせ。一般的にはプログラミング言語では「変数名」とかは自動生成出来ないんだ。多分ここ for (let i = 1; i < 6; i++) {　　let array = [number + (i)]; } で、number1、number2、number3、・・・って言う変数名を「自動生成したい」って思ってるんでしょ? 通常そういう事は「出来ない」んだ。プログラミング言語はそこまで万能じゃあないの。しかもこれだと、「未定義の変数を配列に入れよう」としてるんで、明らかにエラーになる。あるいは文字列だったら、 js> let array = []; js> for (let i = 1; i < 6; i++) { > array[i] = "number" + i; > } number5 js> array ,number1,number2,number3,number4,number5 js> とやりたい、ってことなのかもしんないけど。いずれにせよ、keyが何を指してるんだかサッパリなんで、もうちょっと明確に書く事を心がけるべきかなぁ。

cametan_42 · Answer

Java? JavaScript?
JavaとJavaScriptは違いますよ?

java keyを配列で表記したい

No9です。

No8です。

No7です。

No6です。

No5です。

No3です。

ああ、JavaScriptに関しては #3 のfujillin さんが出てくればもう安心だよ(笑)。

こんにちは

> 違いがわかってません。

Java? JavaScript?

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング