Estruturas de dados e algoritmos JavaScript - arrays e métodos comuns de arrays

---

1. splice() - corte

splice() é frequentemente usado para recortar arrays e pode receber três parâmetros.

• Parâmetro 1: comece a cortar a partir do primeiro item da matriz
• Parâmetro 2: quantos itens recortar
• Parâmetro três (não há necessidade de passar): quais dados anexar

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 Depois de recortar e anexar dados

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. sort() - classificação

sort() é frequentemente usado para classificar arrays. Ele pode classificar arrays simples ou objetos com base em um determinado valor no objeto.

• X - Y: classificar de pequeno a grande
• Y - X: classificar de grande para pequeno

2.1 Do pequeno ao 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 Do maior ao 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 Classifique objetos de acordo com um determinado valor no 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() – conexão

concat() pode concatenar dois arrays

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. Every() – todos os valores satisfazem as condições

every() pode percorrer o array e o valor de retorno é um valor booleano

• 所有项均满足条件时Retorna verdadeiro apenas quando é um array
• Caso contrário, retorne falso

4.1 Ter valor não atende às condições

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

4.2 Todas as condições foram atendidas

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

---

5. some() – pelo menos um atende às condições

some() pode percorrer o array e o valor de retorno é um valor booleano. Observe a diferença do método every()

• matriz 至少一项满足条件时, retorna verdadeiro
• Caso contrário, retorne falso

5.1 Todos os valores não satisfazem a condição

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

5.2 Pelo menos uma condição é atendida

 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() é usado para 过滤remover certos elementos de um array e retornar os 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 em um array

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() – retorna um novo array

Retorna um novo array, os elementos do array são os valores do array original após chamar a função.

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() - travessia de loop

O método de travessia de loop mais comumente usado por indivíduos, é muito rápido e 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. Introdução ao método reduzir()

O método reduz() executa uma função de redução que você fornece (em ordem crescente) em cada elemento do array, resumindo seus resultados em um único valor de retorno. O método de redução pode fazer muitas coisas.Reduzir pode fazer tudo o que o loop traversal pode fazer, como somatório de array, multiplicação de array, número de ocorrências de elementos em um array, desduplicação de array, etc.

9.1 Acumulação de array

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

9.2 Multiplicação cumulativa de array

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

9.3 Desduplicação de array

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 Converter um array bidimensional em um array 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]

Interlúdio, aqui está uma maneira mais simples de converter um array bidimensional em um array

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 as ocorrências dos 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

Existem vários objetos iteradores e diferentes valores podem ser obtidos por meio de diferentes objetos iteradores.

• arr.keys() obtém a chave de cada item do array
• arr.values() obtém o valor de cada item do array
• arr.entries() obtém cada par de valores-chave na matriz

10.1 Loop for simples

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

10.2 O objeto iterador obtém os pares chave-valor do array

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

Resultado de saída:

10.3 Objetos iteradores só recebem chaves

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

Resultado de saída:

10.4 Objetos iteradores apenas obtêm valores

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

Resultado de saída:

---

11. Matriz.de()

Array.from() pode converter estruturas semelhantes a array em arrays

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

Resultado de saída:

---

12. Pesquisa - indexOf()

arr.indexOf pode obter a posição do elemento na matriz

• Se existir este elemento, retorne seu índice
• Se não existir tal elemento, retorne -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. Pesquisa - encontrar()

find(), 从头到尾pesquise, retorne o primeiro valor que atenda às condições

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

---

14. Pesquisa - findLast()

findLast(), 从尾到头pesquise, retorne o primeiro valor que atenda às condições

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

---

15. Pesquisa - findIndex()

findIndex(), 从头到尾pesquisa, retorna o valor do índice dos primeiros dados que atendem às condições

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

---

16. Pesquisa - findLastIndex()

findLastIndex(), 从尾到头pesquisa, retorna o valor do índice dos primeiros dados que atendem às condições

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