【06】ES6: Extensión de matriz

1. Operador de extensión

El operador de dispersión (spread) son tres puntos (…). Es la operación inversa del parámetro rest, convirtiendo una matriz en una secuencia de parámetros separados por comas.

1. Gramática básica

[...array] // array表示要转换的数组

console.log(...[1, 2, 3]) // 1 2 3
console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5
[...document.querySelectorAll('div')] // [<div>, <div>, <div>]

2.Proposito

(1) Copiar matriz

Las matrices son tipos de datos compuestos. Si las copia directamente, solo copia el puntero a la estructura de datos subyacente en lugar de clonar una matriz nueva.

// 存在问题：a2 并不是 a1 的克隆，而是指向同一份数据的另一个指针。修改 a2，会直接导致a1 的变化。
const a1 = [1, 2]
const a2 = a1
a2[0] = 2
a1 // [2, 2]

// ES5 中用变通方法复制数组（浅拷贝）
const a1 = [1, 2]
const a2 = a1.concat()

// 使用扩展运算符复制数组（浅拷贝）
const a1 = [1, 2]
const a2 = [...a1]

(2) Fusionar matrices

La matriz fusionada es solo una copia superficial, por lo que debe prestar atención al usarla.

const arr1 = ['a', 'b']
const arr2 = ['c']
const arr3 = ['d', 'e']

// ES5 的合并数组
arr1.concat(arr2, arr3) // [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]

(3) Combinado con asignación desestructurante

El operador de dispersión se puede combinar con la asignación de desestructuración para generar matrices.

const arr = [1, 2, 3]
// ES5
const first = arr[0], rest = arr.slice(1)
// ES6
const [first, ...rest] = arr

console.log(first) // 输出 1
console.log(rest) // 输出 [2, 3]

Si se utiliza el operador de extensión para la asignación de matrices, solo se puede colocar en la última posición del parámetro; de lo contrario, se informará un error.

const [...butLast, last] = [1, 2, 3, 4, 5] // 报错
const [first, ...middle, last] = [1, 2, 3, 4, 5] // 报错

(4) Convertir cadena en matriz

[...'hello'] // [ "h", "e", "l", "l", "o" ]
// ES6 之前字符串转数组是通过：'hello'.split('');

(5) Convertir una matriz en una matriz

// arguments
function func() {
    
    
    console.log(arguments) // [Arguments] { '0': 1, '1': 2 }
    console.log([...arguments]) [ 1, 2 ]
}
func(1, 2)

// 任何定义了遍历器（Iterator）接口的对象。都可以用扩展运算符转为真正的数组。
let nodeList = document.querySelectorAll('div')
let array = [...nodeList]

(6) Convertir matriz en matriz de parámetros (transferencia de parámetros de función)

Convierta una matriz en una secuencia de parámetros separados por comas que se puedan pasar fácilmente a una función.

const arr = [1, 2, 3]

function sum(a, b, c) {
    
    
	return a + b + c
}

console.log(sum(...arr)) // 输出 6

2.Array.de()

Los métodos similares a una matriz no se pueden utilizar directamente. Primero debe convertir la matriz similar a una matriz en una matriz.

El nuevo método de matriz ES6, Array.from (), que se utiliza para convertir objetos similares a matrices (tipo matriz) y objetos transitables (iterables) en matrices reales para su uso (incluidas las nuevas estructuras de datos Set y Map de ES6).

gramática básica

Array.from(arrayLike, mapFn, thisArg)

parámetro	describir
matrizMe gusta	Objeto similar a una matriz u objeto iterable que desea convertir en una matriz
mapaFn	Si se especifica este parámetro, cada elemento de la nueva matriz ejecutará la función de devolución de llamada
esteArg	Parámetro opcional, este objeto al ejecutar la función de devolución de llamada mapFn

matrizMe gusta

Cualquier objeto con una propiedad de longitud se puede convertir en una matriz mediante el método Array.from().

const arrLike = {
    
    
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
}

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

// ES6 的写法
var arr = Array.from(arrLike)

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

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

/* 部署了 Iterator 接口的数据结构 */
Array.from('hello') // ['h', 'e', 'l', 'l', 'o']

const namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

const map = new Map([[1, 2], [2, 4], [4, 8]])
Array.from(map) // [[1, 2], [2, 4], [4, 8]]

// 数组对象，Array.from()会返回一个一模一样的新数组
Array.from([1, 2, 3]) // [1, 2, 3]

// 有 length 属性的对象
Array.from({
    
     length: 3 }) // [undefined, undefined, undefined]

función de devolución de llamada mapFn

El segundo parámetro en Array.from es una función de devolución de llamada similar a la función de mapa. La función de devolución de llamada recibirá cada elemento de la matriz como un parámetro entrante y luego procesará el valor entrante para obtener una nueva matriz. Array.from(obj, mapFn, thisArg) también se puede reescribir usando map como Array.from(obj).map(mapFn, thisArg).

Array.from(arrayLike, x => x * x)
// 等同于
Array.from(arrayLike).map(x => x * x)

Array.from([1, 2, 3], x => x * x) // [1, 4, 9]

// 取出一组 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)

esteArg

El tercer parámetro en Array.from puede vincular el punto de esto en la función de devolución de llamada. Este parámetro es muy útil. Podemos separar los datos procesados ​​del objeto de procesamiento y encapsular varios métodos de procesamiento de datos en diferentes objetos, el método de procesamiento utiliza el mismo nombre.

Al llamar a Array.from para convertir el objeto de datos, se pueden inyectar diferentes objetos de procesamiento según la situación real para obtener diferentes resultados, lo cual es adecuado para el desacoplamiento.

// 定义一个 obj 对象可以认作是，Array.from 回调函数中处理数据的方法集合，handle 是其中的一个方法，把 obj 作为第三个参数传给 Array.from 这样在回调函数中可以通过 this 来拿到 obj 对象。
let obj = {
    
    
  handle: function(n){
    
    
    return n + 2
  }
}

Array.from([1, 2, 3, 4, 5], function (x){
    
    
  return this.handle(x)
}, obj) // [3, 4, 5, 6, 7]

3. Matriz.de()

El método Array.of() 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 la cantidad de parámetros es diferente, el comportamiento de Array() será diferente.

Array() // []
Array(3) // [, , ,] 参数只有一个正整数时，实际上是指定数组的长度
Array(3, 11, 8) // [3, 11, 8] 返回由参数组成的新数组

En el código anterior, el método Array() devuelve resultados diferentes cuando no tiene parámetros, tiene uno o tres parámetros. Array() devolverá una nueva matriz que consta de parámetros solo si el número de parámetros es al menos 2. Cuando el parámetro tiene solo un número entero positivo, en realidad especifica la longitud de la matriz.

Array.of() se puede utilizar básicamente para reemplazar Array() o new Array(), y no hay sobrecargas debido a diferentes parámetros. Su comportamiento es 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 argumentos. Si no hay parámetros, se devuelve una matriz vacía.

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

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

4. Métodos de instancia

1、copiar dentro()

Dentro de la matriz actual, copia los miembros en la posición especificada en otras posiciones (los miembros originales se sobrescribirán) y luego devuelve la matriz actual. Este método cambiará la matriz original.

Array.prototype.copyWithin(target, start = 0, end = this.length)

parámetro	describir
objetivo	Parámetros requeridos. Comience a reemplazar datos desde esta posición. Si es un valor negativo, representa el recíproco.
comenzar	Parámetros opcionales. Comience a leer datos desde esta posición, que por defecto es 0. Si es un valor negativo, significa contar desde el final.
fin	Parámetros opcionales. Deje de leer datos en esta posición, que es igual a la longitud de la matriz de forma predeterminada. Si es un valor negativo, significa contar desde el final.

Estos tres parámetros deben ser todos valores numéricos. De lo contrario, se convertirán automáticamente a valores numéricos.

// 将3号位直到数组结束的成员（4和5），复制到从0号位开始的位置，覆盖原来的1和2。
[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5]

// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5]

2、buscar()、buscarIndex()、buscarLast()、buscarLastIndex()

El método de recuperación de la matriz no cambiará la matriz original.

método	ilustrar
encontrar()	Se utiliza para encontrar el primer miembro de la matriz que cumpla los criterios. Devuelve el miembro si lo hay, o indefinido si no hay ningún miembro que cumpla con los criterios.
encontrar índice()	Devuelve la posición del primer miembro de la matriz que cumple los criterios, o -1 si ninguno de los miembros cumple los criterios.
encontrarÚltimo()	Se utiliza para encontrar el primer miembro de la matriz que cumpla los criterios. Devuelve el miembro si lo hay, o indefinido si no hay ningún miembro que cumpla con los criterios. Comenzando desde el último miembro de la matriz, verifique hacia adelante.
encontrarÚltimoÍndice()	Devuelve la posición del primer miembro de la matriz que cumple los criterios, o -1 si ninguno de los miembros cumple los criterios. Comenzando desde el último miembro de la matriz, verifique hacia adelante.

El primer parámetro es una función de devolución de llamada, que todos los miembros de la matriz ejecutan en secuencia.

El segundo parámetro es este objeto que se utiliza para vincular la función de devolución de llamada.

[1, 4, -5, 10].find(n => n < 0) // -5

// 回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
[1, 5, 10, 15].find(function(value, index, arr) {
    
    
	return value > 9
}) // 10

[1, 5, 10, 15].findIndex(function(value, index, arr) {
    
    
	return value > 9
}) // 2

// 绑定回调函数的this对象。
function f(v){
    
    
	return v > this.age
}
let person = {
    
    name: 'John', age: 20}
[10, 12, 26, 15].find(f, person) // 26

const array = [
	{
    
     value: 1 },
	{
    
     value: 2 },
	{
    
     value: 3 },
	{
    
     value: 4 }
]

array.findLast(n => n.value % 2 === 1) // { value: 3 }
array.findLastIndex(n => n.value % 2 === 1) // 2

Estos cuatro métodos pueden encontrar NaN, compensando las deficiencias del método indexOf () de la matriz.

array.indexOf(elemento, inicio = 0). Devuelve la posición de un elemento especificado en la matriz, o -1 si el elemento especificado no se encuentra en la matriz.

[NaN].indexOf(NaN) // -1

// 借助 Object.is() 方法
[NaN].findIndex(y => Object.is(NaN, y)) // 0

3、filtro()

Filtre los miembros de la matriz y devuelva los miembros que cumplan las condiciones en una nueva matriz. Este método no cambia la matriz original.

El primer parámetro es una función de devolución de llamada. Todos los miembros de la matriz ejecutan la función de devolución de llamada en secuencia, y los miembros cuyo resultado devuelto es verdadero forman una nueva matriz y la devuelven.

El segundo parámetro es este objeto que se utiliza para vincular la función de devolución de llamada.

[1, 2, 3, 4, 5].filter(function (elem) {
    
    
	return (elem > 3)
}) // [4, 5]

[0, 1, 'a', false].filter(Boolean) // [1, 'a']

// 回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
[1, 2, 3, 4, 5].filter(function (elem, index, arr) {
    
    
	return index % 2 === 0
}) // [1, 3, 5]

// 绑定回调函数内部的this变量。
const obj = {
    
     MAX: 3 }
const myFilter = function (item) {
    
    
	if (item > this.MAX) return true
}
[2, 8, 3, 4, 1, 3, 2, 9].filter(myFilter, obj) // [8, 4, 9]

4、mapa()

Pase todos los miembros de la matriz a la función de parámetro por turno y luego devuelva los resultados de cada ejecución a una nueva matriz. La matriz original no se cambiará.

El primer parámetro es una función de devolución de llamada. Todos los miembros de la matriz ejecutan la función de devolución de llamada en secuencia, y los resultados forman una nueva matriz y se devuelven.

El segundo parámetro es este objeto que se utiliza para vincular la función de devolución de llamada.

[1, 2, 3].map(function (n) {
    
    
	return n + 1
}) // [2, 3, 4]

// 回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
[1, 2, 3].map(function(elem, index, arr) {
    
    
	return elem * index
}) // [0, 2, 6]


// 绑定回调函数内部的this变量。
const arr = ['a', 'b', 'c']
[1, 2].map(function (e) {
    
    
	return this[e]
}, arr) // ['b', 'c']

5、para cada()

Bucle de matriz. Se llama para cada elemento de la matriz y se pasa el elemento a la función de devolución de llamada. No se devuelve ningún resultado, el valor de retorno no está definido. La modificación de los elementos de la matriz cambiará la matriz original.

El primer parámetro es una función de devolución de llamada, y todos los miembros de la matriz ejecutan la función de devolución de llamada en secuencia, recorriéndola en bucle.

El segundo parámetro es este objeto que se utiliza para vincular la función de devolución de llamada.

// 回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
const arr = ['a', 'b', 'c']

arr.forEach(function(currentValue, index, arr) {
    
    
	console.log(currentValue)
})
// 'a' 0 ['a', 'b', 'c']
// 'b' 1 ['a', 'b', 'c']
// 'c' 2 ['a', 'b', 'c']

bucle de interrupción

(1) Utilice bucle for o bucle for in en su lugar. break finaliza todo el ciclo, continuar sale de este ciclo.

let list = [1, 2, 3, 4]
for (let i = 0; i < list.length; i++) {
    
    
	if (i == 1) {
    
    
		continue // 退出本次循环
	}
	if (i == 2) {
    
    
		break // 结束整个循环
	}
}

// break 只会结束最里层的 for 循环，继续外面的 for 循环
for (var i = 1; i < 4; i++) {
    
    
	for(var j = 1; j < 6; j++) {
    
    
		console.log(i * j)
		if(j > 2) break
	}
} // 1 2 3 2 4 6 3 6 9

for 循环中 return 语句：跳出 for 循环，且不执行 for 循环之外的语句，直接跳出当前函数，返回 return 后的值。

因为 js 中 for 是没有局部作用域的概念的，所以只有把 for 循环放在函数中时，才可以在for循环中使用 return 语句。

(2) Regresar, interrumpir y continuar no pueden terminar el ciclo forEach. Regresar en forEach es equivalente a continuar en el ciclo for y puede salir de este ciclo.

// return 3 的元素跳过
var arr = [1, 2, 3, 4, 5]

arr.forEach(function (item) {
    
    
    if (item === 3) {
    
    
        return
    }
    console.log(item)
})
// 1
// 2
// 4
// 5

(3) Utilice try...catch, throw para generar una excepción y finalizar el ciclo forEach.

try {
    
    
	[1, 2, 3].forEach(item => {
    
    
		if (item === 2) throw('哈哈哈')
		console.log(item)
	})
} catch(e) {
    
    
	console.log(e, 'e')
}

// 1
// '哈哈哈' e

(4) Implementado a través de algunos y todos. each finaliza el ciclo cuando encuentra un retorno falso. algunos terminan el ciclo cuando encuentran un retorno verdadero.

// 使用 Array.some()
arr.some(item => {
    
    
	console.log(item) 
	return item === 2 // 当有数组有一项满足条件时结束并返回 true
})
 
// 使用 Array.ervey()
arr.every(item => {
    
    
	console.log(item)
	return item !== 2 // 检查数字中是否每一项都满足条件，如果有一项不满足就结束循环并返回 false
})

6、algunos()、cada()

Estos dos métodos son similares a "afirmar" y devuelven un valor booleano para determinar si los miembros de la matriz cumplen ciertas condiciones. La matriz original no se cambiará.

El primer parámetro es una función de devolución de llamada, que todos los miembros de la matriz ejecutan en secuencia. Esta función acepta tres parámetros: el miembro actual, la posición actual y la matriz completa, y luego devuelve un valor booleano.

El segundo parámetro es este objeto que se utiliza para vincular la función de devolución de llamada.

[1, 2, 3, 4, 5].some(function (elem, index, arr) {
    
    
	return elem >= 3
}) // true

[1, 2, 3, 4, 5].every(function (elem, index, arr) {
    
    
	return elem >= 3
}) // false

arr.some() devolverá verdadero siempre que un elemento cumpla la condición; de lo contrario, devolverá falso; arr.every() devolverá verdadero solo si todos los elementos cumplen la condición; de lo contrario, devolverá falso.

7、reducir()

reduce() acepta una función como acumulador y reduce la matriz comenzando desde el primer valor hasta que se reduce el último valor. Finalmente calculado como un valor. La matriz original no se cambiará.

parámetro	ilustrar
(anterior, actual, índice, arr) => {}	Obligatoria, función de devolución de llamada. anterior: obligatorio. El valor inicial valorinicial o el valor de retorno una vez completado el cálculo. cur: requerido. arr El elemento acumulado actual de la matriz. índice: opcional. El índice del artículo acumulado actual. arr: opcional. La matriz no vacía de arr que se acumulará.
valor inicial	Valor inicial opcional. Cuando no hay un valor inicial, el prev acumulado por primera vez por la función de devolución de llamada es el primer elemento de arr, cur es el segundo elemento de arr y el valor del índice es 1.

[1, 2, 3, 4, 5].reduce(function (a, b) {
    
    
	console.log(a, b) // 1 2 | 3 3 | 6 4 | 10 5 
	return a + b
}) // 15

[1, 2, 3, 4, 5].reduce(function (a, b) {
    
    
	return a + b
}, 10) // 25

8、rellenar()

arr.fill(value, start = 0, end = arr.length) llena todos los elementos de una matriz desde el índice inicial hasta el índice final con un valor fijo. Excluye el índice de terminación. Índice inicial, el valor predeterminado es 0. Índice de terminación, el valor predeterminado es this.length.

['a', 'b', 'c'].fill(7) // [7, 7, 7]

new Array(3).fill(7) // [7, 7, 7]

['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']

Tenga en cuenta que si el tipo completado es un objeto, el objeto asignado es la misma dirección de memoria, no el objeto de copia profunda.

let arr = new Array(3).fill({
    
    name: 'Mike'})
arr[0].name = 'Ben'
arr // [{name: 'Ben'}, {name: 'Ben'}, {name: 'Ben'}]

let arr = new Array(3).fill([])
arr[0].push(5)
arr // [[5], [5], [5]]

9, entradas(), claves() y valores()

Se utiliza para atravesar la matriz. Ambos devuelven un objeto transversal, que se puede recorrer usando un bucle for...of. La única diferencia es que llaves() atraviesa nombres de claves, valores() atraviesa valores claves y entradas() atraviesa pares clave-valor. .

for (let index of ['a', 'b'].keys()) {
    
    
	console.log(index)
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
    
    
  console.log(elem)
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
    
    
  console.log(index, elem)
}
// 0 'a'
// 1 'b'

10、incluye()

El método Array.prototype.includes devuelve un valor booleano que indica si una matriz contiene un valor determinado, similar al método include de la cadena.

[1, 2, 3].includes(2)	// true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true

El segundo parámetro de este método indica la posición inicial de la búsqueda, que por defecto es 0. Si el segundo parámetro es un número negativo, representa la posición recíproca. Si es mayor que la longitud de la matriz (por ejemplo, el segundo parámetro es -4, pero la longitud de la matriz es 3), se restablecerá para comenzar desde 0. .

[1, 2, 3].includes(3, 3) // false
[1, 2, 3].includes(3, -1) // true

Antes de que existiera este método, normalmente usábamos el método indexOf de la matriz para verificar si contiene un determinado valor.

El método indexOf tiene dos desventajas:

Primero, no es lo suficientemente semántico, su significado es encontrar la primera posición de aparición del valor del parámetro, por lo que es necesario comparar si no es igual a -1, lo cual no es lo suficientemente intuitivo para expresarlo.

En segundo lugar, utiliza internamente el operador de igualdad estricta (===) para realizar el juicio, lo que puede provocar un juicio erróneo de NaN. include utiliza un algoritmo de juicio diferente, por lo que no existe tal problema.

if (arr.indexOf(el) !== -1) {
    
    
	// ...
}

[NaN].indexOf(NaN) // -1
[NaN].includes(NaN) // true

11、plano()、mapa plano()

matriz.prototipo.plano()

Se utiliza para "aplanar" matrices anidadas en matrices unidimensionales. Este método devuelve una nueva matriz y no cambia la matriz original.

flat() solo "aplanará" una capa de forma predeterminada. Si desea "aplanar" una matriz anidada de varias capas, puede escribir el parámetro del método flat() como un número entero, indicando el número de capas que desea aplanar. El valor predeterminado es 1. Cuando el valor del parámetro es Infinito, no importa cuántos niveles de anidamiento haya, se convertirá en una matriz unidimensional.

[1, 2, [3, 4]].flat() // [1, 2, 3, 4] 拉平一层

[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]] 拉平一层

[1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5] 拉平两层

[1, [2, [3]]].flat(Infinity) // [1, 2, 3] 全部拉平

[1, 2, , 4, 5].flat() // [1, 2, 4, 5] 跳过空位

matriz.prototipo.planoMap()

Ejecute una función en cada miembro de la matriz original (equivalente a ejecutar Array.prototype.map() ) y luego ejecute el método flat() en la matriz de valores devueltos. Este método devuelve una nueva matriz sin cambiar la matriz original.

flatMap() solo puede expandir un nivel de matriz.

El primer parámetro es una función transversal, que puede aceptar tres parámetros, a saber, el miembro de la matriz actual, la posición del miembro de la matriz actual (comenzando desde cero) y la matriz original.

El segundo parámetro se utiliza para vincular esto en la función transversal.

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]

// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]]) // [[2], [4], [6], [8]]

arr.flatMap(function callback(currentValue[, index[, array]]) {
    
    
	// ...
}[, thisArg])

12、en()

Durante mucho tiempo, JavaScript no ha admitido la indexación negativa de matrices. Si desea hacer referencia al último miembro de una matriz, no puede escribir arr [-1], solo puede usar arr [arr.length - 1].

Esto se debe a que el operador de corchetes [] se usa no solo para matrices sino también para objetos en el lenguaje JavaScript. Para los objetos, el nombre de la clave está entre corchetes. Por ejemplo, obj[1] se refiere a la clave con el nombre de clave cadena 1. De manera similar, obj[-1] se refiere a la clave con el nombre de clave cadena-1. Dado que las matrices de JavaScript son objetos especiales, los números negativos entre corchetes no tienen otra semántica, es decir, es imposible agregar una nueva sintaxis para admitir índices negativos.

Para resolver este problema, ES2022 agrega el método at() a las instancias de matriz, que acepta un número entero como parámetro, devuelve el miembro en la posición correspondiente y admite la indexación negativa. Este método se puede utilizar no sólo para matrices, sino también para cadenas y matrices escritas (TypedArray).

const arr = [5, 12, 8, 130, 44]
arr.at(2) // 8
arr.at(-2) // 130

// 如果参数位置超出了数组范围，at()返回undefined。
const sentence = 'This is a sample sentence';
sentence.at(0) // 'T'
sentence.at(-1) // 'e'
sentence.at(-100) // undefined
sentence.at(100) // undefined

13、toReversed()、toSorted()、toSpliced()、con()

Muchos métodos tradicionales de matrices cambiarán la matriz original, como push(), pop(), unshift(), shift(), etc. Mientras se llamen estos métodos en la matriz, su valor cambia. Ahora existe una propuesta que permite que las operaciones en matrices devuelvan una copia de la matriz original sin cambiarla.

Hay cuatro métodos de este tipo en total.

• Array.prototype.toReversed() -> Array
• Array.prototype.toSorted(compareFn) -> Array
• Array.prototype.toSpliced(start, deleteCount, ...items) -> Array
• Array.prototype.with(index, value) -> Array

Corresponden respectivamente a los métodos originales de la matriz.

Los métodos originales correspondientes a estos cuatro nuevos métodos tienen exactamente el mismo significado y uso, la única diferencia es que la matriz original no se cambiará, pero se devolverá una copia de la matriz original después de la operación.

• toReversed() 对应 reverse()，用来颠倒数组成员的位置。
• toSorted() 对应 sort()，用来对数组成员排序。
• toSpliced() 对应 splice()，用来在指定位置，删除指定数量的成员，并插入新成员。
• with(index, value) 对应 splice(index, 1, value)，用来将指定位置的成员替换为新的值。

const sequence = [1, 2, 3]
sequence.toReversed() // [3, 2, 1]
sequence // [1, 2, 3]

const outOfOrder = [3, 1, 2]
outOfOrder.toSorted() // [1, 2, 3]
outOfOrder // [3, 1, 2]

const array = [1, 2, 3, 4]
array.toSpliced(1, 2, 5, 6, 7) // [1, 5, 6, 7, 4]
array // [1, 2, 3, 4]

const correctionNeeded = [1, 1, 3]
correctionNeeded.with(1, 2) // [1, 2, 3]
correctionNeeded // [1, 1, 3]

14、esArray()

Determine el objeto JS. Si el valor es una matriz, es verdadero; de lo contrario, es falso.

Array.isArray(obj)

// 下面的函数调用都返回 true
Array.isArray([])
Array.isArray([10])
Array.isArray(new Array())
Array.isArray(new Array('a', 'b', 'c'))
// 鲜为人知的事实：其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype)

// 下面的函数调用都返回 false
Array.isArray()
Array.isArray({
    
    })
Array.isArray(null)
Array.isArray(undefined)
Array.isArray(17)
Array.isArray('Array')
Array.isArray(true)
Array.isArray(false)
Array.isArray(new Uint8Array(32))
Array.isArray({
    
     __proto__: Array.prototype })

Cómo determinar matrices en ES5

(1) detección de tipo de tipo

No hay problema al juzgar tipos básicos, pero al juzgar una matriz, se devuelve el objeto. (cadena, número, indefinido, booleano, símbolo, objeto, función)

// 基本类型
typeof 123 // number
typeof '123' // string
typeof true // boolean

// 引用类型
typeof [1, 2, 3] // object

(2) Sentencia por instancia de

El operador instancia de se utiliza para determinar si el objeto actual es una instancia de un constructor.

var arr = ['a', 'b', 'c']
console.log(arr instanceof Array) // true 
console.log(arr.constructor === Array) // true

La cadena de prototipo de la instancia de matriz apunta a la propiedad Array.prototype. El operador instancia de se utiliza para detectar si la propiedad Array.prototype existe en la cadena de prototipo de la matriz. La variable arr en el código anterior es una matriz y todo tiene la Propiedad Array.prototype. El valor de retorno es verdadero, lo que facilita la determinación del tipo de matriz.

Sin embargo, cabe señalar que el atributo del prototipo se puede modificar, por lo que no significa necesariamente que siempre será verdadero si inicialmente se considera que lo es.

(3) Juicio del constructor

constructor es un atributo en el objeto prototipo del constructor, que apunta al constructor actual.

El objeto prototipo en el objeto de instancia producido por new tiene el atributo constructor que apunta al constructor Array, a partir del cual podemos determinar el tipo de matriz.

var arr = new Array('a', 'b', 'c')
arr.constructor === Array //true

El constructor se puede anular, por lo que no se garantiza que sea una matriz. (Herencia prototípica común)

var str = 'abc'
str.constructor = Array
str.constructor === Array // true

(4)Objeto.prototipo.toString

El método toString del objeto devuelve [tipo de objeto], donde tipo es el tipo de datos actual.

 Object.prototype.toString.call(arr) === '[object Array]'

5. Huecos en la matriz

Una posición vacía en una matriz significa que no hay ningún valor en una determinada posición de la matriz.

La posición vacía no está indefinida, si el valor de una determinada posición es igual a indefinido, todavía tiene valor. Las posiciones vacías no tienen valor.

由于空位的处理规则非常不统一，所以建议避免出现空位。

forEach(), filter(), reduce(), each() y some() omiten espacios.

map() omitirá espacios pero mantendrá el valor

join() y toString() tratan los espacios como indefinidos, y undefined y null se tratan como cadenas vacías.

// forEach 方法
[, 'a'].forEach((x, i) => console.log(i)) // 1

// filter 方法
['a', , 'b'].filter(x => true) // ['a', 'b']

// every 方法
[, 'a'].every(x => x === 'a') // true

// reduce 方法
[1, , 2].reduce((x, y) => x + y) // 3

// some 方法
[, 'a'].some(x => x !== 'a') // false

// map 方法
[, 'a'].map(x => 1) // [, 1]

// join方法
[, 'a', undefined, null].join('#') // '#a##'

// toString 方法
[, 'a', undefined, null].toString() // ',a,,'

El método Array.from() convertirá los bits vacíos de la matriz a indefinidos, es decir, este método no ignorará los bits vacíos.

Array.from(['a', , 'b']) // ['a', undefined, 'b']

El operador de extensión (…) también convierte bits vacíos en indefinidos.

[...['a', , 'b']] // ['a', undefined, 'b']

copyWithin() copiará los espacios vacíos juntos.

[, 'a', 'b', ,].copyWithin(2, 0) // [, 'a', , 'a']

fill() trata los espacios como posiciones normales de una matriz.

new Array(3).fill('a') // ['a', 'a', 'a']

El bucle for…of también recorrerá los espacios.

let arr = [, ,]
for (let i of arr) {
    
    
	console.log(1)
}
// 1
// 1

las entradas(), las claves(), los valores(), la búsqueda() y la búsquedaIndex() tratarán los espacios como indefinidos.

// entries()
[...[, 'a'].entries()] // [[0, undefined], [1, 'a']]

// keys()
[...[, 'a'].keys()] // [0, 1]

// values()
[...[, 'a'].values()] // [undefined, 'a']

// find()
[, 'a'].find(x => true) // undefined

// findIndex()
[, 'a'].findIndex(x => true) // 0