Zenn
Open5

JavaScript学習記録3

kamimura sorakamimura sora

4章少し高度なデータ

01　配列に複数の値をまとめる

Arrayは複数の値をまとめて格納できる型　
特徴：順番をつけれる、作成した後に要素の順番や内容を書き換えれる

c4_1_1.js
let walks = ['抜き足', '差し足', '忍び足',];
console.log(walks[1]);

配列を作成した後ここの要素を書き換えることができる

c4_1_1.js
let walks = ['抜き足', '差し足', '忍び足',];
console.log(walks);
walks[1] = '駆け足';
console.log(walks)

配列の配列を作る

配列の中に配列を格納して入れ子状にすることもできる

c4_1_2.js
let ninja = ['佐助', '才蔵', '六郎',];
let samurai = ['信長', '秀吉', '家康',];
let people = [ninja, samurai];
console.log(people);

コンソールに表示された実行結果の「▶️️️️」をクリックすると配列の中身を確認できる

配列に要素を追加、削除するメソッド

配列のpushメソッド　配列の末尾に要素を追加することができる

c4_1_3.js
let shogun =['家康', '家綱',];
shogun.push('綱吉');
console.log(shogun);

pushメソッドは配列の末尾に要素を追加するが
配列の先頭に要素を追加するにはunshiftメソッドを使う

c4_1_3.js
let shogun =['家康', '家綱',];
shogun.push('綱吉');
console.log(shogun);
shogun.unshift('秀忠');
console.log(shogun);

concatメソッドで他の配列の末尾に結合することもできる
concatメソッドは元の配列と引数を結合した配列を戻り値として返すメソッド

c4_1_3.js
let shogun =['家康', '家綱',];
shogun.push('綱吉');
console.log(shogun);
shogun.unshift('秀忠');
console.log(shogun);
let matudaira = ['家康', '健'];
shogun = shogun.concat(matudaira);
console.log(shogun);

spliceメソッドで要素を削除
spliceメソッドは要素の削除と追加を同時に行えるメソッド
インデックス[5]の要素を1つだけ削除したいので引数は（5, 1）と指定する

c4_1_3.js
let shogun =['家康', '家綱',];
shogun.push('綱吉');
console.log(shogun);
shogun.unshift('秀忠');
console.log(shogun);
let matudaira = ['家康', '健'];
shogun = shogun.concat(matudaira);
console.log(shogun);
shogun.splice(5, 1);
console.log(shogun);

popメソッド　配列から要素を取り出して同時にその要素を削除できる
引数にはインデックスを指定するが、指定しなければ自動的に末尾の要素を取り出して削除

c4_1_3.js
let shogun =['家康', '家綱',];
shogun.push('綱吉');
console.log(shogun);
shogun.unshift('秀忠');
console.log(shogun);
let matudaira = ['家康', '健'];
shogun = shogun.concat(matudaira);
console.log(shogun);
shogun.splice(5, 1);
console.log(shogun);
let shodai = shogun.pop();
console.log(shogun);
console.log(shodai);
shogun.unshift(shodai);
console.log(shogun);
kamimura sorakamimura sora

02 配列を操作する

配列そのものを調べる

lengthプロパティを取得すると配列の要素数を調べることができる

c4_2_1.js
let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
console.log(daysInMonth.length);

includesメソッドは、引数に指定した値が配列の中に存在するかを真偽値で返す

c4_2_1.js
let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
console.log(daysInMonth.length);
console.log(daysInMonth.includes(28));
console.log(daysInMonth.includes(29));

配列の要素を検索する

indexOfメソッドは指定された引数と同じ値を持つ要素のインデックスを返す
同じ値の要素が複数ある場合は、最初に登場するインデックスを返す

c4_2_2.js
let daysInMonth2 = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
console.log(daysInMonth.indexOf(30));

配列の複数の要素を更新する

fillメソッド　1つ目の引き数に更新する値を、2つ目の引き数に更新を開始するインデックスを3つ目の引数に更新を終了するインデックスを指定する

c4_2_3.js
let week1 = ['月', '火', '水', '木', '金'].fill('祝');
let week2 = ['月', '火', '水', '木', '金'].fill('祝', 2);
let week3 = ['月', '火', '水', '木', '金'].fill('祝', 2, 3);
console.log(week1);
console.log(week2);
console.log(week3);

3つ目の引数に指定した値の1つ手前のインデックスまでしか更新されていないことに注意

spliceメソッドは要素の削除だけでなく新しい要素音挿入を行うこともできる
3つ目以降の引数を指定すると要素を削除した部分に新しい値を挿入する

c4_2_4.js
let music = ['Aメロ', 'サビ'];
console.log(music);
music.splice(1, 0, 'Bメロ');
console.log(music);

配列から新しい配列を作る

sliceメソッドは開始インデックス、終了インデックスを指定して配列から連続する要素を取り出して新しい配列を作るメソッド

c4_2_5.js
let duranDuran = ['Simon', 'Nick', 'Andy', 'John', 'Roger'];
let thePowerStation = duranDuran.slice(2, 4);
console.log(duranDuran);
console.log(thePowerStation);
kamimura sorakamimura sora

03_さまざまな文字列

文字列の一部を取り出す

文字列でもインデックスを指定することで一部の文字を取り出すことができる

c4_3_1.js
let word = 'JavaScript'
console.log(word[0], word[4]);

配列のようにインデックスを指定して一部の値を書き換えることはできないので注意

\によるエスケープシーケンス

特定の文字の前に\（バックスラッシュ）をつけて書くことで特殊な文字を入力することができる　これをエスケープシーケンスという
\n→改行　改行は使われることが多い
'→シングルクォート
"→ダブルクォート
\t→水平タブ文字
\→バックスラッシュ

c4_3_2.js
let atsumori = '下天の内を比ぶれば\nゆめ幻のごとくなり';
console.log(atsumori);

テキストの位置を揃えるために使われるタブ文字は「\t」と書くことで表現できる

c4_3_3.js
console.log('\tabc');
console.log('a\tbc');
console.log('ab\tc');

文字列の中に書かれてると特別な意味を持つ「’」や「”」のような文字を通常の文字として扱いたい場合もバックスラッシュを頭につける

c4_3_4.js
console.log('You say \'goodbye\'');
console.log("and T say \"hello\"");

テンプレートリテラルを使いこなす

テンプレートリテラルは全体を｀（バッククォート）で囲んで書く
テンプレートリテラルの中に入力した改行やタブ文字はそのまま残される

c4_3_5.js
let mailText = `お館様

お世話になっております。
服部です。

今週のシフトをお送りいたします。
月曜　　服部
火曜　　川村`;
console.log(mailText);

${}を使えば文字列の中に変数の値を差し込むことができる

c4_3_6.js
let animal = '鶴';
let longevity = 1000;
console.log(`${animal}は${longevity}年`);

String.raw記法で\を通常の文字列として扱う

String.rawは「`」で囲むテンプレートリテラルの前に「String.raw」と書くことで作成できる

c4_3_7.js
console.log(String.raw`\Users\libroworks\Documents\note.tet`);
kamimura sorakamimura sora

04_文字列を操作する

文字列を調べるメソッド

includesメソッド　配列と同じく引き数に指定した値が存在するか真偽値で返す

c4_4_1.js
let text = 'ninja';
console.log(text.includes('j'));

startsWithメソッド　文字列が引数の値で始まっているか
endsWithメソッド　文字列が引数の値で終わっているか

c4_4_2.js
let url = 'https://libroworks.co.jp';
console.log(url.startsWith('https://'));
console.log(url.endsWith('.com'));

startsWithメソッド2つ目の引数としてどのインデックスから確認を始めるかを
endsWithメソッド2つ目の引数としてどのインデックスで確認を終えるかを数式で指定

文字列から新しい文字列を作る

これらのメソッドはすべて新しい文字列を作成することに注意
replaceメソッド　1つ目の引数で指定した値を2つ目の引数に置き換えた結果を返す

c4_4_3.js
let message = '忍者です。伊賀市出身です。';
console.log(message.replace('です','でござる'));

1回目に出現した文字列しか置換の対象にならない
すべての文字列を置換したい場合はreplaceAllメソッド

c4_4_3.js
let message = '忍者です。伊賀市出身です。';
console.log(message.replace('です','でござる'));
console.log(message.replaceAll('です','でござる'));

trimメソッド　半角スペース、全角スペース、改行文字などの空白文字を取り除くメソッド

c4_4_4.js
let toName = '　　服部 様\n';
console.log(toName.trim());

文字列の最初と最後以外の場所にある空白文字は削除されないことに注意

文字列を分離、結合する

splitメソッドは、指定した文字で文字列を分割して配列を返すメソッド
分割する文字のことをセパレータ

c4_4_5.js
let poetry = '忍れど 色に出にけり 我が恋は';
console.log(poetry.split(' '));

concatメソッド　複数の文字列を結合して1つの文字列を返すメソッド

c4_4_6.js
console.log('臨'.concat('兵', '闘', '者', '皆', '陣'));
kamimura sorakamimura sora

05_オブジェクトリテラルでデータをまとめる

オブジェクトリテラルの作り方

オブジェクト　複数のキーと値の組み合わせをまとめて管理するデータ型
オブジェクトは個々の値に重複しないキーを与えることで管理する
オブジェクトリテラルは「キー：値」という形

c4_5_1.js
let scores = {
    math: 98,
    japanese: 70,
    science: 89,
};
console.log(scores);

オブジェクトの要素のことをプロパティと呼ぶ
オブジェクトリテラルのプロパティを参照するときにはプロパティ名を指定する
ブラケット記法　オブジェクト名の後に[]に囲んでプロパティ名を文字列として書く
ドット記法　ドットをつけてプロパティ名を書く　　　　　　この二つの方法がある

c4_5_1.js
console.log(scores['math'], scores.japanese);

プロパティ名が変数に格納されている場合はブラケット記法で指定
後で説明する繰り返し処理の中でプロパティを指定するのに便利

c4_5_1.js
let subject = 'science';
console.log(scores[subject]);

プロパティの追加、変更

オブジェクトに存在しないプロパティを指定して値を代入

c4_5_1.js
scores.science = '欠席';
scores['english'] = 'A+';
console.log(scores)

プロパティにはオブジェクトや配列も含めて任意の型の値を入れることができる
プロパティのキー（プロパティ名）は文字列である必要がある

プロパティの有無を確認

in演算子を使う

c4_5_1.js
console.log('musuc' in scores);