Funktion innerhalb des Objekts ausführen

Question

Ich verwende ein Array von Objekten, um Elemente in einem Canvas zu drucken. Jedes Objekt sollte eine andere zufällige Farbe haben, aber die Art, wie ich den Code geschrieben habe, erhält jedes Objekt.

var arrayOfObjects = [ 
    {x: 1, y: 5, r: 10, color: pickColor}, //gets random color 
    {x: 2, y: 6, r: 10, color: pickColor} // should get a different color 
    //and so on... 
]; 

Ich versuchte, die pickColor Variable mit einer Funktion zu ersetzen, in jedem Objekt ausgeführt werden, so dass sie alle eine andere Farbe bekommen, aber ich kann nicht scheinen, um diesen Wert zu verwenden, um eine Farbe in meiner Farbe des Arrays zu holen . das Problem kam aus einer scheinbar unzusammenhängenden Linie ohne Hinweise in Debugging-Tool Dieser Code funktioniert,:

funktioniert das natürlich nicht:

{x: 1, y: 5, r: 10, color: colorList[parseInt(Math.random() * colorList.length)]}, 

EDIT. Vielen Dank für Ihre Antworten

Answer 1

Make pickColor eine Funktion und rufen Sie es mehrmals:

var colorList = ["#E57373", "#F06292", "#BA68C8", "#9575CD", "#7986CB", "#64B5F6", "#DCE775", "#AED581", "#81C784", "#FFD54F"]; 

function pickColor() { 
    var randIndex = parseInt(Math.random() * colorList.length); 
    return colorList[randIndex]; 
} 

var arrayOfObjects = [ 
    {x: 1, y: 5, r: 10, color: pickColor()}, 
    {x: 2, y: 6, r: 10, color: pickColor()}, 
    //and so on... 
]; 

Der Effekt ist genau das gleiche wie in Ihrem zweiten Schnipsel, außer Sie müssen sich nicht für jedes Objekt wiederholen .