Banale Aufgabe: Erstelle eine unabh\u00e4ngige Kopie von einem Javascript-Array. Was erstmal billig klingt entpuppt sich f\u00fcr unwissende, PHP verw\u00f6hnte Entwickler doch als tricky.<\/p>\n
\r\nvar colors = ["red", "blue", "green"];\r\nvar copied = colors;\r\n\r\ncopied[0] = "magenta";\r\n\r\nconsole.log(colors); \/\/["magenta", "blue", "green"]\r\nconsole.log(copied); \/\/["magenta", "blue", "green"]\r\n<\/pre>\nIn diesem Beispiel sehen wir also, dass die vermeintliche Kopie eigentlich das gleiche Element ist. Gleiches gilt entsprechend f\u00fcr das \u00dcbergeben eines Arrays als Parmeter an eine Funktion<\/b>.<\/p>\n
\r\nvar colors = ["red", "blue", "green"];\r\n\r\ntest(colors);\r\nconsole.log(colors); \/\/["magenta", "blue", "green"]\r\n\r\nfunction test(arr)\r\n{\r\n\tarr[0] = "magenta";\r\n}\r\n<\/pre>\nOffensichtlich nicht wie von PHP gewohnt By Value<\/i> sondern By Reference<\/i>.<\/p>\n
Ja und wie geht es nun?<\/h2>\n
Enter Array.slice<\/a>. Damit lassen sich wirkliche Kopien erstellen.<\/p>\n
\r\nvar colors = ["red", "blue", "green"];\r\nvar colorscopy = colors.slice(); \/\/or colors.slice(0, colors.length);\r\n\r\ncolorscopy[0] = "magenta";\r\n\r\nconsole.log(colors); \/\/["red", "blue", "green"]\r\nconsole.log(colorscopy); \/\/["magenta", "blue", "green"]\r\n<\/pre>\nTada! Als Alternative k\u00f6nnte man sich auch selbst was zusammenbasteln, etwa so:<\/p>\n
\r\nfor (var i in original) {\r\n\tcopy[i] = original[i];\r\n}\r\n<\/pre>\nWer cool ist und \/ oder mit der Bezeichnung slice<\/i> nicht klarkommt, kann es auch elegant per Prototyp l\u00f6sen:<\/p>\n
\r\nArray.prototype.copy = function() \r\n{\r\n\treturn this.slice();\r\n}\r\n\r\nvar colors = ["red", "blue", "green"];\r\nvar colorscopy = colors.copy();\r\n\/\/...\r\n<\/pre>\n[Erg\u00e4nzung:<\/b> So cool scheint das doch nicht zu sein… <\/p>\n
One mis-feature that is often used is to extend Object.prototype or one of the other built in prototypes.<\/p>\n
This technique is called monkey patching and breaks encapsulation. While used by widely spread frameworks such as Prototype, there is still no good reason for cluttering built in types with additional non-standard functionality.<\/p><\/blockquote>\n
Au\u00dferdem bekommt man so Probleme mit for-in-Loops, bei denen dann auch die Funktion aus dem Prototyp mit auftaucht (danke an Steffen).<\/p>\n
(Quelle<\/a>)]<\/p>\n
H\u00e4tten wir das also abgehakt. Aber es gibt noch einen…<\/p>\n
Bonus! Arraygr\u00f6\u00dfe erweitern und verk\u00fcrzen<\/h2>\n
Javascript Arrays verl\u00e4ngern sich ganz bequem, indem sie den Zwischenraum mit undefined<\/i> ausf\u00fcllen:<\/p>\n
\r\nvar colors = ["red", "blue", "green"];\r\ncolors[7] = "yellow";\r\n\r\nalert(colors.length); \/\/8\r\nconsole.log(colors);\r\n\/\/["red", "blue", "green", undefined, undefined, undefined, undefined, "yellow"]\r\n<\/pre>\nWas viele nicht wissen: Array.length ist nicht readonly. Damit lassen sich Arrays auch verk\u00fcrzen (allerdings nicht verl\u00e4ngern):<\/p>\n
\r\nvar colors = ["red", "blue", "green"];\r\ncolors.length = 2;\r\nconsole.log(colors);\r\n\/\/["red", "blue"]\r\n<\/pre>\nFalls es mal jemand gebrauchen sollte.<\/p>\n
[Erg\u00e4nzung 2:<\/b> <\/p>\n
\r\nvar copied = [].concat(original);\r\n<\/pre>\nEin weiterer geschmeidiger Weg, um ein Array zu kopieren (danke an Fabian).]<\/p>\n","protected":false},"excerpt":{"rendered":"
Banale Aufgabe: Erstelle eine unabh\u00e4ngige Kopie von einem Javascript-Array. Was erstmal billig klingt entpuppt sich f\u00fcr unwissende, PHP verw\u00f6hnte Entwickler doch als tricky. var colors = ["red", "blue", "green"]; var copied = colors; copied[0] = "magenta"; console.log(colors); \/\/["magenta", "blue", "green"] … Weiterlesen