Tres formas de convertir no arreglos en arreglos en ES6

 

Las preguntas de la entrevista de Dachang comparten el banco de preguntas de la entrevista.

Bancos de preguntas de entrevistas de front-end y back-end (necesario para entrevistas) Recomendado: ★★★★★

Dirección: banco de preguntas de la entrevista de front-end   banco de preguntas de la entrevista de front-end web VS java banco de preguntas de la entrevista de back-end Daquan

A menudo queremos usar métodos de matriz, como forEach, filtero etc. somepara manejar tipos de datos que no son de matriz, luego en estos escenarios, necesitamos convertir no matrices en matrices, y se han agregado tres nuevos métodos de conversión de matriz en ES6 , respectivamente ** Array.form()**, Array.of() y el operador de propagación , los tres métodos de conversión tienen diferentes objetos de conversión, echemos un vistazo a ellos por separado.

matriz.desde()

El método de matriz de conversión Array.from()puede convertir el objeto en una matriz real. Hay dos tipos de objetos, a saber: objetos similares a matrices y objetos que contienen iteradores

Instancia de conversión de objetos tipo matriz

La forma de expresión del objeto similar a una matriz es una forma de objeto con 0, 1 número como clave, y después de la conversión Array.from(), su valor se convertirá en una forma de matriz

let arrObj = {
  "0": "猪痞恶霸",
  "1": "fzf404",
  length:2
};
let arr = Array.from(arrObj);
console.log(arr); // ['猪痞恶霸', 'fzf404']
复制代码

Como arriba, definimos un arrObjobjeto similar a una matriz y Array.from()lo convertimos en una matriz a través del método de conversión ['猪痞恶霸', 'fzf404'].

Los lectores pueden leer aquí y querer decir: ¿De qué sirve convertir a una matriz? ¿No puede ser sintaxis óptica? Entonces, veamos la aplicación práctica real de convertir un objeto similar a una matriz en una matriz.

Aplicación de conversión de objetos tipo matriz

En el desarrollo, usaremos la lista de nodos para operar el DOM. Al document.querySelectorAll()obtenerla, como se muestra en la figura a continuación, podemos entender claramente que la lista de nodos que obtenemos es un objeto similar a una matriz, por lo que algunos métodos de la matriz no pueden ser utilizado directamente, por ejemplo, forEacho filteretc.

Por lo tanto, debe usar Array.form()el método para convertirlo en una matriz real y luego usar el método de matriz para realizar algunas operaciones adicionales

Contiene una instancia de conversión de objeto iterador

Array.form()También puede convertir objetos que contienen iteradores en arreglos reales, como cadenas, mapo set, echemos un vistazo a su uso

let str = "猪痞恶霸"
let strArr = Array.from(str)
console.log(strArray) // [ '猪', '痞', '恶', '霸' ]
复制代码

Tome una cadena como ejemplo. Después de convertirse en una matriz, cada elemento corresponde a cada carácter de la cadena. Solíamos preocuparnos por cortar la cadena, pero necesitamos usar cortes regulares. Ahora solo se necesita una línea de código para completar la separación de la cuerda Array.from(str).

No daré ningún ejemplo de la aplicación aquí. La esencia de la aplicación de matriz de conversión es usar mejor el método de matriz para manipular y procesar datos, y Array.fromhay un segundo parámetro

El segundo parámetro de Array.from()

El segundo parámetro es más como un mapmétodo de matriz, como una función de devolución de llamada para procesar cada elemento de los datos convertidos.

let str = "猪痞恶霸"
let _str = Array.form(str, (item) => {
    return item+item
})
console.log(_str) // [ '猪猪', '痞痞', '恶恶', '霸霸' ]
复制代码

En la operación anterior, simulé el procesamiento de cadenas, y las cadenas regulares a menudo se pueden usar para procesar cadenas. Por supuesto, esto puede estar asociado con el hecho de que podemos usar este método para procesar la entrada del usuario y también evitar entradas maliciosas.

El anterior es el método para convertir un objeto similar a una matriz o un objeto que contiene un iterador en una matriz Array.from()Veamos el segundo método a continuación.Array.of

Gama de()

Array.of()Un conjunto de valores se puede convertir en un arreglo, de hecho, su aplicación práctica real es inicializar el arreglo.

let arr = Array(1,2,3)
console.log(arr) // [ 1, 2, 3 ]
复制代码

Las personas que lo conocen dirán: ¿No está ahí Array(), por qué usarlo de forma extravagante Array.of()?

De hecho Array.of(), la apariencia no es accidental, compensa Array()la deficiencia de ser un constructor de matrices.

let arr = new Array(3)
console.log(arr) // [ <3 empty items> ]
复制代码

Como arriba, solo se pasa el arreglo 3que se obtiene como parámetro , y cuando pasamos 3 o más parámetros, el arreglo construido es diferente a pasar menos de 3, es decir, el arreglo construido no es Unite[ <3 empty items> ][,,,]Array

let arr = new Array(3, 2, 1);
console.log(arr); // [ 3, 2, 1 ]
复制代码

Es por eso que usas Array.of()en su lugarArray

Después de ver estos dos métodos para convertir arreglos directamente usando arreglos, veamos cómo usar el operador de dispersión para convertir arreglos.

operador de propagación

Los objetos que contienen iteradores se pueden convertir en matrices reales utilizando el operador de extensión, como listas de nodos u objetos similares a matrices. Las llamadas listas de nodos a menudo obtienen la lista dom cuando usamos operaciones dom y luego la convertimos en una matriz. lo cual es conveniente Use algunos buenos métodos de matriz.

let domlist = document.querySelectorAll('div');
let arr = [...domlist]
复制代码

Un objeto similar a una matriz debe contener un iterador antes de que se pueda convertir con este método. Si no lo contiene, se puede Array.from()convertir con

let objArr = {
    '0':'hogskin',
    '1':'猪痞恶霸'
}
console.log([...objArr]) // objArr is not iterable
复制代码

mapTambién puede setusar este método para convertir, por supuesto, también se puede usar la función generadora, porque devuelve un objeto transversal, que contiene el iterador.

por fin

Eso es todo por los tres métodos ES6 de conversión de arreglos. Bienvenido a prestar atención a mi columna avanzada de JS. Soy un acosador y un estudiante de front-end que está decidido a ser una colegiala.

 

Las preguntas de la entrevista de Dachang comparten el banco de preguntas de la entrevista.

Bancos de preguntas de entrevistas de front-end y back-end (necesario para entrevistas) Recomendado: ★★★★★

Dirección: banco de preguntas de la entrevista de front-end   banco de preguntas de la entrevista de front-end web VS java banco de preguntas de la entrevista de back-end Daquan