¿Cuáles son los métodos comunes para manipular elementos de una matriz?

1. Copiar y completar

② Llenar la matriz: llenar()

Inserte todo o parte de los mismos valores en una matriz existente. La sintaxis de este método es la siguiente: 

matriz.fill(valor, inicio, fin)

• valor : requerido. valor llenado;
• inicio: opcional. Posición de inicio de llenado (por defecto 0);
• final: opcional. Dejar de llenar la posición (el valor predeterminado es array.length para llenar hasta el final de la matriz )

Llene la matriz con a desde la segunda a la quinta posición: 

      let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      arr.fill("a", 2, 5);
      console.log(arr); // [0, 1, 'a','a', 'a', 5, 6, 7, 8, 9];

      const arr = [0, 0, 0, 0, 0];

      // 用5填充整个数组
      arr.fill(5);
      console.log(arr); // [5, 5, 5, 5, 5]
      arr.fill(0); // 重置

      // 用5填充索引大于等于3的元素
      arr.fill(5, 3);
      console.log(arr); // [0, 0, 0, 5, 5]
      arr.fill(0); // 重置

      // 用5填充索引大于等于1且小于等于3的元素
      arr.fill(5, 1, 4);
      console.log(arr); // [0, 5, 5, 5, 0]
      arr.fill(0); // 重置

      // 用5填充索引大于等于-1的元素
      arr.fill(5, -1);
      console.log(arr); // [0, 0, 0, 0, 5]
      arr.fill(0); // 重置

② Copia por lotes: copyWithin()

Copia superficialmente parte del contenido de la matriz de acuerdo con el rango especificado y luego lo inserta en la posición inicial del índice especificado . Los índices inicial y final se calculan de la misma manera que el método de relleno. La sintaxis de este método es la siguiente:

array.copyWithin(destino, inicio, fin)

Sus parámetros son los siguientes:

• objetivo : requerido. Copie a la ubicación del índice de destino especificada;
• inicio: opcional. La posición inicial de la copia del elemento;
• final: opcional. La posición del índice para detener la copia (el valor predeterminado es  matriz .length). Si es un valor negativo, representa el valor recíproco.

Copie  los elementos que comienzan en la posición inicial  y los elementos entre la  posición final y la primera posición de la matriz. 

      const array1 = [1, 2, 3, 4, 5];
      console.log(array1.copyWithin(0, 3)); // [4, 5, 3, 4, 5]

      const array2 = [1, 2, 3, 4];
      console.log(array2.copyWithin(0, 3)); //  [4, 2, 3, 4]

      const array3 = [1, 2, 3, 4, 5, 6, 7, 8];
      console.log(array3.copyWithin(0, 3)); //  [4, 5, 6, 7, 8, 6, 7, 8]

      const array4 = [1, 2, 3, 4, 5, 6, 7, 8];
      console.log(array4.copyWithin(0, 3, 5)); //  [4, 5, 3, 4, 5, 6, 7, 8]

Las firmas de estos dos métodos son similares: ambos necesitan especificar un rango en la instancia de matriz existente, incluido el índice inicial y sin incluir el índice final.

 

2. Método de conversión

Hay cuatro métodos principales para convertir matrices: toLocaleString(), toString(), valueOf(), join()

Cabe señalar que si un elemento de la matriz es nulo o no está definido, el resultado devuelto estará representado por una cadena vacía después de llamar a los primeros tres métodos.

① a Cadena()

Lo que se devuelve es una cadena separada por comas concatenada por la cadena equivalente de cada valor de la matriz, es decir, cada valor de la matriz llamará al método toString() para obtener la cadena final.

let colors = ["red", "blue", "green"];  
console.log(colors.toString())  // red,blue,green

let array = [{ name: "zz" }, 123, "abc", new Date(), [1, 2]];
console.log(array.toString()); // [object Object],123,abc,Fri Nov 10 2023 22:18:25 GMT+0800 (中国标准时间),1,2

② valor de()

Lo que se devuelve es la propia matriz.

      let colors = ["red", "blue", "green"];
      console.log(colors.valueOf()); // ["red", "blue", "green"]

③ toLocaleString()

El método toLocaleString() puede devolver el mismo resultado que el método toString(), pero no necesariamente.

Cuando llamas al método toLocaleString(), obtendrás una cadena de valores de matriz separados por comas. La diferencia con el método toString() es que para obtener la cadena final, se llamará al método toLocaleString() de cada valor. en lugar de toString.()método

      let array = [{ name: "zz" }, 123, "abc", new Date()];
      let str = array.toLocaleString();
      console.log(str); // [object Object],123,abc,2016/1/5 下午1:06:23

④ unirse()

Coloque todos los elementos de la matriz en una cadena. Los elementos están separados por el delimitador especificado, que por defecto son comas.

Este método devuelve una cadena. La cadena se genera convirtiendo cada elemento de la matriz en una cadena y luego concatenando las cadenas, insertando la cadena separadora entre los dos elementos. 

let array = ["one", "two", "three","four", "five"];
console.log(array.join());      // one,two,three,four,five
console.log(array.join("-"));   // one-two-three-four-five

 

3. Método de pila

La pila es una estructura de último en entrar, primero en salir , es decir, los elementos agregados más recientemente se eliminan primero.

La inserción (llamada push) y la eliminación (llamada pop) de elementos de datos solo ocurren en la parte superior de la pila.

① empujar()

Recibe cualquier número de argumentos, los agrega al final de la matriz y devuelve la nueva longitud de la matriz. Este método cambiará la matriz original. Su forma gramatical es la siguiente:

arrayObject.push(nuevoelemento1, nuevoelemento2, ...., nuevoelementoX)

      let array = ["1", "2",  "3"];
      array.push("4", "5", "6")
      let i = array.push("666");
      console.log(array); // ["1", "2", "3", "4"]
      console.log(i); // 7

② pop()

Elimina y devuelve el último elemento de una matriz. No tiene parámetros. Este método cambiará la matriz original.

      let array = ["1", "2", "3"];
      let i = array.pop();
      console.log(array); // ["1", "2"]
      console.log(i); // 3

 

4. Método de cola

La cola es una estructura de datos de primero en entrar, primero en salir.La cola agrega elementos al final de la cola y elimina elementos en el extremo opuesto.

Métodos para eliminar y agregar elementos desde el principio de una matriz: shift() y unshift()

① cambio()

Elimina el primer elemento de una matriz y devuelve el elemento eliminado. Luego, la longitud de la matriz se reduce en uno y este método cambiará la matriz original.

Nota: Si la matriz está vacía, el método shift() no hará nada y devolverá un valor indefinido. 

      let array = ["1", "2", "3"];
      let i = array.shift();
      console.log(array); // ["2", "3"]
      console.log(i); // 1

② desactivar()

Agrega uno o más elementos al comienzo de la matriz y devuelve la nueva longitud. Este método cambiará la matriz original.

arrayObject.unshift(nuevoelemento1,nuevoelemento2,....,nuevoelementoX)

      let array = ["1", "2", "3"];
      let i = array.unshift('111', '222', '333');
      console.log(array); // ["111", "222", "333", "1", "2", "3"]
      console.log(i); // 6

 

5. Método de clasificación

Las matrices tienen dos métodos para reordenar las matrices: ordenar () y revertir ()

① ordenar()

Método de clasificación de matrices ()_Blog de Little Strawberry Jumping-Blog CSDN 

Este método ordenará la matriz original y cambiará la matriz original.

 arrayObject.sort(ordenar por)

El parámetro sortby es un parámetro opcional y se utiliza para especificar el orden de clasificación. Es una función de comparación que se utiliza para determinar qué valor debe ocupar el primer lugar. De forma predeterminada, los elementos de la matriz se reorganizan en orden ascendente .

Para este fin, el método sort() llamará a la función de conversión de cadenas en cada elemento y luego comparará las cadenas para determinar el orden. Incluso si los elementos de la matriz son todos valores numéricos, los elementos de la matriz primero se convertirán en cadenas. para comparar y clasificar.

Esto da como resultado una clasificación inexacta.

let array = [5, 4, 3, 2, 1];
let array2 = array.sort();
console.log(array2)  // [1, 2, 3, 4, 5]

let array = [0, 1, 5, 10, 15];
let array2 = array.sort();
console.log(array2)  //  [0, 1, 10, 15, 5]

Para los parámetros del método sort(), es una función de comparación que recibe dos parámetros.

Si el primer parámetro debe ir antes del segundo parámetro, devuelve -1;

Si los dos parámetros son iguales, devuelve 0;

Si el primer parámetro debe ir después del segundo parámetro, devuelve 1.

      function compare(value1, value2) {
        if (value1 < value2) {
          return -1;
        } else if (value1 > value2) {
          return 1;
        } else {
          return 0;
        }
      }

      let array = [1, 5, 0, 15, 10];
      let array2 = array.sort(compare);
      console.log(array2); // [0, 1, 5, 10, 15]

 Usamos funciones de flecha para definir:

let array = [0, 1, 5, 10, 15];

let array2 = array.sort((a, b) => a - b);  // 正序排序 升序
console.log(array2)  // [0, 1, 5, 10, 15]

let array3 = array.sort((a, b) => b - a);  // 倒序排序 降序
console.log(array3)  // [15, 10, 5, 1, 0]

② revertir()

Invertir el orden de los elementos de una matriz. Este método cambia la matriz original sin crear una nueva matriz.

      let array = [1, 2, 3, 4, 5];
      let array2 = array.reverse();
      console.log(array); // [5, 4, 3, 2, 1]
      console.log(array2 === array); // true

6. Método de operación

① concat()

Concatenar dos o más matrices. Este método no modifica la matriz existente, simplemente devuelve una copia de la matriz concatenada.

Este método también se puede utilizar para aplanar matrices.

arrayObject.concat(matrizX,matrizX,......,matrizX)

El parámetro arrayX es obligatorio. Este parámetro puede ser un valor específico o un objeto de matriz. Puede ser cualquier número.

      let array = [1, 2, 3];
      let array2 = array.concat(4, [5, 6], [7, 8, 9]);
      console.log(array2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
      console.log(array); // [1, 2, 3], 可见原数组并未被修改

② rebanada()

Devuelve elementos seleccionados de una matriz existente. Devuelve una nueva matriz que contiene los elementos de la matriz de principio a fin (exclusivo). El método no modifica la matriz, pero devuelve una submatriz.

arrayObject.slice(inicio, fin) 

Sus parámetros son los siguientes:

• inicio : requerido. Especifica dónde comenzar la selección. Si es negativo, especifica la posición desde el final de la matriz. Es decir, -1 se refiere al último elemento, -2 se refiere al penúltimo elemento, y así sucesivamente;
• final : opcional. Especifica dónde termina la selección. Este parámetro es el índice de la matriz al final del fragmento de la matriz. Si no se especifica este parámetro, la matriz dividida contiene todos los elementos desde el principio hasta el final de la matriz. Si este parámetro es negativo, especifica los elementos comenzando desde el final de la matriz.

      let array = ["one", "two", "three", "four", "five"];
      console.log(array.slice(0)); // ["one", "two", "three","four", "five"]
      console.log(array.slice(2, 3)); // ["three"]

③ empalme()

Uno de los métodos más poderosos sobre matrices. Agrega/elimina elementos a/de la matriz y devuelve el elemento eliminado. Este método muta la matriz original. Su sintaxis de uso es la siguiente:

arrayObject.splice(índice, cuántos, elemento1,....., elementoX)

Sus parámetros son los siguientes:

• índice: requerido. Un número entero que especifica la posición en la que agregar o eliminar un elemento. Utilice un número negativo para especificar la posición desde el final de la matriz.
• cuantos: requerido. El número de elementos a eliminar. Si se establece en 0, los elementos no se eliminarán.
• elemento1, ..., elementoX: opcional. Nuevos elementos agregados a la matriz.

Como se puede ver en los parámetros anteriores, el empalme tiene principalmente tres formas de uso:

• Eliminar: se deben pasar dos parámetros, a saber, la posición del primer elemento que se eliminará y el número de elementos que se eliminarán;
• Inserción: debe pasar al menos tres parámetros, a saber, la posición inicial, 0 (el número de elementos que se eliminarán) y el elemento que se insertará.
• Reemplazar: elimina un elemento e inserta un nuevo elemento en la posición especificada. También debe pasar al menos tres parámetros, a saber, la posición inicial, la cantidad de elementos que se eliminarán y los elementos que se insertarán. El número de elementos que se insertarán es arbitrario y no necesariamente es igual al número de elementos que se eliminarán.

      let array1 = ["one", "two", "three", "four", "five"];
      console.log(array1.splice(1, 2)); // 删除：["two", "three"]
      console.log(array1) // ["one", "four", "five"];

      let array2 = ["one", "two", "three", "four", "five"];
      console.log(array2.splice(2, 0, 996)); // 插入：[]
      console.log(array2) // ["one", "two", 996, "three", "four", "five"];

      let array3 = ["one", "two", "three", "four", "five"];
      console.log(array3.splice(2, 1, 996)); // 替换：["three"]
      console.log(array3) //  ["one", "two", 996, "four", "five"];

 

7. Método de fusión

① reducir()

Métodos comúnmente utilizados para matrices: método reduce () [suma de matrices, multiplicación, conteo del número de apariciones de cada elemento en la matriz, deduplicación de matrices, conversión de matrices bidimensionales en unidimensionales, conversión de matrices multidimensionales en unidimensionales , objetos Suma de atributos]_reduce sum-CSDN Blog

Ejecute una función reductora (ejecutada en orden ascendente) en cada elemento de la matriz, resumiendo sus resultados en un único valor de retorno.

Ejecute la función de devolución de llamada en secuencia para cada elemento de la matriz, excluyendo los elementos de la matriz que se eliminan o a los que nunca se les ha asignado un valor.

arr.reduce(devolución de llamada, [valorinicial])

(1) callback(función que ejecuta cada valor del array, contiene cuatro parámetros)

• anteriorValue (el valor devuelto por la última llamada de devolución de llamada, o el valor inicial proporcionado)
• currentValue (el elemento actualmente procesado en la matriz)
• índice (el índice del elemento actual en la matriz)
• matriz (la matriz en la que se llama a reducir)

(2) initialValue(Como primer parámetro de la primera devolución de llamada).

let arr = [1, 2, 3, 4]
let sum = arr.reduce((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);  

El resultado es el siguiente:

1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

Si no se proporciona un valor inicial, reducir comenzará a ejecutar el método de devolución de llamada desde el índice 1, omitiendo el primer índice. Si se proporciona valor inicial, comienza en el índice 0. 

let arr = [1, 2, 3, 4]
let sum = arr.reduce((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
}, 5)
console.log(arr, sum);  

El resultado es el siguiente:

5 1 0
6 2 1
8 3 2
11 4 3
[1, 2, 3, 4] 15

② reducirDerecha()

Este método es casi el mismo que el  reduce() uso anterior, excepto que este método busca en la matriz en orden inverso. Los métodos reduce()se ejecutan en secuencia.

      let arr = [1, 2, 3, 4];
      let sum = arr.reduceRight((prev, cur, index, arr) => {
        console.log(prev, cur, index);
        return prev + cur;
      }, 5);
      console.log(arr, sum);

El resultado es el siguiente:

5 4 3
9 3 2
12 2 1
14 1 0
[1, 2, 3, 4] 15 

8. Métodos de búsqueda y localización

ECMAScript proporciona dos tipos de métodos para buscar matrices: búsqueda por igualdad estricta y búsqueda por funciones de aserción.

① IndexOf () estrictamente igual  , lastIndexOf (), incluye ()

ECMAScript pasa tres métodos de búsqueda estrictamente iguales: indexOf(), lastIndexOf() e include() .

Todos estos métodos aceptan dos parámetros: el elemento que se va a encontrar y la posición de búsqueda real opcional . 

lastIndexOf(): busca hacia adelante desde el elemento final de la matriz , mientras que los otros dos métodos buscan hacia atrás desde el elemento inicial de la matriz.

indexOf() y lastIndexOf() : devuelven el valor de índice del elemento en la matriz; si no se encuentra, devuelve -1

incluye(): Devuelve un valor booleano que indica si se encuentra al menos un elemento que coincida con el elemento especificado.

Al comparar el primer argumento con cada elemento de la matriz, se utiliza una comparación congruente (===), lo que significa que los dos elementos deben ser estrictamente iguales.

let arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(2))      // 1
console.log(arr.lastIndexOf(3))  // 2
console.log(arr.includes(4))     // true

② Funciones de afirmación  buscar (), findIndex ()

ECMAScript también permite buscar matrices de acuerdo con funciones de aserción definidas. Esta función se llama para cada índice. El valor de retorno de la función de aserción determina si el elemento en el índice correspondiente se considera una coincidencia.

Hay dos formas de utilizar funciones de aserción, a saber, los métodos find() y findIndex().

Estos dos métodos no se ejecutarán para matrices vacías . Y el valor original de la matriz no cambia.

Todos tienen tres parámetros: elemento, índice y objeto de matriz al que pertenece el elemento. donde elemento es el elemento actualmente buscado en la matriz, índice es el índice del elemento actual y matriz es la matriz que se está buscando actualmente.

find(): Devuelve el primer elemento coincidente . Si no hay ningún elemento que cumpla las condiciones, se devuelve indefinido ;

findIndex(): Devuelve el índice del primer elemento coincidente . Si no hay ningún elemento que cumpla las condiciones, devuelve -1 .

      let arr = [1, 2, 3, 4, 5];
      arr.find((item) => item > 2); // 结果： 3
      arr.findIndex((item) => item > 2); // 结果： 2

 

9. Métodos iteradores  claves (), valores (), entradas ()

En ES6, el prototipo de matriz expone tres métodos para recuperar el contenido de la matriz: claves(), valores() y entradas().

llaves(): devuelve un iterador de índices de matriz

valores(): Devuelve un iterador de elementos de la matriz

entradas(): devuelve un iterador de pares de valores de índice

Debido a que estos métodos devuelven iteradores, su contenido se puede convertir directamente en instancias de matriz a través de Array.from:

let array = ["one", "two", "three", "four", "five"];
console.log(Array.from(array.keys())); // [0, 1, 2, 3, 4]
console.log(Array.from(array.values())); // ["one", "two", "three", "four", "five"]
console.log(Array.from(array.entries())); // [[0, "one"], [1, "two"], [2, "three"], [3, "four"], [4, "five"]]

 

10. Métodos de iteración  each(), filter(), forEach(), map(), some()

ECMAScript define 5 métodos de iteración para matrices, a saber, each(), filter(), forEach(), map() y some().

Ninguno de estos métodos cambiará la matriz original . Todos estos cinco métodos reciben dos parámetros: una función que se ejecutará con cada elemento como parámetro y un objeto de alcance opcional como el contexto en el que se ejecuta la función (que afecta este valor en la función).

La función pasada a cada método recibe tres parámetros: el elemento actual, el valor de índice del elemento actual y el objeto numérico al que pertenece el elemento actual.

① cada()

Itera a través de cada elemento de la matriz y devuelve verdadero solo si todos los elementos cumplen las condiciones; de lo contrario, devuelve falso.

let arr = [1, 2, 3, 4, 5]
console.log(arr.every(item => item > 0)) // true

② filtro()

Se utiliza para filtrar la matriz y se devolverán los elementos que cumplan las condiciones.

Su parámetro es una función de devolución de llamada. Todos los elementos de la matriz ejecutan la función en secuencia y se devolverán los elementos cuyo resultado devuelto sea verdadero. Este método devolverá una nueva matriz y no cambiará la matriz original.

let arr = [1, 2, 3, 4, 5]
console.log(arr.filter(item => item > 2)) // [3, 4, 5]

Puede utilizar  filter() métodos para eliminar valores indefinidos, nulos, NaN, etc. de una matriz

let arr = [1, undefined, 2, null, 3, false, '', 4, 0]
console.log(arr.filter(Boolean)) // [1, 2, 3, 4]

③ para cada uno

Se utiliza para llamar a cada elemento de la matriz y pasar el elemento a la función de devolución de llamada. Este método no tiene valor de retorno 

let arr = [1, 2, 3, 4, 5]
arr.forEach((item, index, arr) => {
  console.log(item, index, arr)
})

Este método también puede tener un segundo parámetro, que se usa para vincular esta variable dentro de la función de devolución de llamada (la función de devolución de llamada no puede ser una función de flecha, porque la función de flecha no tiene esto)

      let arr = [1, 2, 3, 4, 5];
      let arr1 = [9, 8, 7, 6, 5];
      arr.forEach(function (item, index, arr) {
        console.log(this[index]); //  9 8 7 6 5
      }, arr1);

④ mapa()

Se devolverá una nueva matriz y los elementos de la matriz son los valores de los elementos de la matriz original después de llamar a la función.

Este método procesa elementos secuencialmente en el orden original de los elementos de la matriz. Este método no detecta una matriz vacía , devuelve una nueva matriz sin cambiar la matriz original .

      let arr = [1, 2, 3];
      let arrNew = arr.map((item) => {
        return item + 1;
      });
      console.log(arrNew); // [2, 3, 4]

El segundo parámetro se utiliza para vincular esta variable dentro de la función de parámetro: 

      var arr = ["a", "b", "c"];
      let arrNew = [1, 2].map(function (e) {
        return this[e];
      }, arr);
      console.log(arrNew); // ['b', 'c']

Este método se puede llamar en cadena:

      let arr = [1, 2, 3];
      let arrNew = arr.map((item) => item + 1).map((item) => item + 1);
      console.log(arrNew); // [3, 4, 5]

⑤ algunos()

Itera a través de cada elemento de la matriz y devuelve verdadero siempre que un elemento cumpla la condición; de lo contrario, devuelve falso.

      let arr = [1, 2, 3, 4, 5];
      console.log(arr.some((item) => item > 4)) // true