Testen Sie Ihre Fähigkeiten: Arrays

Zuerst bieten wir Ihnen eine unterhaltsame, interaktive Arrays-Herausforderung, erstellt von unserem Lernpartner, Scrimba.

Sehen Sie sich das eingebettete Scrim an und vervollständigen Sie die Aufgabe auf dem Zeitstrahl (das kleine Geister-Symbol), indem Sie den Anweisungen folgen und den Code bearbeiten. Sobald Sie fertig sind, können Sie das Scrim weiter ansehen, um zu überprüfen, wie die Lösung des Lehrers mit Ihrer übereinstimmt.

Diese Aufgabe bietet Ihnen einige grundlegende Array-Übungen:

1. Erstellen Sie ein Array mit drei Elementen und speichern Sie es in einer Variablen namens myArray. Die Elemente können beliebig sein - wie wäre es mit Ihren Lieblingsspeisen oder Bands?
2. Ändern Sie anschließend die ersten beiden Elemente im Array mit Hilfe der Klammernotation und der Zuweisung.
3. Fügen Sie schließlich ein neues Element am Anfang des Arrays hinzu.

<section></section>

* {
  box-sizing: border-box;
}

p {
  color: purple;
  margin: 0.5em 0;
}

// Add your code here

// Don't edit the code below here!

const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = `Array: ${myArray}`;
section.appendChild(para1);

const myArray = ["cats", "dogs", "chickens"];

myArray[0] = "horses";
myArray[1] = "pigs";

myArray.unshift("crocodiles");

// Don't edit the code below here!
// ...

Kommen wir nun zu einer weiteren Aufgabe. Hier erhalten Sie einen String, mit dem Sie arbeiten sollen.

Um die Aufgabe abzuschließen:

1. Wandeln Sie den String in ein Array um, indem Sie die + Zeichen entfernen. Speichern Sie das Ergebnis in einer Variablen namens myArray.
2. Speichern Sie die Länge des Arrays in einer Variablen namens arrayLength.
3. Speichern Sie das letzte Element im Array in einer Variablen namens lastItem.

const myString = "Ryu+Ken+Chun-Li+Cammy+Guile+Sakura+Sagat+Juri";

// Add your code here

// Don't edit the code below here!

const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = `Array: ${myArray}`;
const para2 = document.createElement("p");
para2.textContent = `The length of the array is ${arrayLength}.`;
const para3 = document.createElement("p");
para3.textContent = `The last item in the array is "${lastItem}".`;
section.appendChild(para1);
section.appendChild(para2);
section.appendChild(para3);

const myString = "Ryu+Ken+Chun-Li+Cammy+Guile+Sakura+Sagat+Juri";

let myArray = myString.split("+");

let arrayLength = myArray.length;

let lastItem = myArray[arrayLength - 1];

// Don't edit the code below here!
// ...

Für diese Array-Aufgabe stellen wir Ihnen ein Start-Array zur Verfügung, und Sie arbeiten in gewisser Weise in die entgegengesetzte Richtung. Sie müssen:

1. Entfernen Sie das letzte Element im Array.
2. Fügen Sie zwei neue Namen am Ende des Arrays hinzu.
3. Iterieren Sie über jedes Element im Array und fügen Sie die Indexnummer nach dem Namen in Klammern hinzu, zum Beispiel Ryu (0). Beachten Sie, dass wir dies im Arrays-Artikel nicht lehren, daher müssen Sie einige Recherchen durchführen.
4. Verbinden Sie schließlich die Array-Elemente zu einem einzelnen String namens myString, mit einem Trennzeichen von "-".

const myArray = [
  "Ryu",
  "Ken",
  "Chun-Li",
  "Cammy",
  "Guile",
  "Sakura",
  "Sagat",
  "Juri",
];

// Add your code here

// Don't edit the code below here!

const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = myString;
section.appendChild(para1);

const myArray = [
  "Ryu",
  "Ken",
  "Chun-Li",
  "Cammy",
  "Guile",
  "Sakura",
  "Sagat",
  "Juri",
];

myArray.pop();

myArray.push("Zangief");
myArray.push("Ibuki");

myArray.forEach((element, index) => {
  const newElement = `${element} (${index})`;
  myArray[index] = newElement;
});

const myString = myArray.join(" - ");

// Don't edit the code below here!
// ...

Für diese Array-Aufgabe stellen wir Ihnen ein Start-Array zur Verfügung, das die Namen einiger Vögel auflistet.

Um die Aufgabe abzuschließen:

1. Finden Sie den Index des Elements "Eagles" und verwenden Sie diesen, um das Element "Eagles" zu entfernen.
2. Erstellen Sie ein neues Array aus diesem, genannt eBirds, das nur Vögel aus dem Original-Array enthält, deren Namen mit dem Buchstaben "E" beginnen. Beachten Sie, dass startsWith() eine großartige Möglichkeit ist, zu überprüfen, ob ein String mit einem bestimmten Zeichen beginnt.

Wenn es funktioniert, sollten Sie "Emus,Egrets" auf der Seite sehen.

const birds = ["Parrots", "Falcons", "Eagles", "Emus", "Caracaras", "Egrets"];

// Add your code here

// Don't edit the code below here!

const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = eBirds;
section.appendChild(para1);

const birds = ["Parrots", "Falcons", "Eagles", "Emus", "Caracaras", "Egrets"];

const eaglesIndex = birds.indexOf("Eagles");
birds.splice(eaglesIndex, 1);

function startsWithE(bird) {
  return bird.startsWith("E");
}
const eBirds = birds.filter(startsWithE);

// Don't edit the code below here!
// ...