Q&A
詳しい解説本当にありがとうございました。
ボタンのクリックから配列の変数名を作って選択したいのですが、変数名にならず、その言葉が配列に入ってしまいます。配列を取り出したいのですが、どうしたら文字列から配列の変数にできますか？
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7</head> 8<body> 9 <div id="select1"> 10 <input type="button" id="A" value="あ" onclick="clk1(this)"> 11 <input type="button" id="O" value="お" onclick="clk1(this)"> 12 </div> 13 <div id="select2"> 14 <input type="button" id="i" value="い" onclick='clk2(this)'> 15 <input type="button" id="u" value="う" onclick='clk2(this)'> 16 </div> 17 <script src="test.js"></script> 18</body> 19</html>
javaScript
1'use strict'; 2let word = null; 3var clk1 = function(button){ 4 word = button.id; 5 const position = document.getElementById("select2").getBoundingClientRect().top; 6 scrollTo(0, position); 7} 8var clk2 = function(button){ 9 word += button.id; 10 console.log(`word = ${word}`); 11 start(word); 12} 13 14const ai = ["愛", "藍", "哀"]; 15const au = ["会う", "合う", "逢う"]; 16const oi = ["甥", "老い", "負い"]; 17const ou = ["王", "追う", "欧"]; 18 19function start(word){ 20 var arr = Array.from(word); 21 console.log(arr); 22}
回答3件
0
ベストアンサー
単に「連想配列にする」ではだめでしょうか。
javascript
1const words = { 2 ai: ["愛", "藍", "哀"], 3 au: ["会う", "合う", "逢う"], 4 oi: ["甥", "老い", "負い"], 5 ou: ["王", "追う", "欧"] 6} 7 8console.log(words['ai']);
投稿2020/10/02 22:26
総合スコア146018
0
最初に
maisumakun さんの回答される 「連想配列にする」方法をおすすめします。
ボタンのクリックから配列の変数名を作って選択したいのですが、変数名にならず
- 定数（
const）は宣言されていますが、変数は宣言されていません。 input[type="button"]のid属性を変数名とするなら、id属性値に応じた文字列を考えてください。- 変数を文字列で扱う場合、
var宣言で実装する方法はあります（古典的手法）。
グローバルスコープで var宣言すると windowオブジェクトのプロパティとなるので window["propName"] でアクセスできる。
javascript
1var Ai = ["愛", "藍", "哀"]; 2var Au = ["会う", "合う", "逢う"]; 3var Oi = ["甥", "老い", "負い"]; 4var Ou = ["王", "追う", "欧"]; 5 6// windowのプロパティとしてアクセスする 7console.log( window.Ai ); // ["愛", "藍", "哀"] 8console.log( window.Au ); // ["会う", "合う", "逢う"] 9console.log( window.Oi ); // ["甥", "老い", "負い"] 10console.log( window.Ou ); // ["王", "追う", "欧"] 11 12// 文字列でアクセスする例 13console.log( window["Ou"] ); // ["王", "追う", "欧"]
「var宣言の変数は再代入によって書き換わる」ので let、const が利用されています。
javascript
1window.Ou = ["旺"]; // 再代入でき、書き換わる。
配列を取り出したいのですが、どうしたら文字列から配列の変数にできますか？
おすすめはできません（古典を知っていただく目的で回答します）
要は「window オブジェクトそのものを 連想配列のように扱う」方法です
前半のように var 宣言した上で以下のコードを試してみてください。
var clk2 = function(button){ if( word && word.length === 1 ) { //word = word.toUpperCase() + button.id; word += button.id; console.log(`word = ${word}`); start(word); } } function start(word){ var arr = window[word]; console.log(arr); }
本回答のような古典的な方法ですと、window オブジェクトに無数のプロパティを付与するだけでなく、再代入で意図せず書き換わる危険がありますので、冒頭でも述べたように、maisumakun さんの回答(words) を使うのが良いと思います。
動くサンプル: CODEPEN
投稿2020/10/03 09:23
編集2020/10/04 08:17
総合スコア5434
0
①か②でやりたい処理が実現できるのではないでしょうか。
①条件分岐させる
javascript
1function start(word){ 2 var arr = null; 3 if(word=="ai"){ 4 arr=ai; 5 } 6 else if(word=="au"){ 7 arr=au; 8 } 9 else if(word=="oi"){ 10 arr=oi; 11 } 12 else if(word=="ou"){ 13 arr=ou; 14 } 15 console.log(arr); 16}
②evalで文字列を変数オブジェクトにする
javascript
1function start(word){ 2 var arr = eval(word); 3 console.log(arr); 4}
投稿2020/10/02 16:18
総合スコア640
ご回答ありがとうございます。例のように少なくなく、もっと配列の数が多いものを考えているのですが、そのidで取ってきたものを配列の変数になるような方法はないですか？
②の方法だと、idをそのまま変数名として使用してると思いますがそういうことではないのですか？
ありがとうございました。eval関数を知らなかったのでとても勉強になりました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/05 02:03