chore(i18n,learn): processed translations (#44851)
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 5a661e0f1068aca922b3ef17
|
||||
title: ブラケット記法による配列内容へのアクセス
|
||||
challengeType: 1
|
||||
forumTopicId: 301149
|
||||
dashedName: access-an-arrays-contents-using-bracket-notation
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
当然ですが、どんなデータ構造でも基本的な機能として、データを保存できるだけでなく、コマンドでそれらのデータを取得することもできます。 ここまで配列の作成方法を学びました。今度は配列の情報にアクセスする方法を見ていきましょう。
|
||||
|
||||
以下では単純な配列を定義していますが、配列には 3 つのアイテムがあります。
|
||||
|
||||
```js
|
||||
let ourArray = ["a", "b", "c"];
|
||||
```
|
||||
|
||||
配列では、配列のアイテムがそれぞれ<dfn>インデックス</dfn>を持ちます。 このインデックスは、配列内のアイテムの位置と参照方法を兼ねています。 ただし、JavaScript の配列では<dfn>インデックスは 0 から始まる</dfn>ことを覚えておいてください。つまり、配列の最初の要素の位置は ***0*** であって、1 ではないということです。 配列から要素を取得するには、インデックスをブラケット (角括弧) で囲み、配列の末尾に追加するか、または通常は配列オブジェクトを参照する変数に追加します。 これを<dfn>ブラケット記法</dfn>といいます。 たとえば、`ourArray` から `a` を取得して変数に割り当てたい場合、コードは次のようになります。
|
||||
|
||||
```js
|
||||
let ourVariable = ourArray[0];
|
||||
```
|
||||
|
||||
これで `ourVariable` の値は `a` になります。
|
||||
|
||||
ブラケット記法を使用して、インデックスに関連付けられた値にアクセスできるだけでなく、インデックスに*値を設定する*こともできます。
|
||||
|
||||
```js
|
||||
ourArray[1] = "not b anymore";
|
||||
```
|
||||
|
||||
ブラケット記法を使用して、このアイテムのインデックス 1 を文字列 `b` から `not b anymore` に設定しなおしました。 これで、`ourArray` は `["a", "not b anymore", "c"]` になります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`myArray` の 2 番目の位置 (インデックス `1`) に任意の要素 (文字 `b` 以外) を設定して、このチャレンジを完了してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`myArray[0]` は文字 `a` と等しくなければなりません。
|
||||
|
||||
```js
|
||||
assert.strictEqual(myArray[0], 'a');
|
||||
```
|
||||
|
||||
`myArray[1]` は文字 `b` と等しくしてはなりません。
|
||||
|
||||
```js
|
||||
assert.notStrictEqual(myArray[1], 'b');
|
||||
```
|
||||
|
||||
`myArray[2]` は文字 `c` と等しくなければなりません。
|
||||
|
||||
```js
|
||||
assert.strictEqual(myArray[2], 'c');
|
||||
```
|
||||
|
||||
`myArray[3]` は文字 `d` と等しくなければなりません。
|
||||
|
||||
```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: ブラケット記法によるプロパティ名へのアクセス
|
||||
challengeType: 1
|
||||
forumTopicId: 301150
|
||||
dashedName: access-property-names-with-bracket-notation
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
最初のオブジェクトのチャレンジでは、ブラケット記法の用法として、変数の評価を使用してプロパティ値にアクセスする方法について説明しました。 たとえば、スーパーマーケットのレジのプログラムで `foods` オブジェクトが使用されているとしましょう。 `selectedFood` を設定する関数があり、`foods` オブジェクトをチェックして、その食品の有無を確認したいとします。 これは、以下のようになります。
|
||||
|
||||
```js
|
||||
let selectedFood = getCurrentFood(scannedItem);
|
||||
let inventory = foods[selectedFood];
|
||||
```
|
||||
|
||||
このコードは `selectedFood` 変数に保存されている値を評価し、`foods` オブジェクト内の該当するキーの値を返すか、キーが存在しない場合は `undefined` を返します。 実行時にオブジェクトのプロパティがわからない場合や、より動的な方法でのアクセスが必要な場合があるため、ブラケット記法は非常に便利です。
|
||||
|
||||
# --instructions--
|
||||
|
||||
関数 `checkInventory`を定義しました。これは引数としてスキャンしたアイテムを受け取ります。 `foods` オブジェクトの `scannedItem` キーの現在の値を返してください。 `checkInventory` の引数として有効なキーのみが与えられると仮定してかまいません。
|
||||
|
||||
# --hints--
|
||||
|
||||
`checkInventory` は関数でなければなりません。
|
||||
|
||||
```js
|
||||
assert.strictEqual(typeof checkInventory, 'function');
|
||||
```
|
||||
|
||||
`foods` オブジェクトには以下のキーと値のペアのみがあるものとします: `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")` は `25` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.strictEqual(checkInventory('apples'), 25);
|
||||
```
|
||||
|
||||
`checkInventory("bananas")` は `13` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.strictEqual(checkInventory('bananas'), 13);
|
||||
```
|
||||
|
||||
`checkInventory("strawberries")` は `27` を返す必要があります。
|
||||
|
||||
```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: push() と unshift() による配列へのアイテムの追加
|
||||
challengeType: 1
|
||||
forumTopicId: 301151
|
||||
dashedName: add-items-to-an-array-with-push-and-unshift
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
配列の長さは、そこに含まれるデータ型と同じく固定されていません。 配列は任意の数の要素の長さで定義することができ、要素は時間の経過とともに追加されたり削除されたりします。 つまり、配列は<dfn>ミュータブル (変更可能)</dfn> です。 このチャレンジでは、配列をプログラム的に変更できる 2 つのメソッド `Array.push()` と `Array.unshift()` について見ていきます。
|
||||
|
||||
どちらのメソッドもパラメーターとして 1 つ以上の要素を受け取り、メソッド呼び出しの対象の配列にそれらの要素を追加します。`push()` メソッドは要素を配列の末尾に追加し、`unshift()` メソッドは要素を配列の先頭に追加します。 以下の例について考えてみましょう。
|
||||
|
||||
```js
|
||||
let twentyThree = 'XXIII';
|
||||
let romanNumerals = ['XXI', 'XXII'];
|
||||
|
||||
romanNumerals.unshift('XIX', 'XX');
|
||||
```
|
||||
|
||||
この場合、`romanNumerals` の値は `['XIX', 'XX', 'XXI', 'XXII']` になります。
|
||||
|
||||
```js
|
||||
romanNumerals.push(twentyThree);
|
||||
```
|
||||
|
||||
この場合、`romanNumerals` の値は `['XIX', 'XX', 'XXI', 'XXII', 'XXIII']` になります。 ここでは変数を渡すこともできることに注目してください。これにより、配列データの動的な変更がさらに柔軟に行えます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
関数 `mixedNumbers`を定義しました。引数として配列を渡しています。 `push()` と `unshift()` を使用してこの関数を変更してください。`'I', 2, 'three'` を配列の先頭に、`7, 'VIII', 9` を末尾に追加して、数字 1～9 が順番に表示される配列を返すようにします。
|
||||
|
||||
# --hints--
|
||||
|
||||
ここでは、`mixedNumbers(["IV", 5, "six"])` は `["I", 2, "three", "IV", 5, "six", 7, "VIII", 9]` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.deepEqual(mixedNumbers(['IV', 5, 'six']), [
|
||||
'I',
|
||||
2,
|
||||
'three',
|
||||
'IV',
|
||||
5,
|
||||
'six',
|
||||
7,
|
||||
'VIII',
|
||||
9
|
||||
]);
|
||||
```
|
||||
|
||||
`mixedNumbers` 関数で `push()` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(mixedNumbers.toString().match(/\.push/));
|
||||
```
|
||||
|
||||
`mixedNumbers` 関数で `unshift()` メソッドを使用する必要があります。
|
||||
|
||||
```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: Splice() によるアイテムの追加
|
||||
challengeType: 1
|
||||
forumTopicId: 301152
|
||||
dashedName: add-items-using-splice
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前回のチャレンジで説明しましたが、`splice()` は最大 3 つのパラメーターを取ることができます。 3 つ目のパラメーターは 1 つ以上の要素で構成されますが、このパラメーターを使用して配列に追加することができます。 これは、1 つまたは複数の要素を別の要素にすばやく入れ替えるのに非常に便利です。
|
||||
|
||||
```js
|
||||
const numbers = [10, 11, 12, 12, 15];
|
||||
const startIndex = 3;
|
||||
const amountToDelete = 1;
|
||||
|
||||
numbers.splice(startIndex, amountToDelete, 13, 14);
|
||||
console.log(numbers);
|
||||
```
|
||||
|
||||
2 つ目の重複する `12` は削除され、同じインデックスに `13` と `14` が追加されます。 これで `numbers` 配列は `[ 10, 11, 12, 13, 14, 15 ]` となります。
|
||||
|
||||
ここでは、最初に数字の配列があります。 次に、`splice()` に、要素の削除を開始するインデックス (3) と、削除する要素の数 (1)、そして、同じインデックスに順に挿入される残りの引数 (13, 14) を渡します。 `amountToDelete` の後に、任意の数の要素 (コンマで区切る) を指定でき、それぞれを挿入できることに注意してください。
|
||||
|
||||
# --instructions--
|
||||
|
||||
関数 `htmlColorNames`を定義しました。これは、引数として HTML カラーの配列を取ります。 `splice()` を使用して関数を変更してください。配列の最初の 2 つの要素を削除し、それぞれの場所に `'DarkSalmon'` と `'BlanchedAlmond'` を追加します。
|
||||
|
||||
# --hints--
|
||||
|
||||
`htmlColorNames` は `["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurquoise", "FireBrick"]` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
htmlColorNames([
|
||||
'DarkGoldenRod',
|
||||
'WhiteSmoke',
|
||||
'LavenderBlush',
|
||||
'PaleTurquoise',
|
||||
'FireBrick'
|
||||
]),
|
||||
[
|
||||
'DarkSalmon',
|
||||
'BlanchedAlmond',
|
||||
'LavenderBlush',
|
||||
'PaleTurquoise',
|
||||
'FireBrick'
|
||||
]
|
||||
);
|
||||
```
|
||||
|
||||
`htmlColorNames` 関数で `splice()` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(/.splice/.test(code));
|
||||
```
|
||||
|
||||
`shift()` または `unshift()` は使用しないでください。
|
||||
|
||||
```js
|
||||
assert(!/shift|unshift/.test(code));
|
||||
```
|
||||
|
||||
配列ブラケット記法は使用しないでください。
|
||||
|
||||
```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: JavaScript オブジェクトにキーと値のペアを追加する
|
||||
challengeType: 1
|
||||
forumTopicId: 301153
|
||||
dashedName: add-key-value-pairs-to-javascript-objects
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
最も基本的なオブジェクトは、<dfn>キーと値</dfn>のペアのみの集合です。 言い換えれば、これは<dfn>プロパティ</dfn> ( <dfn>キー</dfn>) と呼ばれる一意の識別子にマッピングされるデータ (<dfn>値</dfn>) の集まりです。 例を見てみましょう。
|
||||
|
||||
```js
|
||||
const tekkenCharacter = {
|
||||
player: 'Hwoarang',
|
||||
fightingStyle: 'Tae Kwon Doe',
|
||||
human: true
|
||||
};
|
||||
```
|
||||
|
||||
上記のコードは、`tekkenCharacter` という鉄拳ビデオゲームキャラクターのオブジェクトを定義しています。 オブジェクトには 3 つのプロパティがあり、それぞれが特定の値にマッピングされています。 "origin" などの新しいプロパティを追加したい場合は、`origin` をオブジェクトに割り当てます。
|
||||
|
||||
```js
|
||||
tekkenCharacter.origin = 'South Korea';
|
||||
```
|
||||
|
||||
これにはドット記法を使用しています。 `tekkenCharacter` オブジェクトを確認すると、`origin` プロパティが追加されたことがわかります。 Hwoarang は特徴的なオレンジ色の髪をしていました。 このプロパティをブラケット記法で追加することができます。
|
||||
|
||||
```js
|
||||
tekkenCharacter['hair color'] = 'dyed orange';
|
||||
```
|
||||
|
||||
プロパティにスペースがある場合や、プロパティに名前を付けるために変数を使用する場合には、ブラケット記法が必要となります。 上記の場合、プロパティを引用符で囲んで文字列として示すことで、表示されているとおりに追加されます。 引用符がなければ、変数として評価され、プロパティの名前は変数の値となります。 次に変数を含む例を示します。
|
||||
|
||||
```js
|
||||
const eyes = 'eye color';
|
||||
|
||||
tekkenCharacter[eyes] = 'brown';
|
||||
```
|
||||
|
||||
すべての例を追加すると、このオブジェクトは次のようになります。
|
||||
|
||||
```js
|
||||
{
|
||||
player: 'Hwoarang',
|
||||
fightingStyle: 'Tae Kwon Doe',
|
||||
human: true,
|
||||
origin: 'South Korea',
|
||||
'hair color': 'dyed orange',
|
||||
'eye color': 'brown'
|
||||
};
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
3 つのエントリを持つ `foods` オブジェクトが作成されています。 任意の構文を用いて、このオブジェクトに新たに 3 つのエントリを追加してください。`bananas` の値は `13`、`grapes` の値は `35`、`strawberries` の値は `27` です。
|
||||
|
||||
# --hints--
|
||||
|
||||
`foods` はオブジェクトである必要があります。
|
||||
|
||||
```js
|
||||
assert(typeof foods === 'object');
|
||||
```
|
||||
|
||||
`foods` オブジェクトには値 `13` を持つキー `bananas` が含まれている必要があります。
|
||||
|
||||
```js
|
||||
assert(foods.bananas === 13);
|
||||
```
|
||||
|
||||
`foods` オブジェクトには値 `35` を持つキー `grapes` が含まれている必要があります。
|
||||
|
||||
```js
|
||||
assert(foods.grapes === 35);
|
||||
```
|
||||
|
||||
`foods` オブジェクトには値 `27` を持つキー `strawberries` が含まれている必要があります。
|
||||
|
||||
```js
|
||||
assert(foods.strawberries === 27);
|
||||
```
|
||||
|
||||
キーと値のペアはドット記法またはブラケット記法を使用して、設定する必要があります。
|
||||
|
||||
```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: indexOf() で要素の存在をチェックする
|
||||
challengeType: 1
|
||||
forumTopicId: 301154
|
||||
dashedName: check-for-the-presence-of-an-element-with-indexof
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
配列はいつでも変更、つまり*ミューテート*が可能であるため、 特定のデータが配列内のどこにあるのかや、その要素がまだ存在するかどうかについては何も保証されません。 幸い、JavaScript には組み込みメソッド `indexOf()` があり、配列内の要素の存在を素早く簡単に確認することができます。 `indexOf()` は要素をパラメーターとして取り、呼び出すと要素の位置 (インデックス) を返します。要素が配列内に存在しない場合には `-1` を返します。
|
||||
|
||||
例:
|
||||
|
||||
```js
|
||||
let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears'];
|
||||
|
||||
fruits.indexOf('dates');
|
||||
fruits.indexOf('oranges');
|
||||
fruits.indexOf('pears');
|
||||
```
|
||||
|
||||
`indexOf('dates')` は `-1` を返します。`indexOf('oranges')` は `2` を、`indexOf('pears')` は `1` を返します (それぞれの要素が出現する最初のインデックス)。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`indexOf()` は、配列内の要素の存在を素早くチェックするのに非常に便利です。 関数 `quickCheck` を定義しました。この関数は配列と要素を引数として取ります。 `indexOf()` を使用してこの関数を変更し、渡した要素が配列内に存在する場合は `true` を、存在しない場合は `false` を返すようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`quickCheck` 関数は文字列 (`"true"` または `"false"`) ではなく、ブール型 (`true` または `false`) を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.isBoolean(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'));
|
||||
```
|
||||
|
||||
`quickCheck(["squash", "onions", "shallots"], "mushrooms")` は `false` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'),
|
||||
false
|
||||
);
|
||||
```
|
||||
|
||||
`quickCheck(["onions", "squash", "shallots"], "onions")` は `true` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
quickCheck(['onions', 'squash', 'shallots'], 'onions'),
|
||||
true
|
||||
);
|
||||
```
|
||||
|
||||
`quickCheck([3, 5, 9, 125, 45, 2], 125)` は `true` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.strictEqual(quickCheck([3, 5, 9, 125, 45, 2], 125), true);
|
||||
```
|
||||
|
||||
`quickCheck([true, false, false], undefined)` は `false` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.strictEqual(quickCheck([true, false, false], undefined), false);
|
||||
```
|
||||
|
||||
`quickCheck` 関数では `indexOf()` メソッドを使用する必要があります。
|
||||
|
||||
```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: オブジェクトにプロパティがあるかどうかを確認する
|
||||
challengeType: 1
|
||||
forumTopicId: 301155
|
||||
dashedName: check-if-an-object-has-a-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
オブジェクトのキーの追加、変更、削除について学びました。 しかし、オブジェクトに特定のプロパティがあるかどうかを知りたいだけの場合はどうすればよいでしょうか？ JavaScript には、そのことを調べるための 2 つの異なる方法があります。 1 つは `hasOwnProperty()` メソッドを使用する方法で、もう 1 つは `in` キーワードを使用する方法です。 `Alan` というプロパティを持つオブジェクト `users` がある場合、次のいずれかの方法でその存在を確認することができます。
|
||||
|
||||
```js
|
||||
users.hasOwnProperty('Alan');
|
||||
'Alan' in users;
|
||||
```
|
||||
|
||||
どちらも `true` を返します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
渡されたオブジェクトに `Alan`、`Jeff`、`Sarah`、`Ryan` の 4 つの名前すべてが含まれている場合は true を返し、そうでない場合は false を返すように、関数の記述を完成させてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`users` オブジェクトに直接アクセスすることはできません。
|
||||
|
||||
```js
|
||||
|
||||
assert(code.match(/users/gm).length <= 2)
|
||||
|
||||
```
|
||||
|
||||
`users` オブジェクトには `Alan`、`Jeff`、`Sarah`、`Ryan` のキーのみを含めます。
|
||||
|
||||
```js
|
||||
assert(
|
||||
'Alan' in users &&
|
||||
'Jeff' in users &&
|
||||
'Sarah' in users &&
|
||||
'Ryan' in users &&
|
||||
Object.keys(users).length === 4
|
||||
);
|
||||
```
|
||||
|
||||
関数 `isEveryoneHere` は、`Alan`、`Jeff`、`Sarah`、`Ryan` が渡されたオブジェクトのプロパティである場合、`true` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert(isEveryoneHere(users) === true);
|
||||
```
|
||||
|
||||
関数 `isEveryoneHere` は、`Alan` が渡されたオブジェクトのプロパティではない場合、`false` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
delete users.Alan;
|
||||
return isEveryoneHere(users);
|
||||
})() === false
|
||||
);
|
||||
```
|
||||
|
||||
関数 `isEveryoneHere` は、`Jeff` が渡されたオブジェクトのプロパティではない場合、`false` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
delete users.Jeff;
|
||||
return isEveryoneHere(users);
|
||||
})() === false
|
||||
);
|
||||
```
|
||||
|
||||
関数 `isEveryoneHere` は、`Sarah` が渡されたオブジェクトのプロパティではない場合、`false` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
delete users.Sarah;
|
||||
return isEveryoneHere(users);
|
||||
})() === false
|
||||
);
|
||||
```
|
||||
|
||||
関数 `isEveryoneHere` は、`Ryan` が渡されたオブジェクトのプロパティではない場合、`false` を返す必要があります。
|
||||
|
||||
```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: スプレッド演算子による配列の結合
|
||||
challengeType: 1
|
||||
forumTopicId: 301156
|
||||
dashedName: combine-arrays-with-the-spread-operator
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>スプレッド</dfn>演算子のもう一つの大きな利点は、配列を結合できること、つまり、ある配列のすべての要素を別の配列の任意のインデックスに挿入できることです。 従来の古い構文でも配列を結合できますが、その場合は、一方の末尾ともう一方の先頭の位置のみで結合が可能です。 スプレッド構文を使用すれば次のような操作が非常に簡単になります。
|
||||
|
||||
```js
|
||||
let thisArray = ['sage', 'rosemary', 'parsley', 'thyme'];
|
||||
|
||||
let thatArray = ['basil', 'cilantro', ...thisArray, 'coriander'];
|
||||
```
|
||||
|
||||
これで `thatArray` の値は `['basil', 'cilantro', 'sage', 'rosemary', 'parsley', 'thyme', 'coriander']` になります。
|
||||
|
||||
スプレッド構文を使用することで、従来のメソッドでは複雑で冗長だった操作を、より簡単に行えるようになりました。
|
||||
|
||||
# --instructions--
|
||||
|
||||
変数 `sentence` を返す関数 `spreadOut` を定義しました。 <dfn>スプレッド</dfn>演算子を使用して関数を変更し、配列 `['learning', 'to', 'code', 'is', 'fun']` を返すようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`spreadOut` は `["learning", "to", "code", "is", "fun"]` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.deepEqual(spreadOut(), ['learning', 'to', 'code', 'is', 'fun']);
|
||||
```
|
||||
|
||||
`spreadOut` 関数ではスプレッド構文を使用する必要があります。
|
||||
|
||||
```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: スプレッド演算子による配列のコピー
|
||||
challengeType: 1
|
||||
forumTopicId: 301157
|
||||
dashedName: copy-an-array-with-the-spread-operator
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`slice()` を使用すると、コピーする配列の要素を選択できますが、他にもいくつかの便利な機能があり、ES6の新しい<dfn>スプレッド演算子</dfn>を使用すれば、簡単で非常に読みやすい構文で、配列の*すべての*要素を順番通りにコピーすることができます。 スプレッドの構文は「`...`」のように単純なものです。
|
||||
|
||||
実際には、スプレッド演算子を使用して、以下のように配列をコピーすることができます。
|
||||
|
||||
```js
|
||||
let thisArray = [true, true, undefined, false, null];
|
||||
let thatArray = [...thisArray];
|
||||
```
|
||||
|
||||
`thatArray` は `[true, true, undefined, false, null]` になります。 `thisArray` は変更されず、`thatArray` には `thisArray` と同じ要素が含まれます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
関数 `copyMachine` を定義しました。この関数は引数として `arr` (配列) と `num` (数値) を受け取ります。 この関数では、`arr` の `num` 個のコピーで構成される新しい配列を返す必要があります。 必要なものはほぼ揃っていますが、まだうまく機能しません。 スプレッド構文を使用して、正しく機能するように関数を変更してください (ヒント: すでに説明した別のメソッドがここで役に立つかもしれません)。
|
||||
|
||||
# --hints--
|
||||
|
||||
`copyMachine([true, false, true], 2)` は `[[true, false, true], [true, false, true]]` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.deepEqual(copyMachine([true, false, true], 2), [
|
||||
[true, false, true],
|
||||
[true, false, true]
|
||||
]);
|
||||
```
|
||||
|
||||
`copyMachine([1, 2, 3], 5)` は `[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]` を返す必要があります。
|
||||
|
||||
```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)` は `[[true, true, null]]` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.deepEqual(copyMachine([true, true, null], 1), [[true, true, null]]);
|
||||
```
|
||||
|
||||
`copyMachine(["it works"], 3)` は `[["it works"], ["it works"], ["it works"]]` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.deepEqual(copyMachine(['it works'], 3), [
|
||||
['it works'],
|
||||
['it works'],
|
||||
['it works']
|
||||
]);
|
||||
```
|
||||
|
||||
`copyMachine` 関数では、配列 `arr` を付けた `spread operator` を使用する必要があります。
|
||||
|
||||
```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: Slice() を使用した配列アイテムのコピー
|
||||
challengeType: 1
|
||||
forumTopicId: 301158
|
||||
dashedName: copy-array-items-using-slice
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
次に取り上げるメソッドは `slice()` です。 `slice()` は配列を変更するのではなく、指定された数の要素を新しい配列にコピー、または*抽出*します。呼び出された配列は変更されずに残されます。 `slice()` は 2 つのパラメーターしか取りません。最初のパラメーターは抽出を開始するインデックスで、2 つ目のパラメーターは抽出を終了するインデックスです (このインデックスの前の要素までが抽出されます)。 以下の例を考えてみましょう。
|
||||
|
||||
```js
|
||||
let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear'];
|
||||
|
||||
let todaysWeather = weatherConditions.slice(1, 3);
|
||||
```
|
||||
|
||||
`todaysWeather` の値は `['snow', 'sleet']` になりますが、`weatherConditions` の値は `['rain', 'snow', 'sleet', 'hail', 'clear']` のままです。
|
||||
|
||||
結果として、既存の配列から要素を抽出して新しい配列を作成したことになります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
関数 `forecast` を定義しました。この関数は配列を引数として取ります。 `slice()` を使用して、引数の配列から情報を抽出し、文字列要素 `warm` と `sunny` を含む新しい配列を返すように、関数を変更してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`forecast` は `["warm", "sunny"]` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']),
|
||||
['warm', 'sunny']
|
||||
);
|
||||
```
|
||||
|
||||
`forecast` 関数で `slice()` メソッドを使用する必要があります。
|
||||
|
||||
```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: 複雑な多次元配列の作成
|
||||
challengeType: 1
|
||||
forumTopicId: 301159
|
||||
dashedName: create-complex-multi-dimensional-arrays
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
お疲れ様！ 配列について多くのことを学びましたね！ かなりハイレベルな概要でしたが、配列の操作についてはまだ学ぶべきことがたくさんあります。その多くはこのあとのセクションで説明していきます。 ですが<dfn>オブジェクト</dfn>に移る前に、もう一度確認しておきましょう。これまでのチャレンジで取り上げたものより、配列をもう少し複雑にする方法について見ていきます。
|
||||
|
||||
配列をデータ構造として捉えるときに最も強力な機能の一つは、配列に他の配列を含めることができる、あるいは完全に他の配列で構成することができるという点です。 これまでのチャレンジでも、配列を含む配列を取り上げてきましたが、それらはかなり単純な例でした。 しかし、配列では他の配列を格納できる無限の深さの配列を扱うことができ、含まれる各配列にも任意のレベルの深さを持たせることができます。さらにそこに含まれる配列も同様です。 このように、配列はたちまち非常に複雑なデータ構造になる可能性があります。こうした配列のことを<dfn>多次元</dfn>配列、またはネストされた配列と呼びます。 以下の例を考えてみましょう。
|
||||
|
||||
```js
|
||||
let nestedArray = [
|
||||
['deep'],
|
||||
[
|
||||
['deeper'], ['deeper']
|
||||
],
|
||||
[
|
||||
[
|
||||
['deepest'], ['deepest']
|
||||
],
|
||||
[
|
||||
[
|
||||
['deepest-est?']
|
||||
]
|
||||
]
|
||||
]
|
||||
];
|
||||
```
|
||||
|
||||
`deep` 配列はネストレベル 2 の深さです。 `deeper` 配列はレベル 3 の深さです。 `deepest` 配列はレベル 4、`deepest-est?` はレベル 5 です。
|
||||
|
||||
この例は複雑に見えるかもしれませんが、大量のデータを扱う場合はこのくらいのレベルの複雑さを扱うこともあり、さほど珍しいわけでもありません。 しかし、ブラケット記法を使用すれば、こうした複雑な例の最も深いレベルの配列にも簡単にアクセスすることができます。
|
||||
|
||||
```js
|
||||
console.log(nestedArray[2][1][0][0][0]);
|
||||
```
|
||||
|
||||
これは文字列 `deepest-est?` を出力します。 そして、このデータの位置を確認できたので、必要に応じて再設定することができます。
|
||||
|
||||
```js
|
||||
nestedArray[2][1][0][0][0] = 'deeper still';
|
||||
|
||||
console.log(nestedArray[2][1][0][0][0]);
|
||||
```
|
||||
|
||||
今度は `deeper still` が出力されます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
変数 `myNestedArray` を定義し、配列を設定しました。 `myNestedArray` を変更してください。データ要素として<dfn>文字列</dfn>、<dfn>数値</dfn>、<dfn>ブール値</dfn>を任意に組み合わせて使用し、ちょうどレベル 5 の深さを持つようにします (一番外側の配列がレベル 1 です)。 レベル 3 に文字列 `deep` を、レベル 4 に文字列 `deeper` を、レベル 5 に文字列 `deepest` を、それぞれ含めてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`myNestedArray` には、データ要素として数値、ブール値、文字列のみを含めます。
|
||||
|
||||
```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` は正確にレベル 5 の深さを持つ必要があります。
|
||||
|
||||
```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` で、レベル 3 の深さの配列に、文字列 `deep` が 1 回だけ出現する必要があります。
|
||||
|
||||
```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` レベル 4 の深さの配列に、文字列 `deeper` が 1 回だけ出現する必要があります。
|
||||
|
||||
```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` で、レベル 5 の深さの配列に、文字列 `deepest` が 1 回だけ出現する必要があります。
|
||||
|
||||
```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: Object.keys() による全オブジェクトキーの配列の生成
|
||||
challengeType: 1
|
||||
forumTopicId: 301160
|
||||
dashedName: generate-an-array-of-all-object-keys-with-object-keys
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`Object.keys()`メソッドを使用し、オブジェクトを引数として渡すことで、オブジェクトにあるすべてのキーを含む配列を生成することも可能です。 この場合は、オブジェクト内の各プロパティを表す文字列を持つ配列を返します。 ここでも、配列内のエントリに対する特定の順序はありません。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`getArrayOfUsers` 関数の記述を完成させて、引数として受け取ったオブジェクトのすべてのプロパティを含む配列を返してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`users` オブジェクトには `Alan`、`Jeff`、`Sarah`、`Ryan` のキーのみを含めます。
|
||||
|
||||
```js
|
||||
assert(
|
||||
'Alan' in users &&
|
||||
'Jeff' in users &&
|
||||
'Sarah' in users &&
|
||||
'Ryan' in users &&
|
||||
Object.keys(users).length === 4
|
||||
);
|
||||
```
|
||||
|
||||
`getArrayOfUsers` 関数は、`users` オブジェクト内のすべてのキーを含む配列を返す必要があります。
|
||||
|
||||
```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: For ループによる配列の全アイテムの繰り返し処理
|
||||
challengeType: 1
|
||||
forumTopicId: 301161
|
||||
dashedName: iterate-through-all-an-arrays-items-using-for-loops
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
配列処理では、必要な 1 つ以上の要素を検索したい場合や、特定の基準を満たすデータアイテムに基づいて配列を操作したい場合に、各アイテムを繰り返し処理できるととても便利です。 JavaScript には配列の繰り返し処理を行える組み込みメソッドがいくつかありますが (`every()`、`forEach()`、`map()` など)、繰り返しの方法や得られる結果はそれぞれわずかに異なります。しかし、最も柔軟性があり、最大限の制御ができるのは、単純な `for` ループです。
|
||||
|
||||
以下の例について考えてみましょう。
|
||||
|
||||
```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]);
|
||||
```
|
||||
|
||||
この関数は、`for` ループを使用して繰り返し処理で配列の各要素にアクセスし、作成済みの単純なテストを実行します。 この例は、`10` より大きいデータアイテムをプログラムで簡単に判断し、そのアイテムを含む新しい配列 `[12, 14, 80]` を返します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
関数 `filteredArray` を定義しました。この関数は引数として、ネストされた配列 `arr` と `elem` を受け取り、新しい配列を返します。 `elem` は、`arr` 内でネストされた 1 つ以上の配列の要素を表しますが、その要素が存在する場合もあれば存在しない場合もあります。 この関数を変更し、`for` ループを使用して、`arr` 内のネストされた配列のうち `elem` が含まれているものをすべて削除し、渡された配列を絞り込んだ結果を返すようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)` は `[[10, 8, 3], [14, 6, 23]]` を返す必要があります。
|
||||
|
||||
```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)` は `[["flutes", 4]]` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
filteredArray(
|
||||
[
|
||||
['trumpets', 2],
|
||||
['flutes', 4],
|
||||
['saxophones', 2]
|
||||
],
|
||||
2
|
||||
),
|
||||
[['flutes', 4]]
|
||||
);
|
||||
```
|
||||
|
||||
`filteredArray([["amy", "beth", "sam"], ["dave", "sean", "peter"]], "peter")` は `[["amy", "beth", "sam"]]` を返す必要があります。
|
||||
|
||||
```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)` は `[]` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
filteredArray(
|
||||
[
|
||||
[3, 2, 3],
|
||||
[1, 6, 3],
|
||||
[3, 13, 26],
|
||||
[19, 3, 9]
|
||||
],
|
||||
3
|
||||
),
|
||||
[]
|
||||
);
|
||||
```
|
||||
|
||||
`filteredArray` 関数では `for` ループを使用する必要があります。
|
||||
|
||||
```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: for...in ステートメントによるオブジェクトのキーの繰り返し処理
|
||||
challengeType: 1
|
||||
forumTopicId: 301162
|
||||
dashedName: iterate-through-the-keys-of-an-object-with-a-for---in-statement
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
オブジェクト内のすべてのキーの繰り返し処理を必要とする場合があります。 これには、<dfn>for...in</dfn> ステートメントと呼ばれる JavaScript 固有の構文が必要になります。 `users` オブジェクトの場合は次のように記述できます。
|
||||
|
||||
```js
|
||||
for (let user in users) {
|
||||
console.log(user);
|
||||
}
|
||||
```
|
||||
|
||||
これは `Alan`、`Jeff`、`Sarah`、`Ryan` を出力し、それぞれの値を独自の行に表示します。
|
||||
|
||||
このステートメントでは変数 `user` を定義しました。ご覧のように、for...in ステートメントでオブジェクトがループ処理されるとき、この変数は繰り返し処理ごとにオブジェクトの各キーにリセットされ、それぞれのユーザー名がコンソールに出力されます。
|
||||
|
||||
**注:** オブジェクトも配列の場合と同じように、格納されているキーの順序は維持されません。つまり、キーを参照したりキーにアクセスしたりするときは、そのキーのオブジェクト内での位置や、表示される相対的な順序は無関係になります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
関数 `countOnline` を定義しました。この関数は 1 つの引数 (ユーザーオブジェクト) を受け取ります。 この関数の中で <dfn>for...in</dfn> ステートメントを使用して、関数に渡されたユーザーオブジェクトをループ処理し、`online` プロパティが `true` に設定されているユーザーの数を返してください。 たとえば、`countOnline` には次のようなユーザーオブジェクトが渡されます。 各ユーザーは `true` または `false` のいずれかの値を持つ `online` プロパティを持ちます。
|
||||
|
||||
```js
|
||||
{
|
||||
Alan: {
|
||||
online: false
|
||||
},
|
||||
Jeff: {
|
||||
online: true
|
||||
},
|
||||
Sarah: {
|
||||
online: false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
関数 `countOnline` では `for in` ステートメントを使用して、渡されたオブジェクトのオブジェクトキーを繰り返し処理する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/for\s*\(\s*(var|let|const)\s+[a-zA-Z_$]\w*\s+in\s+[a-zA-Z_$]\w*\s*\)/
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
関数 `countOnline` は、オブジェクト `{ Alan: { online: false }, Jeff: { online: true }, Sarah: { online: false } }` が渡された場合、`1` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert(countOnline(usersObj1) === 1);
|
||||
```
|
||||
|
||||
関数 `countOnline` は、オブジェクト `{ Alan: { online: true }, Jeff: { online: false }, Sarah: { online: true } }` が渡された場合、`2` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert(countOnline(usersObj2) === 2);
|
||||
```
|
||||
|
||||
関数 `countOnline` は、オブジェクト `{ Alan: { online: false }, Jeff: { online: false }, Sarah: { online: false } }` が渡された場合、`0` を返す必要があります。
|
||||
|
||||
```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: オブジェクトに格納されている配列の変更
|
||||
challengeType: 1
|
||||
forumTopicId: 301163
|
||||
dashedName: modify-an-array-stored-in-an-object
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ここまで、JavaScript オブジェクトの基本的な操作をすべて見てきました。 キーと値のペアの追加、変更、削除、キーが存在するかどうかの確認、オブジェクト内のすべてのキーの繰り返し処理ができるようになりました。 JavaScript の学習を続けることで、さらに様々なオブジェクトの操作方法を習得できるようになります。 また、カリキュラムのコーディングインタビュー準備セクションにあるデータ構造レッスンでは、ES6 の <dfn>Map</dfn> と <dfn>Set</dfn> オブジェクトについても取り上げています。どちらも通常のオブジェクトと似ていますが、いくつかの追加機能を備えています。 配列やオブジェクトの基本を学んできたことで、JavaScript を使用したより複雑な問題に取り組む準備が整いました。
|
||||
|
||||
# --instructions--
|
||||
|
||||
コードエディターに用意されているオブジェクトをご覧ください。 この `user` オブジェクトには 3 つのキーが含まれています。 `data` キーには 5 つのキーが含まれており、そのうちの 1 つには `friends` の配列が含まれています。 このことから、オブジェクトがデータ構造として非常に柔軟であることがわかります。 関数 `addFriend` の記述が一部できていますが、 この記述を完成させて、関数が `user` オブジェクトを受け取り、`friend` 引数の名前を `user.data.friends`に格納されている配列に追加して、その配列を返すようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`user` オブジェクトに `name`、`age`、`data` のキーが存在する必要があります。
|
||||
|
||||
```js
|
||||
assert('name' in user && 'age' in user && 'data' in user);
|
||||
```
|
||||
|
||||
`addFriend` 関数は、`user` オブジェクトと `friend` 文字列を引数として取り、`user` オブジェクト内の `friends` の配列に friend を追加する必要があります。
|
||||
|
||||
```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")` は `["Sam", "Kira", "Tomo", "Pete"]` を返す必要があります。
|
||||
|
||||
```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: オブジェクト内でネストされたオブジェクトの変更
|
||||
challengeType: 1
|
||||
forumTopicId: 301164
|
||||
dashedName: modify-an-object-nested-within-an-object
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
今度はもう少し複雑なオブジェクトを見てみましょう。 オブジェクトのプロパティは任意の深さまでネストすることができ、その値は、配列や他のオブジェクトなど、JavaScript でサポートされているあらゆる種類のデータを取ることができます。 以下の例について考えてみましょう。
|
||||
|
||||
```js
|
||||
let nestedObject = {
|
||||
id: 28802695164,
|
||||
date: 'December 31, 2016',
|
||||
data: {
|
||||
totalUsers: 99,
|
||||
online: 80,
|
||||
onlineStatus: {
|
||||
active: 67,
|
||||
away: 13,
|
||||
busy: 8
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
`nestedObject` には、`id` (値は数値)、`date` (値は文字列)、`data` (値はネスト構造のオブジェクト) の 3 つのプロパティがあります。 構造はすぐに複雑になりますが、同じ記法を使用して、必要な情報にアクセスすることができます。 ネストされた `onlineStatus` オブジェクトの `busy` プロパティに値 `10` を割り当てるには、 ドット記法を用いてプロパティを参照します。
|
||||
|
||||
```js
|
||||
nestedObject.data.onlineStatus.busy = 10;
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
オブジェクト `userActivity` を定義しました。このオブジェクトの中には、ネストされた別のオブジェクトが含まれています。 `online` キーの値を `45` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`userActivity` には `id`、`date`、`data` のプロパティが存在する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
'id' in userActivity && 'date' in userActivity && 'data' in userActivity
|
||||
);
|
||||
```
|
||||
|
||||
`userActivity` には `data` キーがあり、`totalUsers` と `online` というキーを持つオブジェクトが設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert('totalUsers' in userActivity.data && 'online' in userActivity.data);
|
||||
```
|
||||
|
||||
`userActivity` の `data` キー内でネストされた `online` プロパティを、`45` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(userActivity.data.online === 45);
|
||||
```
|
||||
|
||||
`online` プロパティを、ドット記法またはブラケット記法を使用して設定する必要があります。
|
||||
|
||||
```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: pop() と shift() による配列からのアイテムの削除
|
||||
challengeType: 1
|
||||
forumTopicId: 301165
|
||||
dashedName: remove-items-from-an-array-with-pop-and-shift
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`push()` および `unshift()` と対で、ほぼ反対の機能を持つメソッドが `pop()` および `shift()` です。 ご推察のとおり、`pop()` は配列の末尾から、`shift()` は配列の先頭から、要素を追加するのではなく*削除*します。 `pop()` や `shift()` は同じような仲間の `push()` や `unshift()` と違って、どちらのメソッドもパラメーターを受け取らず、一度に 1 つの配列要素しか変更できません。
|
||||
|
||||
以下を見てみましょう。
|
||||
|
||||
```js
|
||||
let greetings = ['whats up?', 'hello', 'see ya!'];
|
||||
|
||||
greetings.pop();
|
||||
```
|
||||
|
||||
`greetings` の値は `['whats up?', 'hello']` になります。
|
||||
|
||||
```js
|
||||
greetings.shift();
|
||||
```
|
||||
|
||||
`greetings` の値は `['hello']` になります。
|
||||
|
||||
以下のような方法で、削除された要素の値を返すこともできます。
|
||||
|
||||
```js
|
||||
let popped = greetings.pop();
|
||||
```
|
||||
|
||||
`greetings` の値は `[]` に、`popped` の値は `hello` になります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
関数 `popShift` を定義しました。この関数は引数として配列を受け取り、新しい配列を返します。 `pop()` と `shift()` を使用して関数を変更してください。引数である配列の最初と最後の要素を削除し、削除された要素を対応する変数に割り当てて、それらの値を含む配列を返すようにします。
|
||||
|
||||
# --hints--
|
||||
|
||||
`popShift(["challenge", "is", "not", "complete"])` は `["challenge", "complete"]` を返す必要があります。
|
||||
|
||||
```js
|
||||
assert.deepEqual(popShift(['challenge', 'is', 'not', 'complete']), [
|
||||
'challenge',
|
||||
'complete'
|
||||
]);
|
||||
```
|
||||
|
||||
`popShift` 関数で `pop()` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert.notStrictEqual(popShift.toString().search(/\.pop\(/), -1);
|
||||
```
|
||||
|
||||
`popShift` 関数で `shift()` メソッドを使用する必要があります。
|
||||
|
||||
```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: Splice() によるアイテムの削除
|
||||
challengeType: 1
|
||||
forumTopicId: 301166
|
||||
dashedName: remove-items-using-splice
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`shift()` と `pop()` を使用して、配列の先頭と末尾から要素を削除する方法を学びました。しかし中間のどこかから要素を取り除きたい場合はどうすればよいでしょうか？ あるいは、一度に複数の要素を取り除きたい場合はどうすればよいでしょうか？ そこで登場するのが `splice()` です。 `splice()` を使用すると、配列の任意の場所から**連続した任意の数の要素を削除する**ことができます。
|
||||
|
||||
`splice()` は最大で 3 つのパラメーターを受け取ることができますが、ここでは最初の 2 つだけに注目しましょう。 `splice()` の最初の 2 つのパラメーターは、`splice()` を呼び出している配列のインデックス (または位置) を表す整数です。 すでに説明したように、配列は*インデックスがゼロから始まる*ため、配列の最初の要素を指定する場合は `0` を使用します。 `splice()` の最初のパラメーターは、要素の削除を開始する配列上のインデックスを表します。 一方、2 番目のパラメータは、削除する要素の数を示します。 例:
|
||||
|
||||
```js
|
||||
let array = ['today', 'was', 'not', 'so', 'great'];
|
||||
|
||||
array.splice(2, 2);
|
||||
```
|
||||
|
||||
ここでは、3 番目の要素 (インデックスが 2) から始まる 2 つの要素を削除しています。 `array` の値は `['today', 'was', 'great']` になります。
|
||||
|
||||
`splice()` は、呼び出されている配列を変更するだけでなく、削除された要素の値を含む新しい配列も返します。
|
||||
|
||||
```js
|
||||
let array = ['I', 'am', 'feeling', 'really', 'happy'];
|
||||
|
||||
let newArray = array.splice(3, 2);
|
||||
```
|
||||
|
||||
`newArray` の値は `['really', 'happy']` になります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
配列 `arr` が初期化されています。 `splice()` を使用して `arr` から要素を削除し、値の合計が `10` となる要素のみを含むようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`const arr = [2, 4, 5, 1, 7, 5, 2, 1];` の元の順序を変更しないでください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/constarr=\[2,4,5,1,7,5,2,1\];?/)
|
||||
);
|
||||
```
|
||||
|
||||
`arr` には合計が `10` となる要素のみを含める必要があります。
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
arr.reduce((a, b) => a + b),
|
||||
10
|
||||
);
|
||||
```
|
||||
|
||||
コードでは、`arr` に対して `splice()` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/arr\.splice\(/));
|
||||
```
|
||||
|
||||
splice は `arr` から要素を削除するのみで、`arr` にどんな新しい要素も追加しないものとします。
|
||||
|
||||
```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: 配列によって複数のデータをまとめて格納する
|
||||
challengeType: 1
|
||||
forumTopicId: 301167
|
||||
dashedName: use-an-array-to-store-a-collection-of-data
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
以下は、配列データ構造の最も簡単な実装例です。 このような配列を <dfn>1 次元配列</dfn>と呼びます。つまり、1 つの階層しか持たない、あるいは内部にネストされた他の配列がない配列です。 <dfn>ブール値</dfn>、<dfn>文字列</dfn>、<dfn>数値</dfn>など、JavaScript の有効な他のデータ型が含まれていることに注意してください。
|
||||
|
||||
```js
|
||||
let simpleArray = ['one', 2, 'three', true, false, undefined, null];
|
||||
console.log(simpleArray.length);
|
||||
```
|
||||
|
||||
この `console.log` は `7` を表示します。
|
||||
|
||||
すべての配列には上記のような length プロパティがあり、`Array.length` という構文で非常に簡単にアクセスできます。 もっと複雑な配列の実装例を以下に示します。 こうした配列を<dfn>多次元配列</dfn>と呼びます。つまり、他の配列を含む配列です。 この配列には JavaScript の<dfn>オブジェクト</dfn>も含まれていることに注意してください。オブジェクトについては次のセクションで詳しく説明します。 しかしここでは、配列は複雑なオブジェクトも格納できるということだけを知っておいてください。
|
||||
|
||||
```js
|
||||
let complexArray = [
|
||||
[
|
||||
{
|
||||
one: 1,
|
||||
two: 2
|
||||
},
|
||||
{
|
||||
three: 3,
|
||||
four: 4
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
a: "a",
|
||||
b: "b"
|
||||
},
|
||||
{
|
||||
c: "c",
|
||||
d: "d"
|
||||
}
|
||||
]
|
||||
];
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`yourArray` という変数を定義しました。 `yourArray` 変数に、要素数 length が 5 以上の配列を割り当てて、記述を完成させてください。 配列には<dfn>文字列</dfn>、<dfn>数値</dfn>、<dfn>ブール値</dfn>をそれぞれ 1 つ以上含める必要があります。
|
||||
|
||||
# --hints--
|
||||
|
||||
`yourArray` は配列である必要があります。
|
||||
|
||||
```js
|
||||
assert.strictEqual(Array.isArray(yourArray), true);
|
||||
```
|
||||
|
||||
`yourArray` の要素数は 5 以上である必要があります。
|
||||
|
||||
```js
|
||||
assert.isAtLeast(yourArray.length, 5);
|
||||
```
|
||||
|
||||
`yourArray` には少なくとも 1 つの `boolean` を含める必要があります。
|
||||
|
||||
```js
|
||||
assert(yourArray.filter((el) => typeof el === 'boolean').length >= 1);
|
||||
```
|
||||
|
||||
`yourArray` には少なくとも 1 つの `number` を含める必要があります。
|
||||
|
||||
```js
|
||||
assert(yourArray.filter((el) => typeof el === 'number').length >= 1);
|
||||
```
|
||||
|
||||
`yourArray` には少なくとも 1 つの `string` を含める必要があります。
|
||||
|
||||
```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: delete キーワードを使用してオブジェクトプロパティを削除する
|
||||
challengeType: 1
|
||||
forumTopicId: 301168
|
||||
dashedName: use-the-delete-keyword-to-remove-object-properties
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ここまで、オブジェクトとは何か、そしてその基本的な機能と利点について学んできました。 手短に言えば、オブジェクトとはキーと値のペアを格納したものです。データを構造化するための柔軟で直感的な方法を提供し、***なおかつ***、参照時間が非常に高速です。 以降のチャレンジでは、オブジェクトに対するいくつかの一般的な操作について説明します。これらを学ぶことで、こうした便利なデータ構造を自身のプログラムで自信をもって扱えるようになるでしょう。
|
||||
|
||||
前のチャレンジで、オブジェクトのキーと値のペアの追加と変更について説明しました。 ここでは、オブジェクトからキーと値のペアを*削除*する方法について説明します。
|
||||
|
||||
もう一度だけ、`foods` オブジェクトの例を取り上げてみましょう。 `apples` キーを削除したい場合は、次のように `delete` キーワードを使用して削除できます。
|
||||
|
||||
```js
|
||||
delete foods.apples;
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
delete キーワードを使用して、`foods` オブジェクトから `oranges`、`plums`、`strawberries` のキーを削除してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`foods` オブジェクトには `apples`、`grapes`、`bananas` の 3 つのキーのみが存在する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
!foods.hasOwnProperty('oranges') &&
|
||||
!foods.hasOwnProperty('plums') &&
|
||||
!foods.hasOwnProperty('strawberries') &&
|
||||
Object.keys(foods).length === 3
|
||||
);
|
||||
```
|
||||
|
||||
`delete`を使用して `oranges`、`plums`、`strawberries` のキーを削除する必要があります。
|
||||
|
||||
```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