funktionaler Weg, um über den Bereich zu iterieren (ES6/7) [duplicate]
Lesezeit: 4 Minuten
bsr
Was ist der beste Weg, um das Folgende funktionaler zu machen (mit ES6/ES7)
let cols = [];
for (let i =0; i <= 7; i++) {
cols.push(i * i);
}
return cols;
Ich habe versucht,
return [ ...7 ].map(i => {
return i * i;
});
aber das übersetzt zu
[].concat(7).map(function (n) {
return n * n;
});
was ich nicht erwartet habe.
BEARBEITEN:
@pavlo. Das war in der Tat ein Fehler. Ich habe JSX verwendet und möchte zum Beispiel 7 Divs (ungetestet)
let cols = [];
for (let i =0; i <= 7; i++) {
cols.push(<div id={i}> ... </div>)
}
return cols;
Die Idee war also tatsächlich, die Anzahl der temporären Variablen und das prozedurale Gefühl zu reduzieren.
Du willst jede Zahl von 1-7 quadrieren?
– Ziegenbock
4. Juni 2015 um 18:14 Uhr
Im ersten Beispiel meinst du wahrscheinlich cols.push(i * i) Anstatt von return i * i.
– Pavlo
4. Juni 2015 um 18:22 Uhr
Pavlo
Man kann ein leeres Array erstellen, es füllen (andernfalls wird map es überspringen) und dann Indizes auf Werte abbilden:
Array(8).fill(0).map((_, i) => i * i);
Wenn Sie das Ergebnisarray von map nicht benötigen und das ‘for’-Wort dort behalten möchten, können Sie es verwenden Array(8).fill().forEach((_,i)=>console.log(i)) oder [...Array(8)].forEach((_,i)=>console.log(i))
– aljgom
9. Mai 2019 um 23:25 Uhr
Beachten Sie, dass dieser Code in Typescript fehlschlägt, es sei denn, Sie fügen hinzu undefined als erstes Argument zu fill. Entsprechend dieses Github-Problem Typoskript-Betreuer scheinen gegen diese spezifische Verwendung des zu sein Array.prototype.fill.
– Adam
31. März 2021 um 14:59 Uhr
Danke Adam. Aus praktischen Gründen habe ich die Antwort zur Verwendung aktualisiert .fill(0).
– Pavlo
31. März 2021 um 15:21 Uhr
In meinem Fall hilft mir diese Antwort sehr, danke.
– Caio
9. April 2021 um 16:12 Uhr
Oder Array.from({length: 8}, (_, i) => i * i).
– Ludovic Kuty
27. Mai 2021 um 8:31 Uhr
Ziegenbock
ES7-Vorschlag
Warnung: Leider glaube ich, dass die meisten populären Plattformen die Unterstützung für Verständnis eingestellt haben. Siehe unten für die gut unterstützte ES6-Methode
Sie können immer etwas verwenden wie:
[for (i of Array(7).keys()) i*i];
Führen Sie diesen Code in Firefox aus:
[ 0, 1, 4, 9, 16, 25, 36 ]
Dies funktioniert unter Firefox (es war eine vorgeschlagene ES7-Funktion), wurde jedoch aus der Spezifikation gestrichen. IIRC, Babel 5 mit aktiviertem „experimentell“ unterstützt dies.
Dies ist Ihre beste Wahl, da Array-Comprehension nur für diesen Zweck verwendet wird. Sie können sogar eine Bereichsfunktion schreiben, die dazu passt:
var range = (u, l = 0) => [ for( i of Array(u - l).keys() ) i + l ]
Dann können Sie Folgendes tun:
[for (i of range(5)) i*i] // 0, 1, 4, 9, 16, 25
[for (i of range(5,3)) i*i] // 9, 16, 25
@vihan1086: Array Comprehensions wurden viele Male für ES vorgeschlagen, haben es aber nicht in die Spezifikation geschafft. .map(i => i*i) wurde als so viel einfacher empfunden 🙂
– Bergi
4. Juni 2015 um 18:38 Uhr
Dies funktionierte nicht, als ich es versuchte: Array(7).keys().map(i => i * i); Die keys() gab einen Iterator zurück. Dies funktioniert jedoch: Array.from(Array(7).keys()).map(i => i * i) Beachten Sie die Notwendigkeit, den Iterator explizit in ein anderes Array zu laden.
– arcseldon
9. Dezember 2015 um 11:51 Uhr
@arcseldon Nein, es funktioniert nicht. Ich bin mir nicht sicher, was ich dachte, als ich gepostet habe: p Wird behoben
– Ziegenbock
9. Dezember 2015 um 16:16 Uhr
Array Comprehension ist nicht Teil von ES7. Es ist nicht einmal mehr ein Vorschlag, soweit ich das beurteilen kann.
– Felix Klinge
5. März 2016 um 2:31 Uhr
Behaupten Sie zumindest nicht, dass sie in ES7 sind. Das wird die Leute nur verwirren. Ich glaube nicht, dass Babel sie mehr unterstützt: babeljs.io/docs/plugins .
– Felix Klinge
5. März 2016 um 2:32 Uhr
Hier ist ein Ansatz mit Generatoren:
function* square(n) {
for (var i = 0; i < n; i++ ) yield i*i;
}
Dann kannst du schreiben
console.log(...square(7));
Eine andere Idee ist:
[...Array(5)].map((_, i) => i*i)
Array(5) erstellt ein ungefülltes Array mit fünf Elementen. So geht das Array funktioniert, wenn ein einzelnes Argument angegeben wird. Wir verwenden den Spread-Operator, um ein Array mit fünf undefinierten Elementen zu erstellen. Das können wir dann abbilden. Sehen http://ariya.ofilabs.com/2013/07/sequences-using-javascript-array.html.
Alternativ könnten wir schreiben
Array.from(Array(5)).map((_, i) => i*i)
oder wir könnten das zweite Argument zu nutzen Array#from zu überspringen map und schreibe
Array.from(Array(5), (_, i) => i*i)
Ein schrecklicher Hack, den ich kürzlich gesehen habe, was ich tue nicht empfehlen Sie verwenden, ist
[...1e4+''].map((_, i) => i*i)
Array(...Array(5)) wird besser ausgedrückt als [...Array(5)].
– schlüpft
2. Februar 2016 um 19:05 Uhr
12826500cookie-checkfunktionaler Weg, um über den Bereich zu iterieren (ES6/7) [duplicate]yes
Du willst jede Zahl von 1-7 quadrieren?
– Ziegenbock
4. Juni 2015 um 18:14 Uhr
Im ersten Beispiel meinst du wahrscheinlich
cols.push(i * i)Anstatt vonreturn i * i.– Pavlo
4. Juni 2015 um 18:22 Uhr