Qué tienen de especial las matrices de JavaScript (3): explicación detallada de los objetos similares a matrices

La publicación de blog anterior presentó algunas características de las matrices en JavaScript. A través de un análisis en profundidad de estas características de matriz, podemos profundizar nuestra comprensión del conocimiento relacionado con matrices. Para obtener detalles, consulte la publicación de blog: Matriz de JavaScript (1): tipo, juicio, índice y atributo de longitud Matriz de JavaScript (2): método de creación, constructor, elemento vacío y operador in De hecho, en el desarrollo front-end, además de las matrices, también hay un objeto similar a una matriz, generalmente llamado matriz de clase o pseudo-matriz, que también es un punto de conocimiento que
debemos
dominar
.

¿Qué es una matriz de clase?

En primer lugar, intentemos agregar una definición simple a la matriz de clase: un objeto (no una matriz) con una propiedad de longitud. La característica central de un tipo de matriz es que tiene una propiedad de longitud, y los objetos con una propiedad de longitud que no son matrices reales pueden identificarse básicamente como similares a una matriz.
Aunque esta definición es muy simple y solo destaca el atributo de longitud, aún podemos resumir las características básicas de los arreglos de clases de la siguiente manera:

tiene una propiedad de longitud
El atributo de longitud es un valor no dinámico y no cambiará a medida que cambie el elemento.
Se puede acceder a los elementos de atributo usando subíndices de índice numérico
No es una matriz, y no hay métodos correspondientes a las matrices.
Puede usar la instrucción for, etc. para recorrer
Se puede convertir en una matriz real de cierta manera

Crear un objeto similar a una matriz

De acuerdo con las características del tipo de matriz mencionado anteriormente, podemos crear un objeto similar a una matriz por nosotros mismos, que es relativamente simple y solo necesita tener una longitud, como se muestra a continuación:

const al = {
    
     0: 111, 1: 222, 2: 333, length: 3 }
for (let i = 0; i < al.length; i++) {
    
    
  console.log(al[i])
}
// 111
// 222
// 333

El código anterior crea un objeto con un atributo de longitud de 3, atraviesa el objeto a través del bucle for y genera el valor correspondiente con el subíndice.
El atributo de longitud no se agregará dinámicamente. Por ejemplo, agregamos un atributo al objeto al, pero el valor de longitud sigue siendo 3:

al[3] = 444
console.log(al.length) // 3

Si el objeto de matriz de esta clase se convierte en una matriz real, se puede realizar la operación de matriz.

De hecho, podemos omitir otros atributos y solo mantener la longitud, que también se puede usar como una matriz de clases:

const al = {
    
     length: 3 }

Aunque podemos crear arreglos de clases nosotros mismos de manera similar, en el proceso de desarrollo real, casi nadie maneja esto.
En el desarrollo front-end real, los objetos tipo matriz con los que entran en contacto son todos objetos de varios objetos tipo matriz proporcionados por el lenguaje JavaScript o el entorno web.
Antes de presentar estos objetos tipo matriz, veamos cómo un objeto tipo matriz se puede convertir en una matriz.

Cómo convertir una matriz de clase en una matriz

Un objeto similar a una matriz es solo un objeto similar a una matriz y carece de muchos métodos correspondientes. A veces, es posible que necesitemos convertir una matriz similar a una matriz en una matriz para una mejor operación. En este momento, necesitamos encontrar un método de conversión conveniente y efectivo.
Los métodos de conversión comúnmente utilizados en la actualidad generalmente se dividen en las siguientes categorías, y los presentaremos uno por uno.

matriz.desde()

El primero es el nuevo método estático de matriz proporcionado por ES6: Array.from, que se utiliza para crear una nueva matriz a partir de una matriz de clase o un objeto iterable. Básicamente, Array.from puede convertir cualquier objeto con una propiedad de longitud en una matriz.
Sintaxis: Array.from(arrayLike, mapFn, thisArg).
Descripción de tres parámetros:

arrayLike: objeto similar a una matriz u objeto iterable
mapFn: parámetro opcional, la nueva matriz se devolverá después de ser procesada por esta función
thisArg: parámetro opcional, el este punto especificado al ejecutar mapFn

Aquí hay un ejemplo:

const al = {
    
     0: 111, 1: 222, 2: 333, length: 3 }
const arr = Array.from(al)
console.log(arr) // [111, 222, 333]
console.log(arr.length) // 3
console.log(Array.isArray(arr)) // true

En el código anterior, personalizamos un objeto con una propiedad de longitud y luego lo convertimos a través del método Array.from para obtener una nueva matriz con una longitud de 3.
Este método es simple y conveniente, y debería ser la primera opción en la mayoría de los casos de desarrollo front-end actual.

Array.prototype.slice.call()

Antes de que saliera ES6, si desea convertir mejor la matriz de clase, generalmente usa este método: Array.prototype.slice.call().
Se basa en el método slice() de la matriz y apunta esto en el momento de la ejecución al objeto similar a una matriz, de modo que el objeto similar a una matriz devuelve una nueva matriz utilizando el método slice() como una matriz, por lo que el objeto similar a una matriz con el atributo de longitud se puede convertir en una matriz.

const al = {
    
     0: 111, 1: 222, 2: 333, length: 3 }
const arr = Array.prototype.slice.call(al)
console.log(arr) // [111, 222, 333]

El código anterior define el mismo objeto similar a una matriz que Array.from, y la conversión a través de Array.prototype.slice.call tiene el mismo efecto.

otros metodos

Los dos métodos anteriores son la conversión más correcta y efectiva, y se recomiendan para el uso diario.
Además, hay otras formas, pero cada una tiene sus propios defectos, ya sea más complicadas o no adecuadas para algunos objetos tipo matriz, por lo que no se recomienda.

for bucle de procesamiento
Defina una nueva matriz vacía y agregue cada valor de elemento de propiedad del objeto similar a una matriz a la nueva matriz recorriendo las propiedades del objeto similar a una matriz.
Este método parece ser relativamente problemático.
El operador de extensión (…)
El operador de extensión trabaja principalmente en objetos iterables.Las colecciones (matrices, conjuntos, mapas) en JavaScript son todos objetos iterables, así como cadenas y argumentos.
El operador de propagación informará un error para los objetos no iterables.

[...'hello'] // ['h', 'e', 'l', 'l', 'o']
[...{
    
     length: 3 }] // Uncaught TypeError: {(intermediate value)} is not iterable
Array.from({
    
     length: 3 }) // [undefined, undefined, undefined]

En el código anterior, a través del operador de extensión, la cadena se puede convertir en una matriz, pero el objeto similar a una matriz personalizada no puede, y se informa un error; al usar Array.from, se convierte en una matriz { length: 3 }con 3 elementos.undefined

objeto tipo matriz

El objeto similar a una matriz más común y reconocido en el desarrollo front-end es el objeto de parámetro de argumentos de la función. Además, la cadena también es un objeto similar a una matriz, y hay otras API proporcionadas por varios entornos web.
Si los divides en dos categorías:

Los objetos JS
son objetos que pertenecen al lenguaje JavaScript y también existen en nodejs.
Tales como argumentos, cadena, TypeArray, matriz de clase personalizada, etc.
Objetos web
Los objetos que dependen del entorno web (generalmente un navegador) no pertenecen al lenguaje JavaScript.
Como FileList, objeto de lista DOM, almacenamiento de datos (como localStorage, sessionStorage), etc.

A continuación, presentaremos estos objetos tipo matriz uno por uno.

Objeto similar a una matriz de JavaScript

argumentos

arguments es un objeto dentro de la función en JS, que se usa para manejar un número indefinido de parámetros y es un objeto similar a una matriz.
Antes de la introducción de ES6, el uso de argumentos todavía era muy extenso, pero después de que ES6 introdujera parámetros predeterminados y parámetros extendidos, su uso disminuyó.

Convierta a una matriz con el siguiente ejemplo:

function test () {
    
    
  console.log(Array.prototype.toString.call(arguments))
  console.log(Array.from(arguments))
  console.log([...arguments], Array.prototype.slice.call(arguments))
}
test(23)
// [object Arguments]
// [23]
// [23] [23]

El código anterior muestra que el objeto tiene un juicio de tipo único Argumentsy los argumentos del objeto se pueden procesar con el operador de extensión.

Tenga en cuenta que no hay un objeto de argumentos dentro de una función de flecha.

cadena

Una cadena en JavaScript también es un objeto similar a una matriz, que tiene una propiedad de longitud a la que se puede acceder a través de un índice numérico de subíndice, o convertirla en una matriz, y cada carácter de la cadena se convierte en un elemento de la nueva matriz.

const str = 'abc'
str.length // 3
str[1] // 'b'
Array.from(str) // ['a', 'b', 'c']
[...str] // ['a', 'b', 'c']

String tiene un método de instancia splitque puede procesar la cadena de acuerdo con el delimitador pasado y devolver una matriz con cada subcadena dividida como un elemento:

'abc'.split('') // ['a', 'b', 'c']
'abc'.split('b') // ['a', 'c']

El código anterior,
cuando se utiliza el carácter nulo como delimitador, divide cada carácter en elementos de matriz, que es lo mismo que el método de conversión de la matriz de clase.
Cuando el carácter se usa bcomo delimitador, los elementos de matriz devueltos solo tienen 2.

Debido a la flexibilidad del delimitador de operación dividida, puede brindarnos comodidad en el procesamiento de cadenas, por lo que este método se usa a menudo y la conversión de matriz de clase rara vez se usa.

Matriz de tipo TypeArray

Typed array también es un objeto similar a una matriz, que proporciona un mecanismo para acceder a datos binarios en el búfer de memoria.Tiene 11 objetos, como Uint8Array, Uint8ClampedArray, Int32Array, Float64Array, etc. El conocimiento específico se puede encontrar en la publicación del blog Resumen de conocimientos binarios front-end

Los arreglos tipados tienen la mayoría de los mismos métodos de instancia utilizados para el recorrido que los arreglos, pero no son arreglos reales, no se pueden cambiar dinámicamente y no se admiten métodos para modificar arreglos como empujar, abrir, cambiar y cancelar cambios, y el juicio de tipos no es un arreglo:

const u8 = new Uint8Array()
u8 instanceof Uint8Array // true
Array.isArray(u8) // false
[...u8] // []
Array.from(u8) // []

Del código anterior, se puede ver que la matriz de tipo no es una matriz real, pero se puede convertir en una matriz a través del operador de propagación (también hay otros métodos disponibles).
Por supuesto, el escenario de uso de las matrices tipeadas es generalmente para procesar datos binarios, y es suficiente recorrer y leer los datos para realizar algunas operaciones, y no hay mucha necesidad de conversión.

Otros objetos similares a matrices JS

El objeto similar a una matriz personalizada
se introdujo anteriormente y casi no se usa en el desarrollo.
Como objeto, la función función
también tiene una propiedad de longitud, por lo que también se puede convertir en una matriz.
El atributo de longitud de la función indica el número de parámetros.Después de convertirlo en una matriz, indica que hay varios elementos, pero los valores de los elementos no están definidos.
```
const fun = (al) => {
      
      }
fun.length // 1
Array.from(fun) // [undefined]
```

Objeto de matriz similar a API web

Lista de archivos

El objeto FileList es un objeto similar a una matriz que usamos a menudo, principalmente en el proceso de carga de archivos. Después de seleccionar un archivo, el objeto front-end se usa para recibir información del archivo. Es el objeto que puede leer datos de uno o varios archivos.

FileList es un objeto que tiene una propiedad de longitud y el valor del índice de propiedad es un número, y cada una de sus propiedades de submiembro es un Fileobjeto que maneja la información del archivo.

inputFile.addEventListener('change', (e) => {
    
    
  const files = e.target.files
  console.log(Array.from(files))
})
// [File]

El código anterior es para escuchar el evento de cambio de un control de carga, leer la lista de archivos correspondiente y convertir la salida en una matriz, y los elementos son objetos de archivo.

En general, no hay necesidad de convertir, solo recorrer y leer FileList directamente. El conocimiento relevante de la carga de archivos se puede ver en las 4 formas de
carga de archivos de publicaciones de blog .

Tipo matriz en DOM

En el desarrollo web, las operaciones DOM también tienen muchos objetos similares a matrices, como la colección de elementos HTMLCollection, el nodo NodeList, etc.

Colección HTML

HTMLCollection proviene de objetos de elementos de nodo como el documento de la página, principalmente varios atributos:

document.links: devuelve todos los elementos del enlace
document.forms: devuelve todos los elementos del formulario
document.images: devuelve todos los elementos de la imagen
document.scripts: devuelve todos los elementos del script
document.embeds: devuelve todos los objetos incrustados incrustados
Element.children: Devuelve todos los elementos secundarios del nodo actual

const links = document.links
Object.prototype.toString.call(links) // '[object HTMLCollection]'
const linkArr = Array.from(links) // []
Array.isArray(linkArr) // true

El código anterior lee todos los enlaces en la página y devuelve un objeto de matriz similar a HTMLCollection que se puede convertir en una matriz correspondiente. No hay enlaces en la página actual, por lo que se devuelve una matriz vacía.

lista de nodos

La lista de nodos (NodeList) obtenida por los siguientes métodos o propiedades:

getElementsByTagName: devuelve todos los nodos con el nombre de etiqueta HTML especificado
getElementsByClassName: devuelve todos los nodos con el nombre de atributo de clase especificado
getElementsByName: devuelve todos los nodos con el atributo de nombre especificado
querySelectorAll: Devuelve todos los nodos que coinciden con el selector dado
document.childNodes: devuelve todos los nodos secundarios

const divList = document.querySelectorAll('div')
Array.isArray(divList) // false
Object.prototype.toString.call(divList) // '[object NodeList]'
divList.length // 4
const divArr = [...divList] //  [div, div#clickInput, div#name, div#dropArea]
Array.isArray(divArr) // true

El código anterior querySelectorAlllee todos los divs en la página y obtiene un objeto NodeList, que es un objeto similar a una matriz y se puede convertir en una matriz real a través del operador de propagación.

Otros objetos similares a matrices relacionados con DOM

Los siguientes son algunos objetos similares a matrices comunes en las operaciones DOM:

document.styleSheets: devuelve todas las hojas de estilo (StyleSheetList)
atributos: devuelve todos los atributos de los elementos del nodo (NamedNodeMap)
conjunto de datos: devuelve todos los datos adicionales en el elemento de nodo (DOMStringMap)
classList: Devuelve todas las clases de estilo en el elemento de nodo (DOMTokenList)

Todos los objetos en el DOM son proporcionados por DOM-API a las llamadas de JavaScript, porque no solo lo usa JS, por lo que es más apropiado usar matrices de clase.

Otros objetos de matriz similares a la Web

ventana
El objeto ventana también tiene longitud, ¿así que también es un objeto tipo matriz?
Sí, el atributo de longitud de la ventana indica el número de marco/iframe que tiene la página.
Entonces también se puede convertir en una matriz:
```
window.length // 0
Array.from(window) // []
```
La página actual no tiene marco, la longitud es 0 y se convierte en una matriz vacía.
DataTransferItemList se usa para una propiedad de solo lectura del objeto
leído desde el evento de arrastrar o pegar.También hay una propiedad de solo lectura en el mismo nivel , que también es un objeto similar a una matriz , que se presentó anteriormente. En el evento de pegado, el contenido de los datos pegados se puede leer a través de este objeto.DatatransferitemsfilesFileList
Almacenamiento de datos
Los mecanismos de almacenamiento de datos en el navegador, como sessionStoragey localStorage, son en realidad objetos similares a matrices con una propiedad de longitud que se puede convertir.
```
localStorage.length // 2
Array.from(localStorage) // [undefined, undefined]
```
El código anterior es el procesamiento de localStorage, que tiene dos valores, pero debido a que es un par clave-valor de cadena, no se puede convertir en un índice digital, por lo que ambos elementos de la matriz no están definidos.

Resumir

Este artículo describe qué es un objeto similar a una matriz, sus características principales, cómo crear un objeto similar a una matriz y varias formas de convertir un objeto similar a una matriz en una matriz real. Luego, también presenta varios objetos similares a una matriz existentes que se pueden encontrar en el desarrollo front-end.
De hecho, la mayoría de los objetos tipo matriz no necesitan convertirse especialmente en matrices, y se pueden recorrer directamente, pero un conocimiento profundo de estos objetos tipo matriz también es indispensable en el desarrollo front-end.