2016-10-07 23 views
12

Po googled to stwierdzono, że dwa roztwory:ES6 - generuje tablicę liczb

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

DATA1 wyświetlaczy [0, 1, ..., 7] jednak tylko dane wyświetla [ [object Array Iterator]] jak faktycznie widzę liczby.

Potrzebuję go dla niektórych iteracji liczbowych (część projektu Euler).

Wcześniej robiłem wiele wyzwań Eulera w Pythonie. Teraz zdecydowałem, że wrócę do niego i zrobię tyle, ile będę mógł w JS (jak najwięcej składni ES6), aby pomóc mi rozwinąć umiejętności js.

+3

Jeśli uruchomić 'dane var = [... Array (10) .keys()];' w przeglądarce Chrome (najnowsza stabilna) widzę numery podane na zewnątrz. Widzę "ArrayIterator", jeśli wykonuję tylko 'Array (10) .keys()'. –

+1

Czy ma to związek z codepenem? http://codepen.io/wasteland/pen/QKQGNo/?editors=1111 – Wasteland

+2

@Wasteland Ma to związek z Babel, który jest używany w tym określonym kodzie kodu. –

Odpowiedz

19

Oto proste rozwiązanie, które działa w codepen:

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

Żeby było jasne, Array.from() i Array.keys() wymagają PolyFill ES6 aby działać we wszystkich przeglądarkach.

12

Wydaje się, że problem polega na tym, że kodek kodu prekompiluje twój kod za pomocą babel es2015-loose.

W tym trybie, twój

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

staje

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

I dlatego można zobaczyć tablicę zawierającą iterator.

W trybie es2015 dostaniemy

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

które zachowują się zgodnie z oczekiwaniami.

Aby uzyskać więcej informacji o trybach, zobacz numer ②ality - Babel 6: loose mode.

16

Trasa z Array.from thru praktycznych przykładów

Array.from przyjmuje również drugiego parametru, który jest stosowany jako funkcja mapowania

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

to jest wiedzieć ponieważ możesz chcieć wygenerować tablice, które czasami są bardziej złożone niż tylko 0 przez 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]

Albo można zrobić tablice z generatorów, zbyt

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 jest po prostu masowo potężny. Ludzie nie zdają sobie jeszcze sprawy z jego pełnego potencjału.

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

Powiązane problemy