Estructuras de datos y algoritmos de JavaScript: matrices y métodos comunes de matrices

---

1. empalme() - recorte

splice() se usa a menudo para recortar matrices y puede recibir tres parámetros.

• Parámetro 1: comenzar a recortar desde el primer elemento de la matriz
• Parámetro 2: Cuántos elementos recortar
• Parámetro tres (no es necesario pasar): qué datos agregar

1.1 Matriz de recorte convencional

let arr = [1,2,3,4,5]
let arr1 = arr.splice(0,2)
console.log(arr)   // 输出结果：[3, 4, 5]
console.log(arr1)  // 输出结果：[1, 2]

1.2 Después de recortar y agregar datos

let arr = [1,2,3,4,5]
let arr1 = arr.splice(1,1,10,20,30)
console.log(arr)   // 输出结果：[1, 10, 20, 30, 3, 4, 5]
console.log(arr1)  // 输出结果：[2]

---

2. ordenar () - ordenar

sort() se usa a menudo para ordenar matrices. No solo puede ordenar matrices simples, sino también ordenar objetos según un determinado valor en el objeto.

• X - Y: ordenar de pequeño a grande
• Y - X: ordenar de grande a pequeño

2.1 De pequeño a grande (X - Y)

 let arr = new Array(6,5,2,8,19,35,5)
 arr.sort((x,y)=>x-y)   // 从小到大排列
 console.log(arr)       // 输出结果：[2, 5, 5, 6, 8, 19, 35]

2.2 De mayor a menor (Y - X)

 let arr = new Array(6,5,2,8,19,35,5)
 arr.sort((x,y)=>y-x)   // 从小到大排列
 console.log(arr)       // 输出结果：[35, 19, 8, 6, 5, 5, 2]

2.3 Ordenar objetos según un determinado valor en el objeto

let arr = [
  {
    
    name: "张三",age: 25,},
  {
    
    name: "李四",age: 23,},
  {
    
    name: "王五",age: 30,},
];
// 根据 age ,从小到大排序
arr.sort((x, y) => x.age - y.age);
console.log(arr);
// 输出结果如下：
// [
//  {name: "李四",age: 23,},
//  {name: "张三",age: 25,},
//  {name: "王五",age: 30,},
// ]

---

3. concat() - conexión

concat() puede concatenar dos matrices

let arr1 =new Array(1,2,3)
let arr2 =new Array(5,6,7)
// 将 arr1 与 arr2进行连接
let arr3= arr1.concat(arr2)
console.log(arr3);     // 输出结果；[1, 2, 3, 5, 6, 7]

// 将 arr1、arr2、10,11,12 进行连接
let arr4= arr1.concat(arr2,10,11,12)
console.log(arr4);    // 输出结果；[1, 2, 3, 5, 6, 7, 10, 11, 12]

---

4. cada(): todos los valores satisfacen las condiciones

each() puede atravesar la matriz y el valor de retorno es un valor booleano

• 所有项均满足条件时Devuelve verdadero sólo cuando es una matriz
• De lo contrario, devuelve falso

4.1 Tener valor no cumple con las condiciones

 let arr = new Array(10, 11, 12, 13, 14, 15);
 let result = arr.every((item) => item > 10);
 console.log(result)  // 输出结果：false。显然并非每一项都大于10

4.2 Se cumplen todas las condiciones

let arr = new Array(10, 11, 12, 13, 14, 15);
let result = arr.every((item) => item < 20);
console.log(result)  // 输出结果：true。显然数组中的每一项都小于20

---

5. some() - al menos uno cumple las condiciones

some() puede atravesar la matriz y el valor de retorno es un valor booleano. Tenga en cuenta la diferencia con el método each()

• matriz 至少一项满足条件时, devuelve verdadero
• De lo contrario, devuelve falso

5.1 Todos los valores no cumplen la condición

 let arr = new Array(10, 11, 12, 13, 14, 15);
 let result = arr.every((item) => item > 20);
 console.log(result)  // 输出结果：false。显然数组中不存在任何一项大于20

5.2 Se cumple al menos una condición

 let arr = new Array(10, 11, 12, 13, 14, 15);
 let result = arr.every((item) => item > 14);
 console.log(result)  // 输出结果：true。显然数组中存在一项大于14

---

6. filter() - matriz de filtros

filter() se utiliza para 过滤eliminar ciertos elementos de una matriz y devolver los elementos restantes

6.1 Filtrar números pares

 let arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9);
 let arr2 = arr.filter((item) => {
    
    
   return item % 2 != 0;
 });
 console.log(arr2)   // 输出结果：[1, 3, 5, 7, 9]

6.2 Filtrar objetos en una matriz

let arr = [
   {
    
     name: "张三", age: 15 },
   {
    
     name: "李四", age: 25 },
   {
    
     name: "王五", age: 30 },
   {
    
     name: "陈皮", age: 40 },
 ];
 let arr2 = arr.filter((item) => {
    
    
   // 可自行设置过滤条件
   return item.age > 25;
 });
 console.log(arr2);  // 输出结果：[{ name: "王五", age: 30 },{ name: "陈皮", age: 40 }]

---

7. map() - devuelve una nueva matriz

Devuelve una nueva matriz, los elementos de la matriz son los valores de la matriz original después de llamar a la función.

let arr = new Array(10, 11, 12, 13, 14, 15);
let arr2 = arr.map((item) => item + "你好"); // 返回新数组，进行数据拼接
console.log(arr2)   // 输出结果：["10你好","11你好","12你好","13你好","14你好","15你好"]

---

8. forEach() - recorrido del bucle

El método de recorrido de bucle más utilizado por los individuos, es muy rápido y fácil de usar.

8.1 Abreviatura

let arr = [
  {
    
    name:'张三',age:15},
  {
    
    name:'李四',age:23},
  {
    
    name:'王五',age:32},
  {
    
    name:'陈皮',age:27},
]
// 只用到item,不用index时，可以省略括号
arr.forEach(item=>{
    
    
  // 拿到数组中的每一项，即可写入对应的逻辑代码
  console.log(item)
})

índice 8.2

let arr = [
  {
    
    name:'张三',age:15},
  {
    
    name:'李四',age:23},
  {
    
    name:'王五',age:32},
  {
    
    name:'陈皮',age:27},
]
arr.forEach((item,index)=>{
    
    
  // 可以拿到数组中的每一项，以及对应性的 index 
  console.log(item,index)
})

---

9. Introducción al método reducir()

El método reduce() ejecuta una función de reducción que usted proporciona (en orden ascendente) en cada elemento de la matriz, resumiendo sus resultados en un único valor de retorno. El método de reducción puede hacer muchas cosas. Reduce puede hacer todo lo que puede hacer el recorrido de bucle, como la suma de matrices, la multiplicación de matrices, el número de apariciones de elementos en una matriz, la deduplicación de matrices, etc.

9.1 Acumulación de matrices

let arr = [1, 2, 3, 4, 5];
// 下一次循环时，item1 + item2 的值会赋值给 item1
let arr2 = arr.reduce((item1, item2) => item1 + item2);
console.log(arr2);  // 输出结果：15

9.2 Multiplicación acumulativa de matrices

let arr = [1, 2, 3, 4, 5];
// 下一次循环时，item1 * item2 的值会赋值给 item1
let arr2 = arr.reduce((item1, item2) => item1 * item2);
console.log(arr2);  // 输出结果：120

9.3 Deduplicación de matrices

let arr = [1, 3, 5, 7, 9, 1, 3, 5];
let arr1 = arr.reduce((total, current, index) => {
    
    
  // 判断total中是否包含current
  if (!total.includes(current)) {
    
    
    return total.concat(current);
  } else {
    
    
    return total;
  }
}, []);
console.log(arr1);   // 输出结果：[1,3,5,7,9]

9.4 Convertir una matriz bidimensional en una matriz unidimensional

let arr = [[1,2],[3,4],[5,6]]
let arr1 = arr.reduce((total,current)=>{
    
       // 方法二
  return total.concat(current)
},[])
console.log(arr1)  // 输出结果：[1,2,3,4,5,6]

Interludio, aquí hay una forma más sencilla de convertir una matriz bidimensional en una matriz

let arr = [[1,2],[3,4],[5,6]]
// 只需一行代码，即可将二维数组，转为一维数组
let arr1 = arr.flat(Infinity)
console.log(arr1)  // 输出结果：[1,2,3,4,5,6]

9.5 Contar las apariciones de elementos.

let arr = ["王", "李", "王", "张", "张", "张"];
let num = arr.reduce((total, current) => {
    
    
  //  current in total current 是否在total中
  if (current in total) {
    
    
    total[current]++;
  } else {
    
    
    total[current] = 1;
  }
  return total;
},{
    
    });
console.log(num);  // 输出结果：{王: 2, 李: 1, 张: 3}

---

10. objeto iterador

Hay varios objetos iteradores y se pueden obtener diferentes valores a través de diferentes objetos iteradores.

• arr.keys() obtiene la clave de cada elemento de la matriz
• arr.values() obtiene el valor de cada elemento de la matriz
• arr.entries() obtiene cada par clave-valor en la matriz

10.1 Bucle for simple

let arr = [10, 11, 12, 13, 14];
for(let item of arr){
    
    
  console.log(item)  // 输出结果： 10, 11, 12, 13, 14
}

10.2 El objeto iterador obtiene los pares clave-valor de la matriz

let arr = [10, 11, 12, 13, 14];
for(let item of arr.entries(){
    
    
  console.log(item)
}

Resultado de salida:

10.3 Los objetos iteradores solo obtienen claves

let arr = [10, 11, 12, 13, 14];
for (let item of arr.keys()) {
    
    
  console.log(item);
}

Resultado de salida:

10.4 Los objetos iteradores solo obtienen valores

let arr = [10, 11, 12, 13, 14];
for (let item of arr.values()) {
    
    
  console.log(item);
}

Resultado de salida:

---

11. matriz.de()

Array.from() puede convertir estructuras similares a matrices en matrices

function test() {
    
    
  // 通过 Array.from() 将 arguments 转为数组
  console.log(Array.from(arguments));
  // 转为数组后可以调用数组的方法
  Array.from(arguments).forEach(item=>{
    
    
    console.log(item)
  })
}
test(1, 2, 3);

Resultado de salida:

---

12. Búsqueda - indexOf()

arr.indexOf puede obtener la posición del elemento en la matriz

• Si existe este elemento, devuelve su índice.
• Si no existe tal elemento, devuelve -1

let arr = [10, 11, 12, 13, 14, 15];
console.log(arr.indexOf(11), "11的index");  // 输出结果：1 '11的index'
console.log(arr.indexOf(20), "20的index");  // 输出结果：-1 '20的index'

---

13. Buscar - encontrar()

buscar (), 从头到尾buscar, devolver el primer valor que cumpla las condiciones

let arr = [10, 11, 12, 13, 14, 15];
let res = arr.find((item) => item > 10);
console.log(res)  // 输出结果：11

---

14. Buscar - buscarÚltimo()

findLast(), 从尾到头busca, devuelve el primer valor que cumple las condiciones

let arr = [10, 11, 12, 13, 14, 15];
let res = arr.find((item) => item < 14);
console.log(res)  // 输出结果：13

---

15. Buscar - findIndex()

findIndex(), 从头到尾busca, devuelve el valor de índice del primer dato que cumple las condiciones

let arr = [10, 11, 12, 13, 14, 15];
let res = arr.find((item) => item > 10);
console.log(res)  // 输出结果：1

---

16. Buscar - findLastIndex()

findLastIndex(), 从尾到头busca, devuelve el valor de índice del primer dato que cumple las condiciones

let arr = [10, 11, 12, 13, 14, 15];
let res = arr.find((item) => item < 14);
console.log(res)  // 输出结果：3