mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-08 16:00:58 -04:00
chore(i18n,learn): processed translations (#47330)
This commit is contained in:
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 5a661e0f1068aca922b3ef17
|
||||
title: Auf den Inhalt eines Arrays mit der Klammernotation zugreifen
|
||||
challengeType: 1
|
||||
forumTopicId: 301149
|
||||
dashedName: access-an-arrays-contents-using-bracket-notation
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die grundlegende Eigenschaft jeder Datenstruktur ist natürlich die Fähigkeit, nicht nur Daten zu speichern, sondern diese Daten auch auf Befehl abrufen zu können. Nachdem wir nun gelernt haben, wie man ein Array erstellt, wollen wir uns überlegen, wie wir auf die Informationen in diesem Array zugreifen können.
|
||||
|
||||
Wenn wir ein einfaches Array wie unten definieren, sind darin 3 Elemente enthalten:
|
||||
|
||||
```js
|
||||
let ourArray = ["a", "b", "c"];
|
||||
```
|
||||
|
||||
In einem Array hat jedes Array-Element einen <dfn>Index</dfn>. Dieser Index verweist zum einen auf die Position des jeweiligen Elements innerhalb des Arrays, zum anderen kann es über ihn referenziert werden. Dabei ist zu beachten, dass JavaScript-Arrays <dfn>nullbasiert indiziert</dfn> sind, d. h. das erste Element eines Arrays befindet sich eigentlich an der ***nullten*** Position, nicht der ersten. Um ein Element aus einem Array abzurufen, können wir einen Index in eckige Klammern schreiben und ihn an das Ende eines Arrays hängen, oder noch häufiger, an eine Variable, die ein Array-Objekt referenziert. Diese Schreibweise nennt man <dfn>Klammernotation</dfn>. Wenn wir beispielsweise das `a` aus `ourArray` abrufen möchten, um es einer Variablen zuzuweisen, können wir das mit folgendem Code tun:
|
||||
|
||||
```js
|
||||
let ourVariable = ourArray[0];
|
||||
```
|
||||
|
||||
Nun enthält `ourVariable` den Wert `a`.
|
||||
|
||||
Neben dem Zugreifen auf einen Wert, der mit einem Index assoziiert ist, ermöglicht dir diese Notation auch das *Setzen* eines Wertes über einen Index:
|
||||
|
||||
```js
|
||||
ourArray[1] = "not b anymore";
|
||||
```
|
||||
|
||||
Mit der Klammernotation haben wir nun das Element am Index 1 mit dem String `b` durch `not b anymore` ersetzt. `ourArray` enthält nun `["a", "not b anymore", "c"]`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Um diese Aufgabe abzuschließen, setze die zweite Position (Index `1`) von `myArray` auf einen Wert deiner Wahl, ausgenommen dem Buchstaben `b`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`myArray[0]` sollte gleich dem Buchstaben `a` sein
|
||||
|
||||
```js
|
||||
assert.strictEqual(myArray[0], 'a');
|
||||
```
|
||||
|
||||
`myArray[1]` sollte nicht gleich dem Buchstaben `b` sein
|
||||
|
||||
```js
|
||||
assert.notStrictEqual(myArray[1], 'b');
|
||||
```
|
||||
|
||||
`myArray[2]` sollte gleich dem Buchstaben `c` sein
|
||||
|
||||
```js
|
||||
assert.strictEqual(myArray[2], 'c');
|
||||
```
|
||||
|
||||
`myArray[3]` sollte gleich dem Buchstaben `d` sein
|
||||
|
||||
```js
|
||||
assert.strictEqual(myArray[3], 'd');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let myArray = ["a", "b", "c", "d"];
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
console.log(myArray);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let myArray = ["a", "b", "c", "d"];
|
||||
myArray[1] = "e";
|
||||
```
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b1a
|
||||
title: Zugriff auf Eigenschaftsnamen mit der Klammernotation
|
||||
challengeType: 1
|
||||
forumTopicId: 301150
|
||||
dashedName: access-property-names-with-bracket-notation
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In der ersten Aufgabe zu Objekten haben wir erwähnt, dass die Klammernotation eine Möglichkeit bietet, auf Eigenschaftswerte zuzugreifen, indem eine Variable ausgewertet wird. Stell dir zum Beispiel vor, unser `foods` Objekt wird in einem Programm für eine Supermarktkasse verwendet. Wir haben eine Funktion, die `selectedFood` festlegt und wir möchten überprüfen, ob es im Objekt `foods` vorhanden ist. Dies könnte so aussehen:
|
||||
|
||||
```js
|
||||
let selectedFood = getCurrentFood(scannedItem);
|
||||
let inventory = foods[selectedFood];
|
||||
```
|
||||
|
||||
Dieser Code wird den in der Variable `selectedFood` gespeicherten Schlüsselwert auswerten und dann den entsprechenden Wert zu diesem Schlüssel aus dem Objekt `foods` ausgeben oder `undefined` falls er nicht vorhanden ist. Die Klammernotation ist sehr nützlich, weil Objekteigenschaften vor der Laufzeit manchmal unbekannt sind oder dynamischer auf sie zugegriffen werden muss.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wir haben eine Funktion namens `checkInventory` definiert, die ein gescanntes Produkt als ein Argument erhält. Gib den aktuellen Wert zum `scannedItem` Schlüssel des `foods` Objekts zurück. Du kannst davon ausgehen, dass nur gültige Schlüssel als ein Argument an `checkInventory` übergeben werden.
|
||||
|
||||
# --hints--
|
||||
|
||||
`checkInventory` sollte eine Funktion sein.
|
||||
|
||||
```js
|
||||
assert.strictEqual(typeof checkInventory, 'function');
|
||||
```
|
||||
|
||||
Das `foods` Objekt sollte nur die folgenden Schlüssel-Wert-Paare enthalten: `apples: 25`, `oranges: 32`, `plums: 28`, `bananas: 13`, `grapes: 35`, `strawberries: 27`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(foods, {
|
||||
apples: 25,
|
||||
oranges: 32,
|
||||
plums: 28,
|
||||
bananas: 13,
|
||||
grapes: 35,
|
||||
strawberries: 27
|
||||
});
|
||||
```
|
||||
|
||||
`checkInventory("apples")` sollte `25` zurückgeben.
|
||||
|
||||
```js
|
||||
assert.strictEqual(checkInventory('apples'), 25);
|
||||
```
|
||||
|
||||
`checkInventory("bananas")` sollte `13` zurückgeben.
|
||||
|
||||
```js
|
||||
assert.strictEqual(checkInventory('bananas'), 13);
|
||||
```
|
||||
|
||||
`checkInventory("strawberries")` sollte `27` zurückgeben.
|
||||
|
||||
```js
|
||||
assert.strictEqual(checkInventory('strawberries'), 27);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let foods = {
|
||||
apples: 25,
|
||||
oranges: 32,
|
||||
plums: 28,
|
||||
bananas: 13,
|
||||
grapes: 35,
|
||||
strawberries: 27
|
||||
};
|
||||
|
||||
function checkInventory(scannedItem) {
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
}
|
||||
|
||||
console.log(checkInventory("apples"));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let foods = {
|
||||
apples: 25,
|
||||
oranges: 32,
|
||||
plums: 28,
|
||||
bananas: 13,
|
||||
grapes: 35,
|
||||
strawberries: 27
|
||||
};
|
||||
|
||||
function checkInventory(scannedItem) {
|
||||
return foods[scannedItem];
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 587d78b2367417b2b2512b0e
|
||||
title: Füge Elemente mit push() und unshift() einem Array hinzu
|
||||
challengeType: 1
|
||||
forumTopicId: 301151
|
||||
dashedName: add-items-to-an-array-with-push-and-unshift
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die Länge eines Arrays ist, wie die Datentypen, die es enthalten kann, nicht festgelegt. Arrays können mit einer beliebigen Anzahl von Elementen definiert werden, und Elemente können im Laufe der Zeit hinzugefügt oder entfernt werden; mit anderen Worten, Arrays sind <dfn>veränderlich (mutable)</dfn>. In dieser Aufgabe werden wir uns zwei Methoden ansehen, mit denen wir ein Array programmatisch verändern können: `Array.push()` und `Array.unshift()`.
|
||||
|
||||
Beide Methoden nehmen ein oder mehrere Elemente als Parameter entgegen und fügen diese Elemente dem Array hinzu, auf dem die Methode aufgerufen wird; die Methode `push()` fügt Elemente am Ende eines Arrays hinzu und `unshift()` fügt Elemente am Anfang hinzu. Beachte Folgendes:
|
||||
|
||||
```js
|
||||
let twentyThree = 'XXIII';
|
||||
let romanNumerals = ['XXI', 'XXII'];
|
||||
|
||||
romanNumerals.unshift('XIX', 'XX');
|
||||
```
|
||||
|
||||
`romanNumerals` würde den Wert `['XIX', 'XX', 'XXI', 'XXII']` haben.
|
||||
|
||||
```js
|
||||
romanNumerals.push(twentyThree);
|
||||
```
|
||||
|
||||
`romanNumerals` würde den Wert `['XIX', 'XX', 'XXI', 'XXII', 'XXIII']` haben. Beachte, dass wir auch Variablen übergeben können, was uns noch mehr Flexibilität bei der dynamischen Änderung unserer Array-Daten ermöglicht.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wir haben eine Funktion definiert, `mixedNumbers`, der wir ein Array als Argument übergeben. Ändere die Funktion, indem du `push()` und `unshift()` verwendest, um `'I', 2, 'three'` am Anfang des Arrays und `7, 'VIII', 9` am Ende hinzuzufügen, sodass das zurückgegebene Array Darstellungen der Zahlen 1-9 in der Reihenfolge enthält.
|
||||
|
||||
# --hints--
|
||||
|
||||
`mixedNumbers(["IV", 5, "six"])` sollte jetzt `["I", 2, "three", "IV", 5, "six", 7, "VIII", 9]` zurückgeben.
|
||||
|
||||
```js
|
||||
assert.deepEqual(mixedNumbers(['IV', 5, 'six']), [
|
||||
'I',
|
||||
2,
|
||||
'three',
|
||||
'IV',
|
||||
5,
|
||||
'six',
|
||||
7,
|
||||
'VIII',
|
||||
9
|
||||
]);
|
||||
```
|
||||
|
||||
Die Funktion `mixedNumbers` sollte die Methode `push()` verwenden.
|
||||
|
||||
```js
|
||||
assert(mixedNumbers.toString().match(/\.push/));
|
||||
```
|
||||
|
||||
Die Funktion `mixedNumbers` sollte die Methode `unshift()` verwenden.
|
||||
|
||||
```js
|
||||
assert(mixedNumbers.toString().match(/\.unshift/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function mixedNumbers(arr) {
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
return arr;
|
||||
}
|
||||
|
||||
console.log(mixedNumbers(['IV', 5, 'six']));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function mixedNumbers(arr) {
|
||||
arr.push(7,'VIII',9);
|
||||
arr.unshift('I',2,'three');
|
||||
return arr;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d78b3367417b2b2512b11
|
||||
title: Füge Elemente mit der splice() Methode hinzu
|
||||
challengeType: 1
|
||||
forumTopicId: 301152
|
||||
dashedName: add-items-using-splice
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Kannst du dich an die letzte Herausforderung erinnern, in der wir erwähnten, dass `splice()` bis zu drei Parameter aufnehmen kann? Nun, du kannst den dritten Parameter, welcher aus einem oder mehreren Element(en) besteht, dem Array hinzufügen. Das kann unglaublich nützlich sein, um schnell ein Element oder ein Satz an Elementen für ein anderes auszutauschen.
|
||||
|
||||
```js
|
||||
const numbers = [10, 11, 12, 12, 15];
|
||||
const startIndex = 3;
|
||||
const amountToDelete = 1;
|
||||
|
||||
numbers.splice(startIndex, amountToDelete, 13, 14);
|
||||
console.log(numbers);
|
||||
```
|
||||
|
||||
Das zweite Auftreten von `12` wird entfernt und wir fügen `13` und `14` an den gleichen Index hinzu. Der `numbers` Array würde jetzt `[ 10, 11, 12, 13, 14, 15 ]` sein.
|
||||
|
||||
Hier starten wir mit einem Zahlen-Array. Anschließend übergeben wir Folgendes an `splice()`: Der Index, mit dem Elemente gelöscht werden sollen (3), die Anzahl der zu löschenden Elemente (1), und die verbleibenden Argumente (13, 14) werden am selben Index beginnend eingefügt. Beachte, dass es beliebig viele Elemente geben kann (durch Kommata getrennt), welche dem `amountToDelete` folgen, von denen jedes eingefügt wird.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wir haben eine Funktion `htmlColorNames` definiert, die ein Array aus HTML-Farben als Argument verwendet. Ändere die Funktion, indem du `splice()` benutzt, um die ersten zwei Elemente des Arrays zu entfernen und um `'DarkSalmon'` und `'BlanchedAlmond'` an ihre jeweiligen Stellen hinzuzufügen.
|
||||
|
||||
# --hints--
|
||||
|
||||
`htmlColorNames` sollte `["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurquoise", "FireBrick"]` zurückgeben.
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
htmlColorNames([
|
||||
'DarkGoldenRod',
|
||||
'WhiteSmoke',
|
||||
'LavenderBlush',
|
||||
'PaleTurquoise',
|
||||
'FireBrick'
|
||||
]),
|
||||
[
|
||||
'DarkSalmon',
|
||||
'BlanchedAlmond',
|
||||
'LavenderBlush',
|
||||
'PaleTurquoise',
|
||||
'FireBrick'
|
||||
]
|
||||
);
|
||||
```
|
||||
|
||||
Die Funktion `htmlColorNames` sollte die Methode `splice()` verwenden.
|
||||
|
||||
```js
|
||||
assert(/.splice/.test(code));
|
||||
```
|
||||
|
||||
Du solltest nicht`shift()` oder `unshift()` verwenden.
|
||||
|
||||
```js
|
||||
assert(!/shift|unshift/.test(code));
|
||||
```
|
||||
|
||||
Du solltest keine Array-Klammernotation verwenden.
|
||||
|
||||
```js
|
||||
assert(!/\[\d\]\s*=/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function htmlColorNames(arr) {
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
return arr;
|
||||
}
|
||||
|
||||
console.log(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurquoise', 'FireBrick']));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function htmlColorNames(arr) {
|
||||
arr.splice(0,2,'DarkSalmon', 'BlanchedAlmond');
|
||||
return arr;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,124 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b18
|
||||
title: Hinzufügen von Schlüssel-Wert-Paaren zu JavaScript-Objekten
|
||||
challengeType: 1
|
||||
forumTopicId: 301153
|
||||
dashedName: add-key-value-pairs-to-javascript-objects
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Im Grunde genommen sind Objekte nur Sammlungen von <dfn>key-value-</dfn> Paaren. Mit anderen Worten sind sie Teile von Daten (<dfn>values</dfn>), die zu eindeutigen Identifikatoren namens <dfn>properties</dfn> zugeordnet sind (<dfn>keys</dfn>). Schau dir ein Beispiel an:
|
||||
|
||||
```js
|
||||
const tekkenCharacter = {
|
||||
player: 'Hwoarang',
|
||||
fightingStyle: 'Tae Kwon Doe',
|
||||
human: true
|
||||
};
|
||||
```
|
||||
|
||||
Der obere Code definiert ein Charakter-Objekt eines Tekken-Videospiels, das `tekkenCharacter` genannt wird. Es hat drei Eigenschaften, von denen jede einem bestimmten Wert zugeordnet wird. Wenn du eine zusätzliche Eigenschaft, wie z. B. "Herkunft", hinzufügen möchtest, kannst du dies tun, indem du dem Objekt `origin` zuweist:
|
||||
|
||||
```js
|
||||
tekkenCharacter.origin = 'South Korea';
|
||||
```
|
||||
|
||||
Dies verwendet Punktnotation. Wenn du das Objekt `tekkenCharacter` beobachten wolltest, so wird es jetzt die Eigenschaft `origin` enthalten. Hwoarang hatte auch deutlich orangefarbenes Haar. Du kannst diese Eigenschaft mit Klammernotation hinzufügen, indem du das Folgende tust:
|
||||
|
||||
```js
|
||||
tekkenCharacter['hair color'] = 'dyed orange';
|
||||
```
|
||||
|
||||
Klammernotation ist erforderlich, wenn deine Eigenschaft ein Leerzeichen hat oder wenn du eine Variable verwenden möchtest, um eine Eigenschaft zu benennen. Im obigen Fall ist die Eigenschaft in Anführungszeichen eingeschlossen, um sie als Zeichenfolge zu kennzeichnen, und wird genau wie gezeigt hinzugefügt. Ohne Anführungszeichen wird sie als Variable ausgewertet, und der Name der Eigenschaft ist der Wert, den die Variable hat. Hier ist ein Beispiel mit einer Variablen:
|
||||
|
||||
```js
|
||||
const eyes = 'eye color';
|
||||
|
||||
tekkenCharacter[eyes] = 'brown';
|
||||
```
|
||||
|
||||
Nachdem man all die Beispiele hinzugefügt hat, wird das Objekt wie folgt aussehen:
|
||||
|
||||
```js
|
||||
{
|
||||
player: 'Hwoarang',
|
||||
fightingStyle: 'Tae Kwon Doe',
|
||||
human: true,
|
||||
origin: 'South Korea',
|
||||
'hair color': 'dyed orange',
|
||||
'eye color': 'brown'
|
||||
};
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Ein Objekt `foods` wurde mit drei Einträgen erstellt. Verwende die Syntax deiner Wahl und füge drei weitere Einträge hinzu: `bananas` mit einem Wert von `13`, `grapes` mit einem Wert von `35`, und `strawberries` mit einem Wert von `27`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`foods` sollte ein Objekt sein.
|
||||
|
||||
```js
|
||||
assert(typeof foods === 'object');
|
||||
```
|
||||
|
||||
Das Objekt `foods` sollte einen Schlüssel `bananas` mit einem Wert von `13` haben.
|
||||
|
||||
```js
|
||||
assert(foods.bananas === 13);
|
||||
```
|
||||
|
||||
Das Objekt `foods` sollte einen Schlüssel `grapes` mit einem Wert von `35` haben.
|
||||
|
||||
```js
|
||||
assert(foods.grapes === 35);
|
||||
```
|
||||
|
||||
Das Objekt `foods` sollte einen Schlüssel `strawberries` mit einem Wert von `27` haben.
|
||||
|
||||
```js
|
||||
assert(foods.strawberries === 27);
|
||||
```
|
||||
|
||||
Die Schlüssel-Wert-Paare sollten mit Punkt- oder Klammernotation angegeben werden.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.search(/bananas:/) === -1 &&
|
||||
code.search(/grapes:/) === -1 &&
|
||||
code.search(/strawberries:/) === -1
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let foods = {
|
||||
apples: 25,
|
||||
oranges: 32,
|
||||
plums: 28
|
||||
};
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
|
||||
console.log(foods);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let foods = {
|
||||
apples: 25,
|
||||
oranges: 32,
|
||||
plums: 28
|
||||
};
|
||||
|
||||
foods['bananas'] = 13;
|
||||
foods['grapes'] = 35;
|
||||
foods['strawberries'] = 27;
|
||||
```
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d7b7b367417b2b2512b14
|
||||
title: Prüfe das Vorhandensein eines Elements mit indexOf()
|
||||
challengeType: 1
|
||||
forumTopicId: 301154
|
||||
dashedName: check-for-the-presence-of-an-element-with-indexof
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Da Arrays jederzeit geändert oder *mutiert* werden können, gibt es keine Garantie dafür, wo sich ein bestimmtes Datenelement in einem bestimmten Array befindet, oder ob es überhaupt noch existiert. Zum Glück bietet uns JavaScript eine andere eingebaute Methode, `indexOf()`, welche es uns erlaubt, schnell und einfach das Vorhandensein eines Elements in einem Array zu überprüfen. `indexOf()` benötigt ein Element als Parameter und gibt beim Aufrufen die Position oder den Index des Elements wieder, oder `-1`, wenn das Element nicht im Array existiert.
|
||||
|
||||
Zum Beispiel:
|
||||
|
||||
```js
|
||||
let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears'];
|
||||
|
||||
fruits.indexOf('dates');
|
||||
fruits.indexOf('oranges');
|
||||
fruits.indexOf('pears');
|
||||
```
|
||||
|
||||
`indexOf('dates')` gibt `-1` wieder, `indexOf('oranges')` gibt `2` wieder, und `indexOf('pears')` gibt `1` wieder (der erste Index, bei dem jedes Element existiert).
|
||||
|
||||
# --instructions--
|
||||
|
||||
`indexOf()` kann unglaublich nützlich für das schnelle Überprüfen zum Vorhandensein eines Elements in einem Array sein. Wir haben eine Funktion `quickCheck` definiert, welche einen Array und ein Element als Argumente benötigt. Ändere die Funktion, indem du `indexOf()` so benutzt, dass es `true` zurückgibt, wenn das übergebene Element im Array existiert, und `false`, wenn es nicht der Fall ist.
|
||||
|
||||
# --hints--
|
||||
|
||||
Die Funktion `quickCheck` sollte einen Boolean (`true` oder `false`) zurückgeben, keinen String (`"true"` oder `"false"`)
|
||||
|
||||
```js
|
||||
assert.isBoolean(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'));
|
||||
```
|
||||
|
||||
`quickCheck(["squash", "onions", "shallots"], "mushrooms")` sollte `false` zurückgeben
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'),
|
||||
false
|
||||
);
|
||||
```
|
||||
|
||||
`quickCheck(["onions", "squash", "shallots"], "onions")` sollte `true` zurückgeben
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
quickCheck(['onions', 'squash', 'shallots'], 'onions'),
|
||||
true
|
||||
);
|
||||
```
|
||||
|
||||
`quickCheck([3, 5, 9, 125, 45, 2], 125)` sollte `true` zurückgeben
|
||||
|
||||
```js
|
||||
assert.strictEqual(quickCheck([3, 5, 9, 125, 45, 2], 125), true);
|
||||
```
|
||||
|
||||
`quickCheck([true, false, false], undefined)` sollte `false` zurückgeben
|
||||
|
||||
```js
|
||||
assert.strictEqual(quickCheck([true, false, false], undefined), false);
|
||||
```
|
||||
|
||||
Die Funktion `quickCheck` sollte die Methode `indexOf()` verwenden
|
||||
|
||||
```js
|
||||
assert.notStrictEqual(quickCheck.toString().search(/\.indexOf\(/), -1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function quickCheck(arr, elem) {
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
}
|
||||
|
||||
console.log(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function quickCheck(arr, elem) {
|
||||
return arr.indexOf(elem) >= 0;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,161 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1c
|
||||
title: Prüfe ob ein Objekt eine Eigenschaft besitzt
|
||||
challengeType: 1
|
||||
forumTopicId: 301155
|
||||
dashedName: check-if-an-object-has-a-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Jetzt können wir Schlüssel aus Objekten hinzufügen, verändern und entfernen. Aber was wäre, wenn wir nur wissen wollten, ob ein Objekt eine bestimmte Eigenschaft besitzt? JavaScript bietet uns zwei unterschiedliche Möglichkeiten an, dies zu tun. Eine benutzt die Methode `hasOwnProperty()` und die andere benutzt das Schlüsselwort `in`. Wenn wir ein Objekt `users` mit einer Eigenschaft von `Alan` haben, könnten wir sein Vorhandensein mit einem der folgenden Möglichkeiten überprüfen:
|
||||
|
||||
```js
|
||||
users.hasOwnProperty('Alan');
|
||||
'Alan' in users;
|
||||
```
|
||||
|
||||
Beide würden `true` zurückgeben.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Schreibe die Funktion so zu Ende, dass sie `true` zurückgibt, wenn das übergebende Objekte alle vier Namen, `Alan`, `Jeff`, `Sarah` und `Ryan` enthält und ansonsten gibt sie `false` aus.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das Objekt `users` sollte nicht direkt aufgerufen werden
|
||||
|
||||
```js
|
||||
|
||||
assert(code.match(/users/gm).length <= 2)
|
||||
|
||||
```
|
||||
|
||||
Das Objekt `users` sollte nur die Schlüssel `Alan`, `Jeff`, `Sarah`, und `Ryan` enthalten
|
||||
|
||||
```js
|
||||
assert(
|
||||
'Alan' in users &&
|
||||
'Jeff' in users &&
|
||||
'Sarah' in users &&
|
||||
'Ryan' in users &&
|
||||
Object.keys(users).length === 4
|
||||
);
|
||||
```
|
||||
|
||||
Die Funktion `isEveryoneHere` sollte `true` zurückgeben, wenn `Alan`, `Jeff`, `Sarah`, und `Ryan` Eigenschaften sind, die an das Objekt übergeben wurden.
|
||||
|
||||
```js
|
||||
assert(isEveryoneHere(users) === true);
|
||||
```
|
||||
|
||||
Die Funktion `isEveryoneHere` sollte `false` zurückgeben, wenn `Alan` keine Eigenschaft ist, die an das Objekt weitergegeben wurde.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
delete users.Alan;
|
||||
return isEveryoneHere(users);
|
||||
})() === false
|
||||
);
|
||||
```
|
||||
|
||||
Die Funktion `isEveryoneHere` sollte `false` zurückgeben, wenn `Jeff` keine Eigenschaft davon ist, die an das Objekt übergeben wurde.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
delete users.Jeff;
|
||||
return isEveryoneHere(users);
|
||||
})() === false
|
||||
);
|
||||
```
|
||||
|
||||
Die Funktion `isEveryoneHere` sollte `false` zurückgeben, wenn `Sarah` keine Eigenschaft davon ist, die an das Objekt übergeben wurde.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
delete users.Sarah;
|
||||
return isEveryoneHere(users);
|
||||
})() === false
|
||||
);
|
||||
```
|
||||
|
||||
Die Funktion `isEveryoneHere` sollte `false` zurückgeben, wenn `Ryan` keine Eigenschaft ist, die an das Objekt übergeben wurde.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
delete users.Ryan;
|
||||
return isEveryoneHere(users);
|
||||
})() === false
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let users = {
|
||||
Alan: {
|
||||
age: 27,
|
||||
online: true
|
||||
},
|
||||
Jeff: {
|
||||
age: 32,
|
||||
online: true
|
||||
},
|
||||
Sarah: {
|
||||
age: 48,
|
||||
online: true
|
||||
},
|
||||
Ryan: {
|
||||
age: 19,
|
||||
online: true
|
||||
}
|
||||
};
|
||||
|
||||
function isEveryoneHere(userObj) {
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
}
|
||||
|
||||
console.log(isEveryoneHere(users));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let users = {
|
||||
Alan: {
|
||||
age: 27,
|
||||
online: true
|
||||
},
|
||||
Jeff: {
|
||||
age: 32,
|
||||
online: true
|
||||
},
|
||||
Sarah: {
|
||||
age: 48,
|
||||
online: true
|
||||
},
|
||||
Ryan: {
|
||||
age: 19,
|
||||
online: true
|
||||
}
|
||||
};
|
||||
|
||||
function isEveryoneHere(userObj) {
|
||||
return [
|
||||
'Alan',
|
||||
'Jeff',
|
||||
'Sarah',
|
||||
'Ryan'
|
||||
].every(user => userObj.hasOwnProperty(user));
|
||||
}
|
||||
|
||||
console.log(isEveryoneHere(users));
|
||||
```
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b7b367417b2b2512b17
|
||||
title: Kombiniere Arrays mit dem Spread-Operator
|
||||
challengeType: 1
|
||||
forumTopicId: 301156
|
||||
dashedName: combine-arrays-with-the-spread-operator
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ein anderer großer Vorteil des <dfn>spread</dfn>-Operators ist die Fähigkeit, Arrays zu kombinieren, oder um alle Elemente eines Arrays in ein anderes einzufügen, und zwar bei jedem Index. Mit traditionelleren Syntaxen können wir Arrays verketten, aber das erlaubt uns nur, Arrays am Ende eines Arrays und am Anfang eines anderen zu kombinieren. Die Spread-Syntax erleichtert den folgenden Vorgang erheblich:
|
||||
|
||||
```js
|
||||
let thisArray = ['sage', 'rosemary', 'parsley', 'thyme'];
|
||||
|
||||
let thatArray = ['basil', 'cilantro', ...thisArray, 'coriander'];
|
||||
```
|
||||
|
||||
`thatArray` würde den Wert `['basil', 'cilantro', 'sage', 'rosemary', 'parsley', 'thyme', 'coriander']` besitzen.
|
||||
|
||||
Mit der Spreadsyntax haben wir gerade eine Operation durchgeführt, die bei Verwendung herkömmlicher Methoden komplexer und ausführlicher gewesen wäre.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wir haben eine Funktion `spreadOut` definiert, welche die Variable `sentence` zurückgibt. Verändere die Funktion mit dem <dfn>spread</dfn>-Operator so, dass es den Array `['learning', 'to', 'code', 'is', 'fun']` zurückgibt.
|
||||
|
||||
# --hints--
|
||||
|
||||
`spreadOut` sollte `["learning", "to", "code", "is", "fun"]` zurückgeben
|
||||
|
||||
```js
|
||||
assert.deepEqual(spreadOut(), ['learning', 'to', 'code', 'is', 'fun']);
|
||||
```
|
||||
|
||||
Die Funktion `spreadOut` sollte die Spread-Syntax verwenden
|
||||
|
||||
```js
|
||||
assert.notStrictEqual(spreadOut.toString().search(/[...]/), -1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function spreadOut() {
|
||||
let fragment = ['to', 'code'];
|
||||
let sentence; // Change this line
|
||||
return sentence;
|
||||
}
|
||||
|
||||
console.log(spreadOut());
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function spreadOut() {
|
||||
let fragment = ['to', 'code'];
|
||||
let sentence = ['learning', ...fragment, 'is', 'fun'];
|
||||
return sentence;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 587d7b7b367417b2b2512b13
|
||||
title: Kopiere ein Array mit dem Spread-Operator
|
||||
challengeType: 1
|
||||
forumTopicId: 301157
|
||||
dashedName: copy-an-array-with-the-spread-operator
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Während `slice()` es uns erlaubt, selektiv zu entscheiden, welche Elemente eines Arrays kopiert werden sollen, ermöglicht der neue <dfn>spread operator</dfn> von ES6 das einfache Kopieren *aller* Elemente eines Arrays, und zwar der Reihe nach, mit einer einfachen und gut lesbaren Syntax. Die Spread-Syntax sieht einfach so aus: `...`
|
||||
|
||||
In der Praxis können wir den Spread-Operator nutzen, um einen Array wie folgt zu kopieren:
|
||||
|
||||
```js
|
||||
let thisArray = [true, true, undefined, false, null];
|
||||
let thatArray = [...thisArray];
|
||||
```
|
||||
|
||||
`thatArray` entspricht `[true, true, undefined, false, null]`. `thisArray` bleibt unverändert und `thatArray` enthält die gleichen Elemente wie `thisArray`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wir haben eine Funktion `copyMachine` definiert, welche `arr` (ein Array) und `num` (eine Nummer) als Argumente benötigt. Die Funktion sollte einen neuen Array zurückgeben, der aus `num` Kopien von `arr` besteht. Wir haben die meiste Arbeit für dich getan, jedoch funktioniert es noch nicht ganz richtig. Verändere die Funktion, indem du Spread-Syntax verwendest, sodass es richtig funktioniert (Tipp: eine andere Methode, die wir bereits behandelt haben, könnte hier nützlich sein!).
|
||||
|
||||
# --hints--
|
||||
|
||||
`copyMachine([true, false, true], 2)` sollte `[[true, false, true], [true, false, true]]` zurückgeben
|
||||
|
||||
```js
|
||||
assert.deepEqual(copyMachine([true, false, true], 2), [
|
||||
[true, false, true],
|
||||
[true, false, true]
|
||||
]);
|
||||
```
|
||||
|
||||
`copyMachine([1, 2, 3], 5)` sollte `[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]` zurückgeben
|
||||
|
||||
```js
|
||||
assert.deepEqual(copyMachine([1, 2, 3], 5), [
|
||||
[1, 2, 3],
|
||||
[1, 2, 3],
|
||||
[1, 2, 3],
|
||||
[1, 2, 3],
|
||||
[1, 2, 3]
|
||||
]);
|
||||
```
|
||||
|
||||
`copyMachine([true, true, null], 1)` sollte `[[true, true, null]]` zurückgeben
|
||||
|
||||
```js
|
||||
assert.deepEqual(copyMachine([true, true, null], 1), [[true, true, null]]);
|
||||
```
|
||||
|
||||
`copyMachine(["it works"], 3)` sollte `[["it works"], ["it works"], ["it works"]]` zurückgeben
|
||||
|
||||
```js
|
||||
assert.deepEqual(copyMachine(['it works'], 3), [
|
||||
['it works'],
|
||||
['it works'],
|
||||
['it works']
|
||||
]);
|
||||
```
|
||||
|
||||
Die Funktion `copyMachine` sollte den `spread operator` mit einem Array `arr` verwenden
|
||||
|
||||
```js
|
||||
assert(code.match(/\.\.\.arr/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function copyMachine(arr, num) {
|
||||
let newArr = [];
|
||||
while (num >= 1) {
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
num--;
|
||||
}
|
||||
return newArr;
|
||||
}
|
||||
|
||||
console.log(copyMachine([true, false, true], 2));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function copyMachine(arr,num){
|
||||
let newArr=[];
|
||||
while(num >=1){
|
||||
newArr.push([...arr]);
|
||||
num--;
|
||||
}
|
||||
return newArr;
|
||||
}
|
||||
console.log(copyMachine([true, false, true], 2));
|
||||
```
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 587d7b7a367417b2b2512b12
|
||||
title: Kopiere Array-Elemente mit der slice() - Methode
|
||||
challengeType: 1
|
||||
forumTopicId: 301158
|
||||
dashedName: copy-array-items-using-slice
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Die nächste Methode, mit der wir uns beschäftigen ist `slice()`. Anstatt einen Array zu verändern, kopiert oder *extrahiert* `slice()` eine bestimmte Anzahl an Elementen in einen neuen Array, sodass der aufgerufene Array unverändert bleibt. `slice()` benötigt nur 2 Parameter -- der erste ist der Index, an welchem die Extraktion beginnen soll, und der zweite ist der Index, an welchem die Extraktion gestoppt werden soll (die Extraktion wird bis zum Ende auftreten, jedoch ohne das Element an diesem Index). Beachte Folgendes:
|
||||
|
||||
```js
|
||||
let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear'];
|
||||
|
||||
let todaysWeather = weatherConditions.slice(1, 3);
|
||||
```
|
||||
|
||||
`todaysWeather` würde den Wert `['snow', 'sleet']` haben, während `weatherConditions` immer noch `['rain', 'snow', 'sleet', 'hail', 'clear']` hat.
|
||||
|
||||
Wir haben in der Tat einen neuen Array erstellt, indem wir Elemente aus einem bestehenden Array extrahiert haben.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wir haben eine Funktion `forecast` definiert, die einen Array als ein Argument verwendet. Verändere die Funktion mit `slice()`, um Informationen aus dem Argument-Array zu extrahieren und einen neuen Array mit den String-Elementen `warm` und `sunny` zurückzugeben.
|
||||
|
||||
# --hints--
|
||||
|
||||
`forecast` sollte `["warm", "sunny"]` zurückgeben
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']),
|
||||
['warm', 'sunny']
|
||||
);
|
||||
```
|
||||
|
||||
Die Funktion `forecast` sollte die `slice()` Methode verwenden
|
||||
|
||||
```js
|
||||
assert(/\.slice\(/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function forecast(arr) {
|
||||
// Only change code below this line
|
||||
|
||||
return arr;
|
||||
}
|
||||
|
||||
// Only change code above this line
|
||||
console.log(forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function forecast(arr) {
|
||||
return arr.slice(2,4);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,218 @@
|
||||
---
|
||||
id: 587d7b7b367417b2b2512b16
|
||||
title: Erstelle komplexe mehrdimensionale Arrays
|
||||
challengeType: 1
|
||||
forumTopicId: 301159
|
||||
dashedName: create-complex-multi-dimensional-arrays
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Großartig! Du hast gerade eine Menge über Arrays gelernt! Das war ein relativ großer Überblick, und es gibt viel mehr über die Arbeit mit Arrays zu lernen, vieles, was wir uns in späteren Abschnitten ansehen werden. Bevor wir uns aber mit <dfn>Objects</dfn> beschäftigen, schauen wir uns noch einmal an, wie Arrays etwas komplexer als in den bisherigen Aufgaben werden können.
|
||||
|
||||
Eines der mächtigsten Merkmale bei der Betrachtung von Arrays als Datastrukturen, ist, dass Arrays andere Arrays enthalten oder sogar komplett aus anderen bestehen können. Wir haben bereits in bisherigen Aufgaben Arrays gesehen, die selbst Arrays enthalten – aber nur recht einfache. Arrays können jedoch eine unendliche Tiefe von Arrays enthalten, die wiederum andere Arrays enthalten können, jeweils mit einer bestimmten Tiefe, und so weiter. Auf diese Weise kann ein Array sehr schnell zu einer sehr komplexen Datenstruktur werden, die als <dfn>multi-dimensional</dfn> oder verschachteltes Array bekannt ist. Beachte das folgende Beispiel:
|
||||
|
||||
```js
|
||||
let nestedArray = [
|
||||
['deep'],
|
||||
[
|
||||
['deeper'], ['deeper']
|
||||
],
|
||||
[
|
||||
[
|
||||
['deepest'], ['deepest']
|
||||
],
|
||||
[
|
||||
[
|
||||
['deepest-est?']
|
||||
]
|
||||
]
|
||||
]
|
||||
];
|
||||
```
|
||||
|
||||
Der `deep` Array ist in 2 Ebenen verschachtelt. Die Arrays `deeper` sind 3 Ebenen tief. Die Arrays `deepest` sind 4 Ebenen und `deepest-est?` beträgt 5.
|
||||
|
||||
Während dieses Beispiel sehr verworren erscheint, ist diese Ebene an Komplexität nicht unbekannt oder gar unüblich, wenn man mit großen Mengen an Daten arbeitet. Jedoch können wir immer noch sehr leicht auf die tiefsten Ebenen eines Arrays, der so komplex ist, mit Klammernotation zugreifen:
|
||||
|
||||
```js
|
||||
console.log(nestedArray[2][1][0][0][0]);
|
||||
```
|
||||
|
||||
Dies protokolliert der String `deepest-est?`. Und jetzt, da wir wissen, wo die Daten sind, können wir sie zurücksetzen, wenn wir es brauchen:
|
||||
|
||||
```js
|
||||
nestedArray[2][1][0][0][0] = 'deeper still';
|
||||
|
||||
console.log(nestedArray[2][1][0][0][0]);
|
||||
```
|
||||
|
||||
Jetzt protokolliert es `deeper still`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wir haben eine Variable `myNestedArray` definiert, die einem Array entspricht. Verändere `myNestedArray`, indem du irgendeine Kombination von <dfn>strings</dfn>, <dfn>numbers</dfn>, und <dfn>booleans</dfn> für Datenelemente verwendest, sodass es genau fünf Tiefenebenen hat (denk daran, der äußerste Array ist Ebene 1). Füge den String `deep` irgendwo auf der 3. Ebene ein, den String `deeper` auf der vierten Ebene und auf der fünften Ebene, füge den String `deepest` ein.
|
||||
|
||||
# --hints--
|
||||
|
||||
`myNestedArray` sollte nur Nummern, Booleans und Strings als Datenelemente enthalten
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
(function (arr) {
|
||||
let flattened = (function flatten(arr) {
|
||||
const flat = [].concat(...arr);
|
||||
return flat.some(Array.isArray) ? flatten(flat) : flat;
|
||||
})(arr);
|
||||
for (let i = 0; i < flattened.length; i++) {
|
||||
if (
|
||||
typeof flattened[i] !== 'number' &&
|
||||
typeof flattened[i] !== 'string' &&
|
||||
typeof flattened[i] !== 'boolean'
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
})(myNestedArray),
|
||||
true
|
||||
);
|
||||
```
|
||||
|
||||
`myNestedArray` sollte genau 5 Ebenen in die Tiefe haben
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
(function (arr) {
|
||||
let depth = 0;
|
||||
function arrayDepth(array, i, d) {
|
||||
if (Array.isArray(array[i])) {
|
||||
arrayDepth(array[i], 0, d + 1);
|
||||
} else {
|
||||
depth = d > depth ? d : depth;
|
||||
}
|
||||
if (i < array.length) {
|
||||
arrayDepth(array, i + 1, d);
|
||||
}
|
||||
}
|
||||
arrayDepth(arr, 0, 0);
|
||||
return depth;
|
||||
})(myNestedArray),
|
||||
4
|
||||
);
|
||||
```
|
||||
|
||||
`myNestedArray` sollte genau ein Auftreten der Strings `deep` in einen Array enthalten, der 3 Ebenen tief verschachtelt ist
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function howDeep(array, target, depth = 0) {
|
||||
return array.reduce((combined, current) => {
|
||||
if (Array.isArray(current)) {
|
||||
return combined.concat(howDeep(current, target, depth + 1));
|
||||
} else if (current === target) {
|
||||
return combined.concat(depth);
|
||||
} else {
|
||||
return combined;
|
||||
}
|
||||
}, []);
|
||||
})(myNestedArray, 'deep').length === 1 &&
|
||||
(function howDeep(array, target, depth = 0) {
|
||||
return array.reduce((combined, current) => {
|
||||
if (Array.isArray(current)) {
|
||||
return combined.concat(howDeep(current, target, depth + 1));
|
||||
} else if (current === target) {
|
||||
return combined.concat(depth);
|
||||
} else {
|
||||
return combined;
|
||||
}
|
||||
}, []);
|
||||
})(myNestedArray, 'deep')[0] === 2
|
||||
);
|
||||
```
|
||||
|
||||
`myNestedArray` sollte genau ein Auftreten der Strings `deeper` in einem Array enthalten, der 4 Ebenen tief verschachtelt ist
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function howDeep(array, target, depth = 0) {
|
||||
return array.reduce((combined, current) => {
|
||||
if (Array.isArray(current)) {
|
||||
return combined.concat(howDeep(current, target, depth + 1));
|
||||
} else if (current === target) {
|
||||
return combined.concat(depth);
|
||||
} else {
|
||||
return combined;
|
||||
}
|
||||
}, []);
|
||||
})(myNestedArray, 'deeper').length === 1 &&
|
||||
(function howDeep(array, target, depth = 0) {
|
||||
return array.reduce((combined, current) => {
|
||||
if (Array.isArray(current)) {
|
||||
return combined.concat(howDeep(current, target, depth + 1));
|
||||
} else if (current === target) {
|
||||
return combined.concat(depth);
|
||||
} else {
|
||||
return combined;
|
||||
}
|
||||
}, []);
|
||||
})(myNestedArray, 'deeper')[0] === 3
|
||||
);
|
||||
```
|
||||
|
||||
`myNestedArray` sollte genau ein Auftreten der Strings `deepest` in einem Array enthalten, der 5 Ebenen tief verschachtelt ist
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function howDeep(array, target, depth = 0) {
|
||||
return array.reduce((combined, current) => {
|
||||
if (Array.isArray(current)) {
|
||||
return combined.concat(howDeep(current, target, depth + 1));
|
||||
} else if (current === target) {
|
||||
return combined.concat(depth);
|
||||
} else {
|
||||
return combined;
|
||||
}
|
||||
}, []);
|
||||
})(myNestedArray, 'deepest').length === 1 &&
|
||||
(function howDeep(array, target, depth = 0) {
|
||||
return array.reduce((combined, current) => {
|
||||
if (Array.isArray(current)) {
|
||||
return combined.concat(howDeep(current, target, depth + 1));
|
||||
} else if (current === target) {
|
||||
return combined.concat(depth);
|
||||
} else {
|
||||
return combined;
|
||||
}
|
||||
}, []);
|
||||
})(myNestedArray, 'deepest')[0] === 4
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let myNestedArray = [
|
||||
// Only change code below this line
|
||||
['unshift', false, 1, 2, 3, 'complex', 'nested'],
|
||||
['loop', 'shift', 6, 7, 1000, 'method'],
|
||||
['concat', false, true, 'spread', 'array'],
|
||||
['mutate', 1327.98, 'splice', 'slice', 'push'],
|
||||
['iterate', 1.3849, 7, '8.4876', 'arbitrary', 'depth']
|
||||
// Only change code above this line
|
||||
];
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let myNestedArray = [
|
||||
['unshift', ['deep', ['deeper', ['deepest']]],false, 1, 2, 3, 'complex', 'nested'],
|
||||
['loop', 'shift', 6, 7, 1000, 'method'],
|
||||
['concat', false, true, 'spread', 'array'],
|
||||
['mutate', 1327.98, 'splice', 'slice', 'push'],
|
||||
['iterate', 1.3849, 7, '8.4876', 'arbitrary', 'depth']
|
||||
];
|
||||
```
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1e
|
||||
title: Erstelle einen Array aller Objekt-Schlüssel mit Object.keys()
|
||||
challengeType: 1
|
||||
forumTopicId: 301160
|
||||
dashedName: generate-an-array-of-all-object-keys-with-object-keys
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Wir können auch mit der `Object.keys()` Methode einen Array erzeugen, der alle Schlüssel in einem Objekt enthält. Diese Methode nimmt ein Objekt als Argument und gibt ein Array von Strings zurück, die jede Eigenschaft des Objekts darstellen. Auch hier gibt es keine bestimmte Reihenfolge der Einträge im Array.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Schreibe die Funktion `getArrayOfUsers` fertig, so dass sie ein Array mit allen Eigenschaften des Objekts zurückgibt, das sie als Argument erhält.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das Objekt `users` sollte nur die Schlüssel `Alan`, `Jeff`, `Sarah`, und `Ryan` enthalten
|
||||
|
||||
```js
|
||||
assert(
|
||||
'Alan' in users &&
|
||||
'Jeff' in users &&
|
||||
'Sarah' in users &&
|
||||
'Ryan' in users &&
|
||||
Object.keys(users).length === 4
|
||||
);
|
||||
```
|
||||
|
||||
Die Funktion `getArrayOfUsers` sollte einen Array, welcher alle Schlüssel des Objekts `users` enthält, zurückgeben
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
users.Sam = {};
|
||||
users.Lewis = {};
|
||||
let R = getArrayOfUsers(users);
|
||||
return (
|
||||
R.indexOf('Alan') !== -1 &&
|
||||
R.indexOf('Jeff') !== -1 &&
|
||||
R.indexOf('Sarah') !== -1 &&
|
||||
R.indexOf('Ryan') !== -1 &&
|
||||
R.indexOf('Sam') !== -1 &&
|
||||
R.indexOf('Lewis') !== -1
|
||||
);
|
||||
})() === true
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let users = {
|
||||
Alan: {
|
||||
age: 27,
|
||||
online: false
|
||||
},
|
||||
Jeff: {
|
||||
age: 32,
|
||||
online: true
|
||||
},
|
||||
Sarah: {
|
||||
age: 48,
|
||||
online: false
|
||||
},
|
||||
Ryan: {
|
||||
age: 19,
|
||||
online: true
|
||||
}
|
||||
};
|
||||
|
||||
function getArrayOfUsers(obj) {
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
}
|
||||
|
||||
console.log(getArrayOfUsers(users));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let users = {
|
||||
Alan: {
|
||||
age: 27,
|
||||
online: false
|
||||
},
|
||||
Jeff: {
|
||||
age: 32,
|
||||
online: true
|
||||
},
|
||||
Sarah: {
|
||||
age: 48,
|
||||
online: false
|
||||
},
|
||||
Ryan: {
|
||||
age: 19,
|
||||
online: true
|
||||
}
|
||||
};
|
||||
|
||||
function getArrayOfUsers(obj) {
|
||||
return Object.keys(obj);
|
||||
}
|
||||
|
||||
console.log(getArrayOfUsers(users));
|
||||
```
|
||||
@@ -0,0 +1,138 @@
|
||||
---
|
||||
id: 587d7b7b367417b2b2512b15
|
||||
title: Wiederholung durch alle Elemente eines Arrays mit For-Schleifen
|
||||
challengeType: 1
|
||||
forumTopicId: 301161
|
||||
dashedName: iterate-through-all-an-arrays-items-using-for-loops
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Bei der Arbeit mit Arrays ist es manchmal sehr praktisch, wenn man durch jedes Element iterieren kann, um ein oder mehrere Elemente zu finden, die man braucht, oder um ein Array auf der Grundlage der Datenelemente, die bestimmte Kriterien erfüllen, zu bearbeiten. JavaScript bietet mehrere eingebaute Methoden, die jeweils auf leicht unterschiedliche Weise über Arrays iterieren, um unterschiedliche Ergebnisse zu erzielen (sowie `every()`, `forEach()`, `map()`, etc.), die Technik jedoch, die am flexibelsten ist und uns die größte Kontrolle bietet, ist eine einfache `for`-Schleife.
|
||||
|
||||
Beachte Folgendes:
|
||||
|
||||
```js
|
||||
function greaterThanTen(arr) {
|
||||
let newArr = [];
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (arr[i] > 10) {
|
||||
newArr.push(arr[i]);
|
||||
}
|
||||
}
|
||||
return newArr;
|
||||
}
|
||||
|
||||
greaterThanTen([2, 12, 8, 14, 80, 0, 1]);
|
||||
```
|
||||
|
||||
Wenn man eine `for` -Schleife verwendet, durchläuft und greift diese Funktion auf jedes Element des Arrays zu, und unterzieht es einem einfachen Test, den wir erstellt haben. Auf diese Weise haben wir einfach und programmatisch ermittelt, welche Datenelemente größer als `10` sind, und einen neuen Array, `[12, 14, 80]`, zurückgegeben, der diese Elemente enthält.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wir haben eine Funktion `filteredArray` definiert, welche einen verschachtelten Array `arr` und `elem` als Argumente benötigt und einen neuen Array zurückgibt. `elem` stellt ein Element dar, das auf einem oder mehreren Arrays, die in `arr` verschachtelt sind, vorhanden sein könnte. Verändere die Funktion, indem du eine `for`-Schleife verwendest, um eine gefilterte Version des übergebenden Arrays zurückzuerhalten, sodass jeder Array, der in `arr` verschachtelt ist und `elem` enthält, entfernt wurde.
|
||||
|
||||
# --hints--
|
||||
|
||||
`filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)` sollte `[[10, 8, 3], [14, 6, 23]]` zurückgeben
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
filteredArray(
|
||||
[
|
||||
[10, 8, 3],
|
||||
[14, 6, 23],
|
||||
[3, 18, 6]
|
||||
],
|
||||
18
|
||||
),
|
||||
[
|
||||
[10, 8, 3],
|
||||
[14, 6, 23]
|
||||
]
|
||||
);
|
||||
```
|
||||
|
||||
`filteredArray([["trumpets", 2], ["flutes", 4], ["saxophones", 2]], 2)` sollte `[["flutes", 4]]` zurückgeben
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
filteredArray(
|
||||
[
|
||||
['trumpets', 2],
|
||||
['flutes', 4],
|
||||
['saxophones', 2]
|
||||
],
|
||||
2
|
||||
),
|
||||
[['flutes', 4]]
|
||||
);
|
||||
```
|
||||
|
||||
`filteredArray([["amy", "beth", "sam"], ["dave", "sean", "peter"]], "peter")` sollte `[["amy", "beth", "sam"]]` zurückgeben
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
filteredArray(
|
||||
[
|
||||
['amy', 'beth', 'sam'],
|
||||
['dave', 'sean', 'peter']
|
||||
],
|
||||
'peter'
|
||||
),
|
||||
[['amy', 'beth', 'sam']]
|
||||
);
|
||||
```
|
||||
|
||||
`filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)` sollte `[]` zurückgeben
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
filteredArray(
|
||||
[
|
||||
[3, 2, 3],
|
||||
[1, 6, 3],
|
||||
[3, 13, 26],
|
||||
[19, 3, 9]
|
||||
],
|
||||
3
|
||||
),
|
||||
[]
|
||||
);
|
||||
```
|
||||
|
||||
Die Funktion `filteredArray` sollte eine `for`-Schleife verwenden
|
||||
|
||||
```js
|
||||
assert.notStrictEqual(filteredArray.toString().search(/for/), -1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function filteredArray(arr, elem) {
|
||||
let newArr = [];
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
return newArr;
|
||||
}
|
||||
|
||||
console.log(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function filteredArray(arr, elem) {
|
||||
let newArr = [];
|
||||
for (let i = 0; i<arr.length; i++) {
|
||||
if (arr[i].indexOf(elem) < 0) {
|
||||
newArr.push(arr[i]);
|
||||
}
|
||||
}
|
||||
return newArr;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1d
|
||||
title: Iterieren durch die Schlüssel eines Objekts mit einer for...in-Anweisung
|
||||
challengeType: 1
|
||||
forumTopicId: 301162
|
||||
dashedName: iterate-through-the-keys-of-an-object-with-a-for---in-statement
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Manchmal musst du alle Schlüssel innerhalb eines Objekts durchlaufen. Das erfordert eine spezielle Syntax in JavaScript, die <dfn>for...in</dfn>-Anweisung genannt wird. Für unser `users` Objekt könnte es so aussehen:
|
||||
|
||||
```js
|
||||
for (let user in users) {
|
||||
console.log(user);
|
||||
}
|
||||
```
|
||||
|
||||
Das würde `Alan`, `Jeff` und `Sarah` protokollieren - jeder Wert in einer eigenen Zeile.
|
||||
|
||||
In dieser Anweisung haben wir eine Variable `user` definiert, und wie du sehen kannst, wurde diese Variable bei jeder Iteration auf jeden der Schlüssel des Objekts zurückgesetzt, während die Anweisung das Objekt in einer Schleife durchlief, was dazu führte, dass der Name jedes Benutzers auf der Konsole ausgegeben wurde.
|
||||
|
||||
**HINWEIS:** Objekte behalten keine Reihenfolge der gespeicherten Schlüssel bei, wie es bei Arrays der Fall ist; daher ist die Position eines Schlüssels auf einem Objekt oder die relative Reihenfolge, in der er erscheint, irrelevant, wenn auf diesen Schlüssel verwiesen oder zugegriffen wird.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wir haben eine Funktion `countOnline` definiert, die ein Argument (ein Nutzer-Objekt) akzeptiert. Nutze eine <dfn>for...in</dfn> Anweisung innerhalb dieser Funktion, um eine Schleife durch das an die Funktion übergebene Benutzerobjekt zu durchlaufen und die Anzahl der Nutzer zurückzugeben, deren `online` Eigenschaft auf `true` festgesetzt ist. Ein Beispiel für ein Benutzerobjekt, das an `countOnline` übergeben werden könnte, wird unten gezeigt. Jeder Nutzer wird eine `online` Eigenschaft mit entweder einem `true` oder `false` Wert besitzen.
|
||||
|
||||
```js
|
||||
{
|
||||
Alan: {
|
||||
online: false
|
||||
},
|
||||
Jeff: {
|
||||
online: true
|
||||
},
|
||||
Sarah: {
|
||||
online: false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Die Funktion `countOnline` sollte eine `for in` Anweisung verwenden, um die Objektschlüssel des übergebenen Objekts zu durchlaufen.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/for\s*\(\s*(var|let|const)\s+[a-zA-Z_$]\w*\s+in\s+[a-zA-Z_$]\w*\s*\)/
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Die Funktion `countOnline` sollte `1` zurückgeben, wenn das Objekt `{ Alan: { online: false }, Jeff: { online: true }, Sarah: { online: false } }` an ihn übergeben wurde
|
||||
|
||||
```js
|
||||
assert(countOnline(usersObj1) === 1);
|
||||
```
|
||||
|
||||
Die Funktion `countOnline` sollte `2` zurückgeben, wenn das Objekt `{ Alan: { online: true }, Jeff: { online: false }, Sarah: { online: true } }` an ihn übergeben wurde
|
||||
|
||||
```js
|
||||
assert(countOnline(usersObj2) === 2);
|
||||
```
|
||||
|
||||
Die Funktion `countOnline` sollte `0` zurückgeben, wenn das Objekt `{ Alan: { online: false }, Jeff: { online: false }, Sarah: { online: false } }` an ihn übergeben wurde
|
||||
|
||||
```js
|
||||
assert(countOnline(usersObj3) === 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```js
|
||||
const usersObj1 = {
|
||||
Alan: {
|
||||
online: false
|
||||
},
|
||||
Jeff: {
|
||||
online: true
|
||||
},
|
||||
Sarah: {
|
||||
online: false
|
||||
}
|
||||
}
|
||||
|
||||
const usersObj2 = {
|
||||
Alan: {
|
||||
online: true
|
||||
},
|
||||
Jeff: {
|
||||
online: false
|
||||
},
|
||||
Sarah: {
|
||||
online: true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const usersObj3 = {
|
||||
Alan: {
|
||||
online: false
|
||||
},
|
||||
Jeff: {
|
||||
online: false
|
||||
},
|
||||
Sarah: {
|
||||
online: false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const users = {
|
||||
Alan: {
|
||||
online: false
|
||||
},
|
||||
Jeff: {
|
||||
online: true
|
||||
},
|
||||
Sarah: {
|
||||
online: false
|
||||
}
|
||||
}
|
||||
|
||||
function countOnline(usersObj) {
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
}
|
||||
|
||||
console.log(countOnline(users));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function countOnline(usersObj) {
|
||||
let online = 0;
|
||||
for(let user in usersObj){
|
||||
if(usersObj[user].online) {
|
||||
online++;
|
||||
}
|
||||
}
|
||||
return online;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,112 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1f
|
||||
title: Ändere ein Array, das in einem Objekt gespeichert ist
|
||||
challengeType: 1
|
||||
forumTopicId: 301163
|
||||
dashedName: modify-an-array-stored-in-an-object
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Jetzt hast du alle grundlegenden Operationen für JavaScript-Objekte kennengelernt. Du kannst Schlüssel-Wert-Paare hinzufügen, ändern und entfernen, prüfen, ob Schlüssel vorhanden sind, und über alle Schlüssel eines Objekts iterieren. Beim weiteren Erlernen von JavaScript, wirst du noch vielseitigere Anwendungen von Objekten kennenlernen. Zusätzlich werden in den Lektionen zu Datenstrukturen im Abschnitt Vorbereitung auf das Coding-Interview des Lehrplans auch die ES6-Objekte <dfn>Map</dfn> und <dfn>Set</dfn> behandelt, die normalen Objekten ähneln, jedoch einige zusätzliche Funktionen bieten. Da du nun die Grundlagen von Arrays und Objekten kennengelernt hast, bist du bestens vorbereitet, um komplexere Probleme mit JavaScript anzugehen!
|
||||
|
||||
# --instructions--
|
||||
|
||||
Schau dir das Objekt an, das wir im Code-Editor bereigestellt haben. Das `user` Objekt enthält drei Schlüssel. Der `data` Schlüssel enthält fünf Schlüssel, von denen einer ein Array von `friends` enthält. Daran kannst du erkennen, wie flexibel Objekte als Datenstrukturen sind. Wir haben begonnen, eine Funktion `addFriend` zu schreiben. Schließe sie so ab, dass sie ein `user` Objekt nimmt und den Namen des `friend` Arguments zu dem in `user.data.friends` gespeicherten Array hinzufügt und dieses Array zurückgibt.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das `user` Objekt sollte `name`, `age` und `data` Schlüssel haben.
|
||||
|
||||
```js
|
||||
assert('name' in user && 'age' in user && 'data' in user);
|
||||
```
|
||||
|
||||
Die Funktion `addFriend` sollte ein `user`-Objekt und einen `friend` String als Argumente akzeptieren und den Freund zum Array der `friends` zum `user` Objekt hinzufügen.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
let L1 = user.data.friends.length;
|
||||
addFriend(user, 'Sean');
|
||||
let L2 = user.data.friends.length;
|
||||
return L2 === L1 + 1;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
`addFriend(user, "Pete")` sollte `["Sam", "Kira", "Tomo", "Pete"]` zurückgeben.
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
(function () {
|
||||
delete user.data.friends;
|
||||
user.data.friends = ['Sam', 'Kira', 'Tomo'];
|
||||
return addFriend(user, 'Pete');
|
||||
})(),
|
||||
['Sam', 'Kira', 'Tomo', 'Pete']
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let user = {
|
||||
name: 'Kenneth',
|
||||
age: 28,
|
||||
data: {
|
||||
username: 'kennethCodesAllDay',
|
||||
joinDate: 'March 26, 2016',
|
||||
organization: 'freeCodeCamp',
|
||||
friends: [
|
||||
'Sam',
|
||||
'Kira',
|
||||
'Tomo'
|
||||
],
|
||||
location: {
|
||||
city: 'San Francisco',
|
||||
state: 'CA',
|
||||
country: 'USA'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function addFriend(userObj, friend) {
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
}
|
||||
|
||||
console.log(addFriend(user, 'Pete'));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let user = {
|
||||
name: 'Kenneth',
|
||||
age: 28,
|
||||
data: {
|
||||
username: 'kennethCodesAllDay',
|
||||
joinDate: 'March 26, 2016',
|
||||
organization: 'freeCodeCamp',
|
||||
friends: [
|
||||
'Sam',
|
||||
'Kira',
|
||||
'Tomo'
|
||||
],
|
||||
location: {
|
||||
city: 'San Francisco',
|
||||
state: 'CA',
|
||||
country: 'USA'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function addFriend(userObj, friend) {
|
||||
userObj.data.friends.push(friend);
|
||||
return userObj.data.friends;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b19
|
||||
title: Ein in einem Objekt verschachteltes Objekt ändern
|
||||
challengeType: 1
|
||||
forumTopicId: 301164
|
||||
dashedName: modify-an-object-nested-within-an-object
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Werfen wir nun einen Blick auf ein etwas komplexeres Objekt. Objekteigenschaften können beliebig tief verschachtelt werden und ihre Werte können jede Art von Daten sein, die von JavaScript unterstützt werden, einschließlich Arrays und sogar andere Objekte. Beachte Folgendes:
|
||||
|
||||
```js
|
||||
let nestedObject = {
|
||||
id: 28802695164,
|
||||
date: 'December 31, 2016',
|
||||
data: {
|
||||
totalUsers: 99,
|
||||
online: 80,
|
||||
onlineStatus: {
|
||||
active: 67,
|
||||
away: 13,
|
||||
busy: 8
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
`nestedObject` hat drei Eigenschaften: `id` (Wert ist eine Zahl), `date` (Wert ist ein String) und `data` (Wert ist ein Objekt mit verschachtelter Struktur). Obwohl Strukturen schnell komplex werden können, können wir immer noch die gleichen Notationen verwenden, um auf die benötigten Informationen zuzugreifen. Um den Wert `10` der Eigenschaft `busy` des verschachtelten Objekts `onlineStatus` zuzuweisen, verwenden wir die Punktnotation, um auf die Eigenschaft zu verweisen:
|
||||
|
||||
```js
|
||||
nestedObject.data.onlineStatus.busy = 10;
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Hier haben wir ein Objekt `userActivity` definiert, das ein weiteres, darin verschachteltes Objekt enthält. Setze den Wert des `online`-Schlüssels auf `45`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`userActivity` sollte die Eigenschaften `id`, `date` und `data` haben.
|
||||
|
||||
```js
|
||||
assert(
|
||||
'id' in userActivity && 'date' in userActivity && 'data' in userActivity
|
||||
);
|
||||
```
|
||||
|
||||
`userActivity` sollte einen `data`-Schlüssel haben, der auf ein Objekt mit den Schlüsseln `totalUsers` und `online` gesetzt ist.
|
||||
|
||||
```js
|
||||
assert('totalUsers' in userActivity.data && 'online' in userActivity.data);
|
||||
```
|
||||
|
||||
Die `online`-Eigenschaft, die in den `data`-Schlüssel von `userActivity` verschachtelt ist, sollte auf `45` gesetzt werden
|
||||
|
||||
```js
|
||||
assert(userActivity.data.online === 45);
|
||||
```
|
||||
|
||||
Die `online` Eigenschaft sollte mit Punkt- oder Klammernotation gesetzt werden.
|
||||
|
||||
```js
|
||||
assert.strictEqual(code.search(/online: 45/), -1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let userActivity = {
|
||||
id: 23894201352,
|
||||
date: 'January 1, 2017',
|
||||
data: {
|
||||
totalUsers: 51,
|
||||
online: 42
|
||||
}
|
||||
};
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
|
||||
console.log(userActivity);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let userActivity = {
|
||||
id: 23894201352,
|
||||
date: 'January 1, 2017',
|
||||
data: {
|
||||
totalUsers: 51,
|
||||
online: 42
|
||||
}
|
||||
};
|
||||
|
||||
userActivity.data.online = 45;
|
||||
```
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 587d78b2367417b2b2512b0f
|
||||
title: Entfernen von Elementen aus einem Array mit pop() und shift()
|
||||
challengeType: 1
|
||||
forumTopicId: 301165
|
||||
dashedName: remove-items-from-an-array-with-pop-and-shift
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sowohl `push()` und `unshift()` verfügen über entsprechende Methoden, welche nahezu funktionale Gegensätze sind: `pop()` und `shift()`. Wie du vielleicht schon erraten hast, *entfernt* `pop()` ein Element vom Ende des Arrays anstatt es hinzuzufügen, während `shift()` ein Element vom Anfang entfernt. Der Hauptunterschied zwischen `pop()` und `shift()` und ihre Cousinen `push()` und `unshift()` ist, dass keine Methode Parameter benötigt und jede nur einen Array erlaubt, dass dieser von einem einzelnen Element gleichzeitig verändert werden kann.
|
||||
|
||||
Schauen wir uns das mal an:
|
||||
|
||||
```js
|
||||
let greetings = ['whats up?', 'hello', 'see ya!'];
|
||||
|
||||
greetings.pop();
|
||||
```
|
||||
|
||||
`greetings` hätte den Wert `['whats up?', 'hello']`.
|
||||
|
||||
```js
|
||||
greetings.shift();
|
||||
```
|
||||
|
||||
`greetings` hätte den Wert `['hello']`.
|
||||
|
||||
Wir können den Wert eines entfernten Elements auch mit einer der folgenden Methoden ausgeben:
|
||||
|
||||
```js
|
||||
let popped = greetings.pop();
|
||||
```
|
||||
|
||||
`greetings` hätte den Wert `[]` und `popped` hätte den Wert `hello`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wir haben die Funktion `popShift` definiert, die ein Array als Argument nimmt und ein neues Array ausgibt. Verändere die Funktion, indem du `pop()` und `shift()` verwendest, um das erste und das letzte Element des Argumentationsarrays zu entfernen, und weise die entfernten Elemente zu deren passenden Variablen, sodass das ausgegebene Array deren Werte enthält.
|
||||
|
||||
# --hints--
|
||||
|
||||
`popShift(["challenge", "is", "not", "complete"])` soll `["challenge", "complete"]` ausgeben
|
||||
|
||||
```js
|
||||
assert.deepEqual(popShift(['challenge', 'is', 'not', 'complete']), [
|
||||
'challenge',
|
||||
'complete'
|
||||
]);
|
||||
```
|
||||
|
||||
Die Funktion `popShift` soll die Methode `pop()` verwenden
|
||||
|
||||
```js
|
||||
assert.notStrictEqual(popShift.toString().search(/\.pop\(/), -1);
|
||||
```
|
||||
|
||||
Die Funktion`popShift` soll die Methode `shift()` verwenden
|
||||
|
||||
```js
|
||||
assert.notStrictEqual(popShift.toString().search(/\.shift\(/), -1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function popShift(arr) {
|
||||
let popped; // Change this line
|
||||
let shifted; // Change this line
|
||||
return [shifted, popped];
|
||||
}
|
||||
|
||||
console.log(popShift(['challenge', 'is', 'not', 'complete']));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function popShift(arr) {
|
||||
let popped = arr.pop(); // Change this line
|
||||
let shifted = arr.shift(); // Change this line
|
||||
return [shifted, popped];
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 587d78b2367417b2b2512b10
|
||||
title: Entferne Elemente mit Hilfe der splice() - Methode
|
||||
challengeType: 1
|
||||
forumTopicId: 301166
|
||||
dashedName: remove-items-using-splice
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ok, wir haben nun gelernt, wie man Elemente vom Beginn und vom Ende eines Arrays mittels `shift()` und `pop()` entfernt, aber was passiert, wenn wir ein Element von irgendwo in der Mitte entfernen möchten? Oder mehr als ein Element auf einmal entfernen wollen? Nun, hier kommt `splice()` ins Spiel. Mit `splice()` können wir genau das tun: eine **beliebige Anzahl aufeinander folgender Elemente** von einer beliebigen Stelle in einem Array entfernen.
|
||||
|
||||
`splice()` kann bis zu drei Parameter aufgreifen, aber vorerst fokussieren wir uns nur auf die ersten beiden. Die ersten beiden Parameter von `splice()` sind ganze Zahlen, die Indizes oder Positionen der Elemente im Array darstellen, die von `splice()` aufgerufen werden. Und denke daran, Arrays sind *null-indiziert*. Um das erste Element eines Arrays auszugeben, müssen wir `0` verwenden. Der erste Parameter von `splice()` stellt den Index des Arrays dar, aus dem Elemente entfernt werden sollen, während der zweite Parameter die Anzahl der zu löschenden Elemente angibt. Zum Beispiel:
|
||||
|
||||
```js
|
||||
let array = ['today', 'was', 'not', 'so', 'great'];
|
||||
|
||||
array.splice(2, 2);
|
||||
```
|
||||
|
||||
Hier entfernen wir 2 Elemente, beginnend mit dem dritten Element (bei Index 2). `array` hätte den Wert `['today', 'was', 'great']`.
|
||||
|
||||
`splice()` verändert nicht nur das Array, auf das es sich bezieht, sondern gibt auch ein neues Array aus, das den Wert des entfernten Elements enthält:
|
||||
|
||||
```js
|
||||
let array = ['I', 'am', 'feeling', 'really', 'happy'];
|
||||
|
||||
let newArray = array.splice(3, 2);
|
||||
```
|
||||
|
||||
`newArray` hat den Wert `['really', 'happy']`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wir haben das neue Array `arr` erstellt. Verwende `splice()`, um Elemente aus `arr` zu entfernen, sodass es nur Elemente enthält, deren Summe den Wert `10` ergibt.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du sollst nicht die ursprüngliche Codezeile `const arr = [2, 4, 5, 1, 7, 5, 2, 1];` ändern.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/constarr=\[2,4,5,1,7,5,2,1\];?/)
|
||||
);
|
||||
```
|
||||
|
||||
`arr` soll nur Elemente enthalten, deren Summe `10` ergibt.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
arr.reduce((a, b) => a + b),
|
||||
10
|
||||
);
|
||||
```
|
||||
|
||||
Ihr Code sollte die Methode `splice()` auf `arr` anwenden.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/arr\.splice\(/));
|
||||
```
|
||||
|
||||
Splice soll nur Elemente aus `arr` entfernen, aber keine zusätzlichen Elemente zu `arr` hinzufügen.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!__helpers.removeWhiteSpace(code).match(/arr\.splice\(\d+,\d+,\d+.*\)/g)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const arr = [2, 4, 5, 1, 7, 5, 2, 1];
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
console.log(arr);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const arr = [2, 4, 5, 1, 7, 5, 2, 1];
|
||||
arr.splice(1, 4);
|
||||
```
|
||||
@@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 587d7b7e367417b2b2512b20
|
||||
title: Verwende ein Array, um eine Sammlung von Daten zu speichern
|
||||
challengeType: 1
|
||||
forumTopicId: 301167
|
||||
dashedName: use-an-array-to-store-a-collection-of-data
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Unten ist ein Beispiel für die einfachste Implementierung einer Array-Datenstruktur. Dies ist als <dfn>eindimensionales Array</dfn>bekannt und bedeutet, dass es nur eine Ebene hat oder dass keine anderen Arrays in ihm verschachtelt sind. Beachte, dass sie <dfn>Booleans</dfn>, <dfn>Strings</dfn> und <dfn>Zahlen</dfn> enthält, neben anderen gültigen JavaScript-Datentypen:
|
||||
|
||||
```js
|
||||
let simpleArray = ['one', 2, 'three', true, false, undefined, null];
|
||||
console.log(simpleArray.length);
|
||||
```
|
||||
|
||||
Der `console.log`-Aufruf zeigt `7` an.
|
||||
|
||||
Alle Arrays haben eine Längeneigenschaft, die, wie oben gezeigt, sehr einfach mit der Syntax `Array.length` abgerufen werden kann. Eine komplexere Implementierung eines Arrays ist im Folgenden zu sehen. Dies wird als <dfn>mehrdimensionales Array</dfn> bezeichnet, oder ein Array, das andere Arrays enthält. Beachte, dass dieses Array auch JavaScript-<dfn>Objekte</dfn> enthält, die wir im nächsten Abschnitt genauer unter die Lupe nehmen werden, aber für den Moment musst du nur wissen, dass Arrays auch komplexe Objekte speichern können.
|
||||
|
||||
```js
|
||||
let complexArray = [
|
||||
[
|
||||
{
|
||||
one: 1,
|
||||
two: 2
|
||||
},
|
||||
{
|
||||
three: 3,
|
||||
four: 4
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
a: "a",
|
||||
b: "b"
|
||||
},
|
||||
{
|
||||
c: "c",
|
||||
d: "d"
|
||||
}
|
||||
]
|
||||
];
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Wir haben eine Variable namens `yourArray` definiert. Vervollständige die Anweisung, indem du der Variable `yourArray` ein Array mit einer Länge von mindestens 5 Elementen zuweist. Dein Array sollte mindestens einen <dfn>String</dfn>, eine <dfn>Zahl</dfn> und ein <dfn>Boolean</dfn> enthalten.
|
||||
|
||||
# --hints--
|
||||
|
||||
`yourArray` soll ein Array sein.
|
||||
|
||||
```js
|
||||
assert.strictEqual(Array.isArray(yourArray), true);
|
||||
```
|
||||
|
||||
`yourArray` soll mindestens 5 Elemente lang sein.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(yourArray.length, 5);
|
||||
```
|
||||
|
||||
`yourArray` soll mindestens einen Boolean (`boolean`) enthalten.
|
||||
|
||||
```js
|
||||
assert(yourArray.filter((el) => typeof el === 'boolean').length >= 1);
|
||||
```
|
||||
|
||||
`yourArray` soll mindestens eine Zahl (`number`) enthalten.
|
||||
|
||||
```js
|
||||
assert(yourArray.filter((el) => typeof el === 'number').length >= 1);
|
||||
```
|
||||
|
||||
`yourArray` soll mindestens einen String (`string`) enthalten.
|
||||
|
||||
```js
|
||||
assert(yourArray.filter((el) => typeof el === 'string').length >= 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let yourArray; // Change this line
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let yourArray = ['a string', 100, true, ['one', 2], 'another string'];
|
||||
```
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b1b
|
||||
title: Verwende das Schlüsselwort delete, um Objekteigenschaften zu löschen
|
||||
challengeType: 1
|
||||
forumTopicId: 301168
|
||||
dashedName: use-the-delete-keyword-to-remove-object-properties
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Jetzt weißt du, was Objekte sind und kennst deren Basisfunktionen und Vorteile. Kurz gefasst handelt es sich um Key-Value-Stores, die eine flexible, intuitive Möglichkeit bieten, Daten zu strukturieren, ***und*** sie bieten eine sehr schnelle Zugriffszeit. Im weiteren Verlauf dieser Aufgaben, werden wir verschiedene gängige Operationen erklären, die du mit Objekten durchführen kannst, damit du dich damit vertraut machen kannst diese nützlichen Datenstrukturen in deinen Programmen anzuwenden.
|
||||
|
||||
In vorherigen Aufgaben haben wir die Schlüssel-Wert-Paare eines Objekts sowohl ergänzt, wie auch modifiziert. Hier werden wir sehen, wie wir ein Schlüssel-Wert-Paar von einem Objekt *entfernen*.
|
||||
|
||||
Lass uns noch einmal unser Objektbeispiel `foods` ein letztes Mal anschauen. Wenn wir den Wert `apples` entfernen wollen, können wir es entfernen indem wir das Schlüsselwort `delete` wie hier verwenden:
|
||||
|
||||
```js
|
||||
delete foods.apples;
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Benutze das Schlüsselwort delete um die Werte `oranges`, `plums` und `strawberries` vom Objekt `foods` zu entfernen.
|
||||
|
||||
# --hints--
|
||||
|
||||
Das Objekt `foods` soll nur drei Schlüsselwörter haben: `apples`, `grapes`und `bananas`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!foods.hasOwnProperty('oranges') &&
|
||||
!foods.hasOwnProperty('plums') &&
|
||||
!foods.hasOwnProperty('strawberries') &&
|
||||
Object.keys(foods).length === 3
|
||||
);
|
||||
```
|
||||
|
||||
Die Werte `oranges`, `plums` und `strawberries` sollen mittels `delete` entfernt werden.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.search(/oranges:/) !== -1 &&
|
||||
code.search(/plums:/) !== -1 &&
|
||||
code.search(/strawberries:/) !== -1
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let foods = {
|
||||
apples: 25,
|
||||
oranges: 32,
|
||||
plums: 28,
|
||||
bananas: 13,
|
||||
grapes: 35,
|
||||
strawberries: 27
|
||||
};
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
|
||||
console.log(foods);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let foods = {
|
||||
apples: 25,
|
||||
oranges: 32,
|
||||
plums: 28,
|
||||
bananas: 13,
|
||||
grapes: 35,
|
||||
strawberries: 27
|
||||
};
|
||||
|
||||
delete foods.oranges;
|
||||
delete foods.plums;
|
||||
delete foods.strawberries;
|
||||
|
||||
console.log(foods);
|
||||
```
|
||||
Reference in New Issue
Block a user