javascript - 配列を反復処理して新しいクラスを作成する (JS)

JavaScript でクラスを使用することに取り組んでいますが、どのように進めればよいかわかりません。以下にあるものは for ループを正常に実行すると思いますが、新しく作成されたリソースを console.log に記録する方法で行き詰まっています。

私の目標は、Bootstrap または Foundation を使用してカードを作成し、本文に追加することです。

以下の私のコード:

var ResourcesArray = ["Blacksmith", "Farm", "Gold", "Herb", "Quarry", "Vineyard", "Wood"]

class Resource {
    constructor(name, amount) {
        this.name = name;
        this.amount = amount
    }
    
    add() {
        this.amount + 1
    }
    subtract() {
        this.amount - 1
    }
    trade() {
        console.log(this.name)
    }
}

function createResourceCards() {
    for (i = 0; i < ResourcesArray.length; i++) {
        new Resource(ResourcesArray[i], 0)
    }

}

ご協力いただきありがとうございます。

ループ内で作成されたインスタンスを配列に保存して、後で参照できるようにすることができます。 arr.push(new Resource(ResourcesArray[i], 0));。あーるはcreateResourceCards 関数で定義できる配列

2020 年 9 月 3 日 15:35

console.log の方法で困っています...Chrome 開発ツールを使用したトレースとデバッグに関する優れた YouTube 動画がいくつかあります。たとえば、「Javascript のデバッグ初心者から上級者までを 1 つのビデオで」などです。

2020 年 9 月 3 日 15:35

また、add メソッド内の this.amount + 1 は this.amount を変更しないことにも注意してください。結果を保存する必要があります --> this.amount += 1.減算方法でも同じ間違いがあります。それを ---> に変更します。 this.amount -= 1.

2020 年 9 月 3 日 15:39

Resource.toString() をオーバーライドして、オブジェクトのすべてのプロパティを表示します。次に、それは単に console.log(thisReソース);

2020 年 9 月 3 日 15:39

式 new Foo() は、作成されたばかりのインスタンスを返します。それを変数に保存するだけです。

function createResourceCards() {
    for (i = 0; i < ResourcesArray.length; i++) {
        let res = new Resource(ResourcesArray[i], 0);
        console.log(res);
    }
}

ただし、おそらく関数が新しいリソース カードを返すようにする必要があるでしょう。この目的のために、質問のコメントで提案されているように、配列を作成し、それらをすべて配列にプッシュする必要があります。ただし、これを行うためのショートカットもあります。 Array#map() を以下に示します。

const ResourcesArray = ["Blacksmith", "Farm", "Gold", "Herb", "Quarry", "Vineyard", "Wood"]

class Resource {
    constructor(name, amount) {
        this.name = name;
        this.amount = amount
    }
    
    add() {
        this.amount + 1
    }
    subtract() {
        this.amount - 1
    }
    trade() {
        console.log(this.name)
    }
}

function createResourceCards() {
    return ResourcesArray.map(res => new Resource(res, 0));
}

let resources = createResourceCards();
console.log(resources);

0

new Resource() を使用するたびに、新しく作成されたクラスが返されるため、それらを配列、オブジェクト、またはマップに格納できます。キーとして名前を含むオブジェクト/マップが最も役立つ可能性があります

let resourceClasses = new Map()
function createResourceCards() {
    for (i = 0; i < ResourcesArray.length; i++) {
        let newResource = new Resource(ResourcesArray[i], 0)
        resourceClasses.set(ResourcesArray[i], newResource);
    }

}

次に、この新しく作成されたマップを使用して、名前でリソース クラスを取得できます。

resourceClasses.has("Blacksmith");
 // Returns true/false if you have a key by this name
resourceClasses.get("Blacksmith"); 
// This returns the value stored in Blacksmith which is your new Class

編集: @Klaycon が述べているように、配列を反復処理し、各要素の実行ロジックに基づいて新しい配列を作成する便利な方法として .map() を使用することもできます。