objetos - filter json javascript

ES6-generar una matriz de números

Question

Habiendo buscado en Google para esto encontré dos soluciones:

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

data1 muestra [0, 1, ..., 7] sin embargo, los datos solo muestran [[object Array Iterator]] ¿cómo puedo ver los números?

Lo necesito para algunas iteraciones sobre números (parte del proyecto Euler).

Anteriormente hice muchos desafíos de Euler en Python. Ahora decidí volver a visitarlo y hacer todo lo que pueda en JS (la mayor sintaxis posible de ES6) para ayudarme a desarrollar mis habilidades js.

Answer 1

Aquí hay una función de range que toma los parámetros de start , end y step . Devuelve una matriz que comienza desde el start hasta el número end con incrementos de tamaño.

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]

Un paso más allá, si quieres un rango que incluya el end también.

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]

Answer 2

Aquí hay una solución simple que funciona en codepen:

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

Para que quede claro, Array.from() y Array.keys() requieren un polyfill ES6 para funcionar en todos los navegadores.

Answer 3

Parece que el problema es que Codepen precompila tu código usando babel es2015-loose.

En ese modo, tu

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

se convierte en

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

Y es por eso que ves una matriz que contiene un iterador.

Con el modo es2015 obtendrías

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

que se comportaría como se desea.

Consulte Calidad - Babel 6: modo suelto para obtener más información acerca de los modos.

Answer 4

Refinamiento adicional, produce una matriz con valor a partir de 1:

Array.from(Array(10).keys(), n => n + 1)

Answer 5

Todas las otras respuestas aquí crean una matriz intermedia temporal, que no es necesaria.

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

Esencialmente, se trata de una función de mapa en la que asigna desde el índice de matriz a lo que desee, para cualquier número de elementos.

Answer 6

Un recorrido por Array. Desde ejemplos prácticos.

Array.from también acepta un segundo argumento que se utiliza como función de mapeo

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

Es bueno saberlo porque es posible que desee generar arreglos que a veces son más complejos que solo de 0 a 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]

O también puedes hacer matrices de generadores

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 es masivamente poderoso. La gente ni siquiera se da cuenta de todo su potencial todavía.

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