[JavaScript] - Extensión de matriz ES6 Array.from() y Array.of()

 Array.from()

Array.from() Los métodos se utilizan para convertir dos tipos de objetos en matrices reales: objetos similares a matrices y objetos iterables (incluidas las nuevas estructuras de datos ES6 Set y Map).

A continuación se muestra un objeto similar a una matriz, Array.from()conviértalo en una matriz real.

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5 的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6 的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

 En aplicaciones prácticas, los objetos similares a matrices comunes son colecciones de NodeList devueltas por operaciones DOM y argumentsobjetos dentro de funciones. Array.from()puede convertirlos en arreglos reales.

// NodeList 对象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
  return p.textContent.length > 100;
});

// arguments 对象
function foo() {
  var args = Array.from(arguments);
  // ...
}

En el código anterior, el querySelectorAll()método devuelve un objeto similar a una matriz, que se puede convertir en una matriz real antes de usar el filter()método.

Siempre que sea una estructura de datos que implemente la interfaz Iterator, se Array.from()puede convertir en una matriz.

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
​
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

En el código anterior, las estructuras String y Set tienen la interfaz Iterator, por lo que se pueden Array.from()convertir en arreglos reales.

Si el argumento es una matriz real, Array.from()se devuelve una nueva matriz idéntica.

Array.from([1, 2, 3])
// [1, 2, 3]

Vale la pena recordar que el operador de propagación ( ...) también puede convertir algunas estructuras de datos en arreglos.

// arguments对象
function foo() {
  const args = [...arguments];
}
​
// NodeList对象
[...document.querySelectorAll('div')]

La interfaz del iterador ( ) se llama detrás del operador Symbol.iteratorde propagación y, si un objeto no implementa esta interfaz, no se puede convertir. Array.from()Los métodos también admiten objetos similares a matrices. Los llamados objetos tipo arreglo tienen solo una característica esencial, es decir, deben tener lengthatributos. Por lo tanto, cualquier lengthobjeto con propiedades se puede Array.from()convertir en una matriz mediante métodos y el operador de dispersión no se puede convertir en este momento.

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]

En el código anterior, Array.from()se devuelve una matriz con tres miembros y el valor de cada posición es undefined. El operador de propagación no puede convertir este objeto.

Para los navegadores que no han implementado este método, se puede usar el método en su Array.prototype.slice()lugar.

const toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();

Array.from()También puede aceptar una función como segundo parámetro, actuando como un map()método de matriz, para procesar cada elemento y colocar el valor procesado en la matriz devuelta.

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
​
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

El siguiente ejemplo es para extraer el contenido de texto de un conjunto de nodos DOM.

let spans = document.querySelectorAll('span.name');
​
// map()
let names1 = Array.prototype.map.call(spans, s => s.textContent);
​
// Array.from()
let names2 = Array.from(spans, s => s.textContent)

El siguiente ejemplo convierte un miembro de una matriz con un valor booleano falseen 0.

Array.from([1, , 2, , 3], (n) => n || 0)
// [1, 0, 2, 0, 3]

Otro ejemplo es el tipo que devuelve varios datos.

function typesOf () {
  return Array.from(arguments, value => typeof value)
}
typesOf(null, [], NaN)
// ['object', 'object', 'number']

Si map()la palabra clave se usa en la función , el tercer parámetro thistambién se puede pasar para el enlace .Array.from()this

Array.from()Varios valores se pueden convertir en matrices reales y maptambién se proporcionan funciones. En realidad, esto significa que siempre que tenga una estructura de datos primitiva, primero puede procesar sus valores, luego convertirlos en una estructura de matriz canónica y luego usar una gran cantidad de métodos de matriz.

Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']

En el código anterior, Array.from()el primer parámetro de , especifica el número de veces que se ejecuta el segundo parámetro. Esta característica hace que el uso de este método sea muy flexible.

Array.from()Otra aplicación es convertir una cadena en una matriz y luego devolver la longitud de la cadena. Debido a que maneja varios caracteres Unicode correctamente, evita \uFFFFun error en el que JavaScript cuenta los caracteres Unicode mayores de dos como dos caracteres.

function countSymbols(string) {
  return Array.from(string).length;
}

Gama de()

Array.of()El método se utiliza para convertir un conjunto de valores en una matriz.

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

El objetivo principal de este método es compensar las deficiencias del constructor de matrices Array(). Debido a que el número de parámetros es diferente, Array()el comportamiento será diferente.

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

En el código anterior, cuando el Array()método no tiene parámetros, un parámetro o tres parámetros, los resultados devueltos son diferentes. Array()Se devuelve una nueva matriz de parámetros solo si hay al menos 2 parámetros. Cuando el parámetro tiene solo un entero positivo, en realidad especifica la longitud de la matriz.

Array.of()Básicamente se puede usar para reemplazar Array()o new Array(), y no hay sobrecarga debido a diferentes parámetros. Se comporta de manera muy uniforme.

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

Array.of()Siempre devuelve una matriz de valores de parámetros. Si no hay argumentos, se devuelve una matriz vacía.

Array.of()El método se puede simular con el siguiente código.

function ArrayOf(){
  return [].slice.call(arguments);
}