Die Rückfläche eines Arrays an sich selbst anhängen

Ich habe ein Array von Farbwerten erstellt, das einen fließenden Übergang von Rot zu Blau darstellt.Die Rückfläche eines Arrays an sich selbst anhängen

Jetzt möchte ich, dass dieses Array Sie von rot nach blau und wieder zurück bringt. Die naheliegende Lösung besteht darin, die Rückseite des Arrays an das Array anzuhängen.

Ich habe Code geschrieben, um es zu tun, aber es funktioniert nicht, wie ich es verstehe. Stattdessen wird das umgekehrte Array wiederholt. Statt "Rot zu Blau, Blau zu Rot" wird es "Blau zu Rot, Blau zu Rot".

Offensichtlich gibt es einige Verhaltensweisen von Arrays in Javascript, die ich noch nicht erfasst habe.

Was soll ich tun?

Mein erster Versuch ist dies:

colors = colors.concat(colors.reverse());

Basierend auf der ersten Stackoverflow Antwort, ich dies versucht:

var arrayCopy = colors; 
arrayCopy.reverse(); 
colors = colors.concat(arrayCopy);

Aber die erzeugt identische Ergebnisse!

Für Kontext, hier ist der umgebenden Code:

  /////////////////////////////////////////////////////////// 
      // Creating the array which takes you from Red to Blue 
      // 
      var colorSteps = 400; 
      var startColor = [255, 0, 0]; 
      var endColor = [0, 127, 255]; 
      var steps = new Array(); 
      var j = 0; 
      for (j = 0; j < 3; ++j) { 
       steps[j] = (endColor[j] - startColor[j])/colorSteps; 
      } 
      var colors = Array(); 
      for (j = 0; j < colorSteps; ++j) { 
       colors[j] = [ 
           Math.floor(startColor[0] + steps[0] * j), 
           Math.floor(startColor[1] + steps[1] * j), 
           Math.floor(startColor[2] + steps[2] * j) 
          ]; 
      } 

      //////////////////////////////////////////////////////// 
      // Here's the bit where I'm trying to make it a mirror 
      // of itself! 
      // 
      // It ain't working 
      // 
      colors = colors.concat(colors.reverse()); 


      /////////////////////////////////////////////////////// 
      // Demonstrating what the colors are 
      // 
      j = 0; 
      var changeColorFunction = function() { 
       if (++j >= colors.length) { 
        j = 0; 
       } 
       var colorName = "rgb(" + colors[j][0] + ", " + colors[j][1] + ", " + colors[j][2] + ")"; 
       debugText.style.background = colorName; 
       debugText.innerHTML = j; 
      } 
      setInterval(changeColorFunction, 10);

Quelle

2010-12-23 Andrew Shepherd

Das Problem:

colors = colors.concat(colors.reverse());

... ist, dass colors.reverse() mutiert die colors Array selbst, was bedeutet, dass Sie Anfügen ein umgekehrtes Array zu einem bereits umgekehrten Array. Versuchen Sie stattdessen:

colors = colors.concat(colors.slice().reverse());

Quelle

2010-12-23 12:15:33 James

schlug mich zu ihm, +1 :-) –

Oh natürlich, wobei das Verfahren ein Array zu klonen ist nicht "Clone" oder "Copy" genannt, heißt es "Slice". Es ist so ärgerlich, eine neue Sprache zu lernen :-) –

Die erste Verwendung von 'slice (start, end) 'besteht nicht nur darin, das Array zu klonen, sondern ein" slice "davon zu erhalten, dh ein neues Array mit den Elementen aus 'Anfang' zu' Ende'. Wenn Sie kein Argument übergeben, fragen Sie ein neues Array mit den Elementen von '0' bis zum Ende des Arrays -> eine Kopie des Arrays selbst. Dies ist ähnlich wie in Python (wo Sie eine Liste mit dem '[:]' Slicing) klonen, da "Variablen" Zeiger darstellen, keine Werte, anders als in Sprachen wie PHP. – redShadow

Kopieren Sie Ihre colors Array zuerst irgendwo. reverse ändert das Array selbst und gibt nicht nur einen umgekehrten zurück.

UPDATE

Codebeispiel:

colors.concat(colors.slice(0).reverse());

Quelle

2010-12-23 12:13:06

+1 Simplest fix: 'colors.slice (0) .reverse()' –

Die Rückfläche eines Arrays an sich selbst anhängen

Antwort

Verwandte Themen