2016-10-07 29 views
12

es gegoogelt Nachdem fand ich zwei Lösungen:ES6 - erzeugen eine Reihe von Zahlen

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

data1 Displays [0, 1, ..., 7] jedoch Daten zeigt nur [ [Objekt Array Iterator]] Wie sehe ich eigentlich die Zahlen?

Ich brauche es für einige Iterationen über Zahlen (Teil des Euler-Projekts).

Zuvor habe ich eine Menge Euler-Herausforderungen in Python gemacht. Jetzt entschied ich, dass ich es noch einmal besuchen werde und so viel wie ich kann in JS (so viel ES6-Syntax wie möglich), um mir zu helfen, meine js Fähigkeiten zu entwickeln.

+3

Wenn ich laufen 'var data = [... Array (10) .keys()];' in meinem Browser (neueste stabile Chrome) Ich sehe die Zahlen aus aufgeführt. Ich sehe 'ArrayIterator', wenn ich nur' Array (10) .keys() 'tue. –

+1

Hat es etwas mit Codepen zu tun? http://codepen.io/wasteland/pen/QKQGNo/?editors=1111 – Wasteland

+2

@Wasteland Es hat mit Babel zu tun, die bei diesem spezifischen Code Stift verwendet wird –

Antwort

19

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

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

Um klar zu sein, Array.from() und Array.keys() erfordern eine ES6 polyfill, um in allen Browsern zu arbeiten.

12

Es scheint, das Problem ist, dass Codepen Ihren Code mit babel es2015-lose vorkompiliert.

In diesem Modus Ihre

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

wird

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

Und das ist, warum Sie ein Array mit einen Iterator zu sehen.

Mit es2015 Modus würden Sie

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())); 

erhalten, die wie gewünscht verhalten würden.

Weitere Informationen zu den Modi finden Sie unter ②ality - Babel 6: loose mode.

16

Ein Rundgang durch Array.from durch praktische Beispiele akzeptiert

Array.from auch ein zweites Argument, das

als Abbildungsfunktion verwendet wird

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

Das ist schön zu wissen weil Sie vielleicht Arrays generieren möchten, die manchmal komplexer sind als nur 0 bis N.

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 machen aus Generatoren auch

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 nur massiv mächtig. Die Menschen erkennen noch nicht einmal ihr volles Potenzial.

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"] 
 
}

Verwandte Themen