JavaScript-map()-Methode

Die Methode „map()“ erstellt ein neues Array, das mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element im aufrufenden Array gefüllt wird.

1. Hier ist ein einfaches map()-Beispiel:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

console.log(doubled);

// Output: [2, 4, 6, 8, 10]

1. Erstellen Sie eine JSON-Datei mit Fahrzeuginformationen und zeigen Sie sie mithilfe von map() an.

Erstellen Sie zunächst eine JSON-Datei mit dem Namen „cars.json:“

[
  {
    "name": "Toyota Camry",
    "model": "2023",
    "image": "https://example.com/toyota_camry.jpg"
  },
  {
    "name": "Honda Accord",
    "model": "2022",
    "image": "https://example.com/honda_accord.jpg"
  },
  {
    "name": "Tesla Model 3",
    "model": "2024",
    "image": "https://example.com/tesla_model_3.jpg"
  }
]

Erstellen Sie eine HTML-Datei index.html und verwenden Sie JavaScript, um die Fahrzeuginformationen abzurufen und anzuzeigen:

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Car Display</title>
  <style>
    .car {
      border: 1px solid #ddd;
      padding: 10px;
      margin: 10px;
      text-align: center;
    }
    .car img {
      width: 100px;
      height: auto;
    }
  </style>


  <h1>Car Information</h1>
  <div id="car-container"></div>

  <script>
    // Here we have Fetch the car data
    fetch('cars.json')
      .then(response => response.json())
      .then(data => {
        const carContainer = document.getElementById('car-container');
        carContainer.innerHTML = data.map(car => `
          <div class="car">
            <h2>JavaScript-map()-Methode
            <p>Model: ${car.model}
            <img src="${car.image}" alt="JavaScript-map()-Methode">
          
        `).join('');
      })
      .catch(error => console.error('Error fetching the car data:', error));
  </script>

Stellen Sie sicher, dass sich die Datei „cars.json“ im selben Verzeichnis wie Ihre HTML-Datei befindet, oder passen Sie die Abruf-URL entsprechend an

Das obige ist der detaillierte Inhalt vonJavaScript-map()-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!