【Javascript】配列の中身を定数名として定義する方法

Question

配列の中身を定数名にしたいのですが、以下のようなコードでは上手くいきませんでした

const itemName = [apple, orange, grape];
for (let i = 0; i < itemName.length; i++) {
  const itemName[i] = document.createElement('div');
}

定数名appleのdiv要素、定数名orangeの〃、定数名grapeの〃をfor文を用いて作るにはどうすればいいのでしょうか

Comments

[think49]

「期待する結果」を具体的に書いてください。

[think49]

> const itemName = [apple, orange, grape];

このコードは変数 apple の値、変数 orange の値、変数 grape の値が代入されています。
apple, orange, grape の名前は itemName の中にありません。

Answer 1

配列の中身を定数名にしたいのですが

よほど理由がない限り、やるべきではありません。それぞれの値をキーにした連想配列のほうが妥当かと思います。

Comments

[flandre]

回答ありがとうございます
大人しくそうしようと思います

Answer 2

あくまでも先に配列の設定が必要なのでしょうか？

[apple,orange,grape]=Array(3).fill(null).map(()=>document.createElement('div'));
console.log(apple);

Comments

[flandre]

まだ学び始めて日が浅く、fill()もmap()も初めて知りました。こんな便利なメソッドがあったとは…
回答ありがとうございます

Answer 3

const

定数名appleのdiv要素、定数名orangeの〃、定数名grapeの〃をfor文を用いて作るにはどうすればいいのでしょうか

今一つ目的が見えませんが、

'use strict';
const array = [];

for (let i = 0; i < 3; i++) {
  array[i] = document.createElement('div');
}

const apple = array[0], orange = array[1], grape = array[2];
console.log(apple, orange, grape);

定数を使うだけなら、for 文は不要です。

'use strict';
const apple = document.createElement('div'), orange = apple.cloneNode(false), grape = apple.cloneNode(false);
console.log(apple, orange, grape);

ConstMap

まだ要件がはっきり見えませんが、期待しているのは下記コードのような動作ですか。

• const-map.js - GitHub gist

<script src="./const-map-0.1.0.js"></script>
<script>
const keys = ['apple','orange','grape'];
const fruitMap = new ConstMap;

for (let i = 0, l = keys.length; i < l; ++i) {
  fruitMap.set(keys[i], document.createElement('div'));
}

console.log(fruitMap.values());             // [div, div, div]
console.log(fruitMap.get('apple'));         // <div></div>
console.log(fruitMap.set('apple', 'foo'));  // DefinitionError: Identifier 'apple' has already been declared
</script>

Re: jjj001 さん

Comments

[flandre]

いずれも自分が実現したかった動作です
回答ありがとうございます

[think49]

要件をはっきりさせてほしかったのですが…。
定数と書いていたので、再代入不可機能が必要と考え、class ConstMapを作りましたが、連想配列で要件を満たせるということは「再代入不可」は要件に入ってなかったのですね。
質問時点で要件は必要十分に書くようお願いします。

[flandre]

自分の言葉足らずでお手数をおかけしてしまい申し訳ありません
以後はもっと具体的に目的を書こうと思います

Answer 4

連想配列を使いましょう。

const itemName = ['apple', 'orange', 'grape'];
let items = {};
for (let i = 0; i < itemName.length; i++) {
  items[itemName[i]] = document.createElement('div');
}

items['apple'].textContent = 'apple';
document.body.appendChild(items['apple']);

---

どうしてもやろうと思うならevalでできます。
が、maisumakunさんのおっしゃる通り、やるべきではありません。

const itemName = ['apple', 'orange', 'grape'];
let items = {};
for (let i = 0; i < itemName.length; i++) {
  eval(`${itemName[i]} = document.createElement('div');`);
}

apple.textContent = 'apple';
document.body.appendChild(apple);

Comments

[flandre]

回答ありがとうございます
確かに素直に連想配列を使った方が良いですね
evalという関数は今初めて知りました。便利な一方で脆弱性が高いんですね…