ES6 - erzeugen Sie ein array von zahlen

Haben gegoogelt dafür fand ich zwei Lösungen:

JS:

    var data = [...Array(10).keys()];
console.log(data);
    var data1 = Array(8).fill().map((_, i) => i);
console.log(data1);

data1 zeigt [0, 1, ..., 7] jedoch Daten zeigt nur [[Objekt Array-Iterator]] wie habe ich tatsächlich die zahlen sehen.

Ich brauche es für einige Iterationen über zahlen (Teil-Euler-Projekt).

Zuvor habe ich viel von Euler Herausforderungen in Python. Jetzt habe ich beschlossen, ich werde überdenken, und so viel tun, wie kann ich in JS (so viel ES6-syntax möglich) zu helfen, mich zu entwickeln, meine js-Kenntnisse.

  • Wenn ich var data = [...Array(10).keys()]; in meinem browser (neueste stabile Chrome) sehe ich die zahlen aufgeführt sind. Ich sehe ArrayIterator wenn ich nur Array(10).keys().
  • Ist es etwas zu tun mit codepen? codepen.io/ödland/pen/QKQGNo/?Redakteure=1111
  • Es hat zu tun mit "Babel", welches an diesem bestimmten code-Stift
  • Es hat zu tun mit CodePen der Verwendung von Babel. Ich bin mir nicht sicher, welche version Sie ausführen, aber wenn Sie Sie deaktivieren das Babel-Präprozessor, wird alles richtig sein. Sie können diesen code ausführen auf der Babel-website und werden Sie noch sehen das Ergebnis, die Sie erwarten.
  • Danke. Nicht babel erforderlich für ES6-features?
InformationsquelleAutor Wasteland | 2016-10-07
  1. 57

    Hier ist eine einfache Lösung, die funktioniert in codepen:

    Array.from(Array(10).keys())

    Klar zu sein, Array.from() und Array.keys() erfordern ein ES6 polyfill, um zu funktionieren in allen Browsern.

    InformationsquelleAutor Mouad Debbar
  2. 28

    Eine tour von Array.von thru-praktische Beispiele

    Array.from akzeptiert auch ein zweites argument, das als eine mapping-Funktion

    JS:

    let out = Array.from(Array(10), (_,x) => x);
console.log(out);
//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

    Dies ist schön zu wissen, weil Sie vielleicht möchten zu erzeugen arrays, die manchmal mehr komplexe als nur 0 thru N.

    JS:

    const sq = x => x * x;
let out = Array.from(Array(10), (_,x) => sq(x));
console.log(out);
//[0, 1, 4, 9, 16, 25, 36, 49, 64, 81]

    Oder Sie können arrays aus Generatoren, zu

    JS:

    function* range(start, end, step) {
  while (start < end) {
    yield start;
    start += step;
  }
}

let out = Array.from(range(10,20,2));

console.log(out); //[10, 12, 14, 16, 18]

    Array.from ist einfach enorm mächtige. Menschen gar nicht bewusst sein volles Potenzial noch.

    JS:

    const ord = x => x.charCodeAt(0);
const dec2hex = x => `0${x.toString(16)}`.substr(-2);

//common noob code
{
  let input = "hello world";
  let output = input.split('').map(x => dec2hex(ord(x)));
  
  console.log(output);
  //["68", "65", "6c", "6c", "6f", "20", "77", "6f", "72", "6c", "64"]
}

//Array.from
{
  let input = "hello world";
  let output = Array.from(input, x => dec2hex(ord(x)));
  
  console.log(output);
  //["68", "65", "6c", "6c", "6f", "20", "77", "6f", "72", "6c", "64"]
}

    • Was ist falsch mit, dass "noob-code"? Ich würde behaupten es ist besser lesbar.
    InformationsquelleAutor user633183
  3. 21

    Es scheint, das problem ist, dass codepen precompiles Ihren code mithilfe babel es2015-lose.

    In diesem Modus, Ihr

    [...Array(10).keys()];

    wird

    [].concat(Array(10).keys());

    Und das ist, warum Sie sehen, ein array mit einem iterator.

    Mit es2015-Modus, die Sie erhalten würden

    function _toConsumableArray(arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
      arr2[i] = arr[i];
    }
    return arr2;
  } else {
    return Array.from(arr);
  }
}
[].concat(_toConsumableArray(Array(10).keys()));

    welches Verhalten würde, wie gewünscht.

    Sehen ②ality - Babel 6: loose-Modus für weitere Informationen über die Modi.

    InformationsquelleAutor Oriol
  4. 8

    Alle anderen Antworten hier erstellen Sie einen temporären intermediate-array, das ist nicht nötig.

    Array.from({ length: 10 }, (_, i) => i)

    Dies ist im wesentlichen eine map-Funktion, wo Sie die Karte aus dem array-index zu, was auch immer Sie möchten, für eine beliebige Anzahl von Elementen.

    InformationsquelleAutor murrayju
  5. 4

    Weitere Verfeinerung erzeugt ein array mit Wert ab 1:

    Array.from(Array(10).keys(), n => n + 1)
    InformationsquelleAutor Dwight Rodriques
  6. 3

    Hier ist ein range - Funktion, die start, end, und ein step parameter. Es gibt ein array zurück, beginnend einen von start bis zu (aber ausschließlich) der end Zahl mit Schritten von Größe step.

    JS:

    const range = (start, end, step) => {
  return Array.from(Array.from(Array(Math.ceil((end-start)/step)).keys()), x => start+ x*step);
}

console.log(range(1, 10, 1));
//[1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(range(0, 9, 3));
//[0, 3, 6]

console.log(range(10, 30, 5));
//[10, 15, 20, 25]

    Einen Schritt weiter, wenn Sie wollen, einen Bereich, der enthält die end als gut.

    JS:

    const inclusiveRange = (start, end, step) => {
  return Array.from(Array.from(Array(Math.ceil((end-start+1)/step)).keys()), x => start+ x*step);
}

console.log(inclusiveRange(1, 10, 1));
//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

console.log(inclusiveRange(0, 9, 3));
//[0, 3, 6, 9]

console.log(inclusiveRange(10, 30, 5));
//[10, 15, 20, 25, 30]

    InformationsquelleAutor Pranav Shukla
Schreibe einen Kommentar