Làm sao để lặp đi lặp lại các phần tử trong một mảng bản đồ ()


Artículo original escrito bởi Kingsley Ubah
Nghệ thuật gốc Hướng dẫn JavaScript Array.map() – Cách lặp qua các phần tử trong một mảng với map()
Traducido và Adaptado por Santiago Yanguas

Sau khi hoàn thành ES6 (EmcaScript 2015), giới thiệu một liên kết mới của các phương thức để lặp lại sobre un arreglo. Uno de los másutiles es el phương pháp map().

Array.prototype.map() là một phương pháp hợp nhất trong các tập hợp dữ liệu, để lặp lại việc duyệt qua các phần tử trong JavaScript. Piensa en él, como un bucle para avanzar de un elemento a otro en una lista, manteniendo el orden y la posición de cada elemento.

Este method toma una función callback, que se llama por cada nuevo elemento sobre el que se itera.

Chức năng gọi lại recibe tres parámetros:

  • El valor thực tế.
  • Su índice.
  • El areglo de Destiny

Si eres un novato que lucha por entender cómo usar el method map() o qué hace precisionamente, entonces este artículo es para ti.

Có chức năng phương pháp map() vi JavaScript

Hãy tưởng tượng điều này: hay una cola de personas en la puerta de un Hospital Esperando a ser vacunadas. Esto significa que aún no han sido vacunados.

Uno por uno, un medico administra la vacuna a todos ellos. El medico lo hace repitiendo la fila. En un extremo, or un groupas de personas que aún no han sido vacunadas. El medico toma a todos y cada uno de ellos, les administra la vacuna y los devuelve a una mới línea de personas vacunadas.

Đọc thêm  JavaScript:Void(0) có nghĩa là gì?

En un extremo, hay un arreglo (A) sobre el que se quiere operar. map() toma todos los elementos de ese arreglo (A), realiza una acción complee sobre cada uno de esos elementos y los devuelve en un nuevo arreglo (B).

Có cách sử dụng phương pháp map(): Ejemplo de vengadores

Para ilustrar cómo funciona map() vi JavaScript, coiemos una lista de nombres de algunos de nuestros Vengadores favorites. El problema es que los nombres de esta lista no están completos: les falta un sufijo importante.

Côn map()podemos tomar todos los nombres de la matriz y añadir el sufijo “man” a todos y cada uno de ellos:

let prefijos = ["super", "spider", "ant", "iron"]
let sufijo = "man";

let nombresCompletos = prefijos.map(prefijo => prefijo + sufijo);

console.log(nombresCompletos);

// ["superman", "spiderman", "antman", "ironman"]
Añadiendo el sufijo man a cada superheroe
map1-1
MÃ HÌNH ẢNH

¿Qué pasa con las mujeres(phụ nữ)?

Lo siento, mi lỗi. Me di cuenta de mi error y decidí incluir un personaje femenino en la sơn lót vị trí sắp xếp. Cada elemento dentro de an arreglo se identifica por un valor único, su índice (o posición en el arreglo). El primer phần tử gân một chỉ số de el segundo un índice de 1y así sucesivamente.

Dado que ahora hay một siêu anh hùng trong danh sách, có xu hướng là bạn đã nhận được sufijo đúng để gửi thư từ siêu anh hùng.

dado que map() también toma el índice del elemento sobre el que estamos iterando, podemos hacer esto comprobando el índice de nuestro héroe and asegurándonos de que utilizamos el sufijo “woman” for el el indice de nuestro matriz:

let prefijos = ["wonder", "spider", "ant", "iron"]
let hombre = "man";
let mujer = "woman";

let nombresCompletos = prefijos.map(function(prefijo, indice) {
    return (indice == 0) ? prefijo + mujer : prefijo + hombre;
 });

console.log(nombresCompletos);

["wonderwoman", "spiderman", "antman", "ironman"]
Nombre hoàn thành
bản đồ--8
Kết quả

Cómo utilizar el argumento del índice

Además del valor sobre el que se itera, map toma también su posición de índice. Điều này rất hữu ích nếu chúng được thực hiện khác nhau về các mẹo hoạt động phụ thuộc vào vị trí của chỉ số.

Đọc thêm  Cách chuyển đổi chuỗi thành số trong JavaScript (kèm ví dụ)

En el ejemplo anterior, añadimos un sufijo diferente comprobando el índice.

Đối với người điều khiển vị trí thứ nhất của cada uno de nuestros elementos dentro del arreglo, podemos hacer lo siguiente:

let nombresCompletos = ["wonderwoman", "spiderman", "antman", "ironman"]

nombresCompletos.map(function(nombre, indice) {
    console.log(${nombre} esta en la posición ${indice});
});

/* Resultado del anterior código
"wonderwoman esta en la posición 0"
"spiderman esta en la posición 0"
"antman esta en la posición 0"
"ironman esta en la posición 0"
*/
bản đồ--1
Resultado del código original en inglés

Multiplicar todos los elementos del areglo por 2

Trabajemos ahora un poco con los số. Trong ví dụ này, đơn giản là queremos nhân số cada số trên hợp đồng đích của số phận và sau đó người chuyển giao sản phẩm của bạn thành một hợp kim mới:

let numeros = [10, 20, 30, 40]
let multiplicador = 2;

let productos = numeros.map(numero => numero * multiplicador);

console.log(productos);

// [20, 40, 60, 80]
areglo de numeros multiplicados por 2

Làm lại số entero mes cercano

¿Qué pasa si tenemos un a areglo de số thập phân, pero queremo que cada uno de esos số thập phân se redondee al entero cercano hơn?

let numeros = [3.7, 4.9, 6.2]
let redondeados = numeros.map(function(numero) {
    return Math.round(numero);
})

console.log(redondeados);

// [4, 5, 6]
Arreglo de numberer redondeados
bản đồ--2
Kết quả

Cambiar cadenas de texto por số

Tenemos una lista de numberos que son de tipo string (cadena). Tội lỗi cấm vận, queremos convertir cada uno de ellos al tipo Number (số):

let textos = ["10","20","30"]

let numeros = textos.map(function(texto) {
    return Number(texto);
})

console.log(numeros);

// [10, 20, 30]
Cadenas de texto a numeros

Conseguir nombres reales de los Vengadores

En este ejemplo, estamos trabajando con objetos. Tenemos cinco vengadores en el arreglo y cada uno tiene tanto un nombre real como un nombre de héroe. Tội lỗi cấm vận, một mình queremos recuperar sus nombres reales en el nuevo arreglo.

Đọc thêm  JavaScript 随机数—— 如何在 JS 中生成随机数
let vengadores = [
    {nombre: "steve rogers", nombreHeroe: "captain america"},
    {nombre: "tony stark", nombreHeroe: "iron man"},
    {nombre: "bruce banner", nombreHeroe: "the hulk"},
    {nombre: "peter parker", nombreHeroe: "spiderman"},
    {nombre: "tchalla", nombreHeroe: "black panther"}
]

let nombresReales = vengadores.map(vengador => vengador.nombre);

console.log(nombresReales);

// ["steve rogers", "tony stark", "bruce banner", "peter parker", "tchalla"]
Arreglo de nombres
bản đồ--5-1
Resultado del nombre de los vengadores

Conseguir los nombres de los héroes de los Vengadores

Para obtener solo sus nombres de héroe, hacemos casi lo mismo, solo que en este caso accedemos a la propiedad nombreHeroe:

let vengadores = [
    {nombre: "steve rogers", nombreHeroe: "captain america"},
    {nombre: "tony stark", nombreHeroe: "iron man"},
    {nombre: "bruce banner", nombreHeroe: "the hulk"},
    {nombre: "peter parker", nombreHeroe: "spiderman"},
    {nombre: "tchalla", nombreHeroe: "black panther"}
];

let nombresReales = vengadores.map(vengador => vengador.nombreHeroe);

console.log(nombresReales);

// ["captain america", "iron man", "the hulk", "spiderman", "black panther"]
Resultado del nombre de los vengadores
bản đồ--10
Kết quả

Có thể tách một chức năng cho một añadir a map

En lugar definir una function directamente dentro de map()podemos definir la función fuera y luego llamarla dentro de nuestra función map():

let vengadores = [
    {nombre: "steve rogers", nombreHeroe: "captain america"},
    {nombre: "tony stark", nombreHeroe: "iron man"},
    {nombre: "bruce banner", nombreHeroe: "the hulk"},
    {nombre: "peter parker", nombreHeroe: "spiderman"},
    {nombre: "tchalla", nombreHeroe: "black panther"}
];

let obtenerNombre = vengador => vengador.nombre;
let nombresReales = vengadores.map(obtenerNombre);

console.log(nombresReales);

// ["steve rogers", "tony stark", "bruce banner", "peter parker", "tchalla"]
Quitar complejidad al map mediante separación de funciones

Có chức năng lập luận đối số

Antes dije que en cada iteración, the method map() toma el valor sobre el que se itera y también su posición de indice. Hay tranh luận otro que añadir a esos dos, los argumentos del arreglo.

tranh luận arr đại diện cho một cuộc tranh luận về số phận sobre el que se hace un bucle, junto con todo su contenido. Đối với cuộc tranh luận này, sẽ có xe buýt và một cuộc tranh luận hoàn chỉnh để đối chiếu với thuật toán.

En este ejemplo, accederemos al parametro arr para buscar y comprobar si el elemento fact es el último de la lista. Si no lo es, accedemos al siguiente elemento y lo restamos del elemento thực tế. Si es el último, simplemente lo devolvemos.

const arregloViejo = [33, 20, 10, 5];
const nuevoArreglo = arregloViejo.map((valorActual, indice, arr) => {
    let siguienteItem = indice + 1 < arr.length ? arr[indice + 1] : 0
    return valorActual - siguienteItem;
});


console.log(nuevoArreglo);

// [13, 10, 5, 5]
Buscar en el arreglo tổng

kết luận

phương pháp map() nhiên liệu giới thiệu trong ES6. Với phương pháp này, bạn có thể tham gia và thực hiện một liên kết nhất quán trong từng phần tử trong một bộ sưu tập hợp đồng.

Toma una función callback que llama por cada nuevo elemento sobre el que itera.

En este hướng dẫn, ông giới thiệu phương pháp map()anh ấy minh họa chức năng của nó với một phép tương tự và anh ấy đã thực hiện các thuật toán tương tự ejemplos prácticos de su uso en JavaScript.

Espero que hayas sacado allgoutil de este artículo. Nếu các hướng dẫn liên quan đến lập trình giống như vậy, người dùng sẽ truy cập blog của tôi. Tất cả công khai đều đặn các bài viết sobre desarrollo de phần mềm.

Gracias por leer y hasta pronto.
Tái bút: Khi bạn bắt đầu học JavaScript, anh ấy đã tạo ra một Sách điện tử có 50 chủ đề trong JavaScript với các ghi chú kỹ thuật số được phát hành một cách nhanh chóng. Compruébalo đấy.





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status