prefacio
El artículo anterior ha mencionado muchas veces que una matriz es un tipo especial de objeto. Introduce algunas características de las matrices en términos de tipo, criterio de matriz, valor de índice y atributo de longitud. Muchas de estas características especiales de las matrices están relacionadas con los objetos. Para obtener más información, consulte las características especiales de las matrices de JavaScript en la publicación de blog anterior (1) .
Además, lo que necesitamos saber es que aunque el índice de la matriz se puede usar como una cadena de nombre de clave como un objeto, aún son diferentes. Las matrices son colecciones dispuestas en orden numérico, mientras que los nombres de las propiedades de los objetos no están ordenados. Entonces, en la última publicación del blog, cuando usamos nombres de claves especiales (como cadenas, números negativos, etc.) para asignar valores a las matrices, estos valores no son elementos de la matriz.
Además de las funciones presentadas anteriormente, hay algunas funciones especiales que deben mencionarse sobre las matrices. Este artículo continuará presentándolas en profundidad para ayudarnos a comprender mejor las matrices en JavaScript.
Tres formas de crear arreglos
En el JS actual, hay aproximadamente tres formas de crear una matriz: sintaxis literal de matriz, constructor de matriz y Array.of().
Sintaxis literal de matriz
La creación de una matriz con sintaxis literal es el método más utilizado en JavaScript. Debido a su conveniencia y simplicidad, la mayoría de los códigos lo usarán.
const arr1 = [] // 创建一个空数组
const arr2 = [1, 2, true, null, 'hello'] // 给定数组的元素
console.log(arr2) // [1, 2, true, null, 'hello']
El código anterior utiliza una sintaxis literal para crear una matriz. Si no se proporciona ningún valor de elemento, se creará una matriz vacía.
Lo que debe entenderse es que la sintaxis literal de la matriz en realidad se basa en un uso simplificado del constructor Array.
constructor de matriz
El objeto Array en sí mismo es un objeto incorporado de JavaScript. Es functionun tipo y se puede usar como constructor. Como la mayoría de los objetos incorporados, no newimporta si usa el operador o no.
Por lo tanto, podemos crear un objeto de matriz llamando Array()o . new Array()El constructor de matrices puede usar varias formas de parámetros opcionales, pero el resultado será diferente según los parámetros.
- Cuando no se pasan parámetros, se devuelve una matriz vacía
Array() // []
- Cuando solo se pasa un parámetro, el rendimiento no es consistente
- Cuando el parámetro es 0, crea una matriz vacía
Array(0) // []
- Cuando el parámetro es un único entero positivo, se creará una matriz cuya longitud es el valor del parámetro, y todos los elementos de la matriz estarán vacíos (retorno indefinido)
const arr = new Array(10)
arr.length // 10
arr[2] // undefined
- Cuando el parámetro es un número entero no positivo, como un número negativo, un decimal, etc., se informará un error y no se podrá crear la matriz.
Array(10.6) // Uncaught RangeError: Invalid array length
Array(-6) // Uncaught RangeError: Invalid array length
El código anterior, los decimales y los números negativos, todos informan un error de longitud de matriz no válida.
Sin embargo, para los números que se pueden convertir automáticamente en enteros (el lugar decimal es 0), la matriz se puede crear normalmente, como se muestra en el siguiente código:
const arr = new Array(10.0)
arr.length // 10
arr[2] // undefined
- Cuando el parámetro es de otros tipos que no sean números, como valor de cadena, valor booleano, objeto, matriz, función, nulo, indefinido, etc., el parámetro se convertirá en el primer elemento de la nueva matriz y la longitud de la matriz es, naturalmente, 1.
Array('hello') // ['hello']
Array(true) //[true]
Array([30]) // [Array(1)]
Array(null) // [null]
- En el caso de un solo parámetro, si hay una coma final adicional en el parámetro, se ignorará y la matriz aún se puede crear normalmente:
Array(0,) // []
Array(true,) // [true]
- Al pasar varios parámetros
Todos los parámetros se convertirán en elementos de la nueva matriz, sin importar qué tipo de valor sea el parámetro.
Array(1, 2) // [1, 2]
Array(1, 2, true, null, 'hello') // [1, 2, true, null, 'hello']
Array(-1, 2.2, 3) // [-1, 2.2, 3]
Array(1, 2, 3,) // [1, 2, 3]
En el código anterior,
en la tercera línea, se agregan números negativos y decimales, y la matriz se puede crear normalmente; en
la cuarta línea, hay una coma final adicional en el parámetro, pero se ignorará.
Gama de()
Array.of(item…) es un método estático de matriz proporcionado por ES6, que también se puede usar para crear matrices.
Este método también proporciona parámetros opcionales, pero la diferencia con el constructor Array es que el Array.of()comportamiento es más consistente. No importa cuántos parámetros tenga y de qué tipo sea, se considerará como un elemento miembro de la nueva matriz. Por supuesto, si no se pasan parámetros, se generará una matriz vacía. Incluyendo números negativos y decimales, también se tratarán como elementos y no se informará ningún error.
Por ejemplo, Array.of(5)creará una matriz con un solo miembro (5) y una longitud de 1, y Array(5)creará una matriz con una longitud de 5 y todos los elementos estarán vacíos.
Por lo tanto, el método Array.of compensa las deficiencias causadas por la diferencia en los parámetros del constructor Array Además de la sintaxis literal, debemos hacer todo lo posible para reemplazar el constructor Array.
Array.of() // []
Array.of(5) // [5]
Array.of(1, 2, true, null, 'hello') // [1, 2, true, null, 'hello']
Array.of(-1) // [-1]
Array.of(2.2, 0) // [2.2, 0]
Como se puede ver en el código anterior, cuando usamos el método Array.of, todos los parámetros se usan como elementos de la matriz, lo que puede resolver completamente el problema de inconsistencia causado por el constructor Array.
Vacantes (elementos vacíos)
Una vacante significa que no hay ningún valor antes de una coma en la matriz y que está vacío. Dicho elemento es un elemento vacío, también llamado vacante.
Se permiten espacios en las matrices de JavaScript, y no se informarán errores de sintaxis u otras excepciones. Las matrices se pueden usar normalmente, por lo que debemos comprender algunas de sus características.
Ningún valor sigue a la coma, no crea un espacio y no afecta la matriz.
Veamos un ejemplo de una vacante:
const arr1 = [,]
const arr2 = [1, , , 4]
El código anterior es la expresión de vacantes en la matriz, donde arr1 tiene 1 vacante y arr2 tiene 2 vacantes entre el primer y el último elemento.
Como una existencia especial de matrices, las vacantes tienen algunas actuaciones básicas de la siguiente manera:
- Una ranura es un elemento normal de la matriz.
- Las ranuras se contarán en la longitud de la matriz, es decir, el atributo de longitud contendrá las ranuras
- Las ranuras vacías se pueden leer por índice, devolviendo indefinido.
const arr = [1, , , 4]
arr.length // 4
arr[2] // undefined
El código anterior define una matriz con 2 ranuras, la longitud de la matriz no se ve afectada, es 4 y devuelve indefinido al leer el valor de la ranura.
Además de las características anteriores, hay otros lugares a los que prestar atención.
borrar
El operador de eliminación puede eliminar las propiedades del objeto, por lo que también se puede usar en la matriz.
Cuando se utiliza el operador de eliminación para eliminar un elemento de matriz, se generará una vacante y el rendimiento del elemento también se ajustará a las características de la vacante.
const arr = ['a', 'b', 'c']
delete arr[1]
console.log(arr) // ['a', , 'c']
El código anterior usa delete para eliminar el segundo elemento de la matriz, formando una vacante en esta posición.
bucle a través de las ranuras
La vacante se trata como un elemento de matriz normal y se cuenta en el atributo de longitud, por lo que cuando atravesamos la matriz con vacantes, debemos tener cuidado, de lo contrario, causará algunos problemas innecesarios.
Para los principales puntos de atención al atravesar las brechas, se resumen a continuación:
- Las declaraciones de tres bucles for, while y for-of normalmente atravesarán la vacante y generarán el valor de la vacante como indefinido.
- declaración de bucle for-in, omitirá directamente el espacio vacío y no atravesará el espacio vacío.
- Dentro del método de instancia de la matriz:
- forEach, map, every, some, filter, reduce, flat, también omitirá directamente el espacio vacío;
- find, findIndex leerá la vacante y devolverá indefinido.
- indexOf, lastIndexOf, include, no puede leer el espacio vacío, porque no hay nada en el espacio vacío.
- Cuando se utilizan los métodos de claves, valores y entradas del objeto Object, el espacio vacío también se omite directamente.
const arr = [1, , , 4]
for (let i in arr) {
console.log(i)
} // 跳过空位，输出为 '0' 和 '3'
for (let i of arr) {
console.log(i)
} // 读取空位，输出为 1 undefined undefined 4
arr.forEach((vl) => {
console.log(vl)
}) // 跳过空位，输出为 5 2
Object.keys(arr) // 也是跳过空位，输出为 ['0', '3']
Los códigos anteriores son algunos ejemplos de recorrido, que son coherentes con el rendimiento resumido anteriormente y for-ofpueden leer vacantes. Otros, como for-in, forEache, Object.keysomiten vacantes directamente y no recorrerán la salida.
Cabe señalar que el slot devuelve undefined en lectura de índice o acceso de sintaxis parcial, pero no es igual a undefined Undefined no tiene todas las características de los slots. Si undefined es un elemento de matriz al atravesar, se puede leer en cualquier circunstancia.
Salida de cadena para ranuras de matriz
Además, cuando la matriz se emite como una cadena, la ranura también tiene su propia salida única.
- Cuando se usan los métodos join() y toString(), el elemento vacío genera solo una coma.
[1, , , 4].join() // '1,,,4'
[1, , , 4].toString() // '1,,,4'
- Cuando se usa el método JSON.stringify(), los espacios vacíos se muestran como
nullcadenas.
JSON.stringify([1, , , 4]) // '[1,null,null,4]'
en operador
El operador in se utiliza para verificar si existe una clave de propiedad de un objeto y devuelve un valor booleano.Las matrices pertenecen a objetos, por lo que también se pueden aplicar.
El nombre clave de la matriz es el valor del índice, podemos usar el valor del índice de la matriz para juzgar.
const arr = [1, 2, 3]
0 in arr // true
'2' in arr // true
3 in arr // false
En el código anterior, la matriz tiene tres elementos, el valor del índice es 0-2, y 3 no pertenece, y se devuelve falso.
Se ha introducido antes que el nombre clave del objeto es una cadena, y el valor de índice de la matriz puede usar números y cadenas.
Además, el operador in devuelve falso para espacios vacíos en la matriz:
const arr = [1, ,2]
0 in arr //true
1 in arr // false
En el código anterior, si el segundo elemento de la matriz es un elemento vacío, devuelve infalso al usar el juicio.