JavaScriptつみトレ4章 少し高度なデータ
あsec1_配列に複数の値をまとめる
「配列」は複数の値をまとめて収納できる型
[値a,値b,値c]
[ 0 , 1 , 2 ]
let walks = ['抜き足','差し足','忍び足'];
console.log(walks[1]);
//実行結果
//差し足
個々の要素を書き換えることも可能
let walks = ['抜き足','差し足','忍び足'];
console.log(walks);
walks[1]='駆け足';
console.log(walks);
//実行結果
//['抜き足','差し足','忍び足']
//['抜き足','駆け足','忍び足']
配列の中に配列を格納して入れ子状にすることもできる
let ninja=['佐助','才蔵','六郎'];
let samurai =['信長','秀吉','家康'];
let people =[ninja,samurai];
console.log(people);
//実行結果
//[Array(3),Array(3)]
実行結果に関しては、コンソールに表示された実行結果の「▶︎」をクリックすると配列の中身を表示できる
peopleに格納された値を取り出したい場合は、インデックスを2つ指定すると取り出せる
console.log(people[0][0]);
//実行結果
//佐助
pushメソッドを使って配列に要素を追加する
配列の末尾に追加したい場合は「push」
let shogun = ['家光','家綱'];
shogun.push('綱吉');
console.log(shogun);
//実行結果
//['家光','家綱','綱吉']
家光、家綱の配列に綱吉が追加された
配列の先頭に追加したい場合は「unshift」
shogun.unshift('秀忠');
console.log(shogun);
//実行結果
//['秀忠', '家光', '家綱', '綱吉']
他の配列と結合させたい場合は「concat」
let matudaira = ['家康','健'];
shogun = shogun.concat(matudaira);
console.log(shogun);
//実行結果
//['秀忠', '家光', '家綱', '綱吉', '家康', '健']
要素の削除をしたい場合は「splice」
shogun.splice(5,1);
console.log(shogun);
//実行結果
//['秀忠', '家光', '家綱', '綱吉', '家康']
sec2_配列を操作する
「length」を使って配列の要素数を調べることができる
let daysInmonth = [31,28,31,30,31,30,31,31,30,31,30,31];
console.log(daysInmonth.length);
//実行結果
//12
「includesメソッド」を使うと、引数に指定した値が配列の中に存在するかを真偽値で返す
console.log(daysInmonth.includes(28)); //28は存在する
console.log(daysInmonth.includes(29)); //29は存在しない
//実行結果
//True
//False
「indexOfメソッド」を使うと、指定された引数と同じ値を持つ要素の「最初のインデックス」を返す
「lastIndexOfメソッド」を使うと、指定された引数と同じ値を持つ要素の「最後のインデックス」を返す
let daysInmonth1 = [31,28,31,30,31,30,31,31,30,31,30,31];
console.log(daysInmonth1.indexOf(30));
console.log(daysInmonth1.lastIndexOf(30));
//実行結果
//3
//10
「fillメソッド」を使えば配列のなかの指定した範囲を要素を書き換えることができる↓
fill(更新する値、更新を開始するインデックス数、更新を終了するインデックス数)
let weeks1=['月','火','水','木','金'].fill('祝');
let weeks2=['月','火','水','木','金'].fill('祝',2);
let weeks3=['月','火','水','木','金'].fill('祝',2,3);
console.log(weeks1);
console.log(weeks2);
console.log(weeks3);
//実行結果
//[祝、祝、祝、祝、祝]
//[月、火、祝、祝、祝]
//[月、火、祝、木、金]
let music=['Aメロ','サビ'];
console.log(music)
music.splice(1,0,'Bメロ');
console.log(music)
//実行結果
//[Aメロ、Bメロ]
//[Aメロ、Bメロ、サビ]
「sliceメソッド」は、開始インデックスと終了インデックスを指定して、指定された要素を取り出して新しい配列を作るメソッド
let duranDuran=['Simon','Nick','Andy','John','Roger'];
let thePowerStation=duranDuran.slice(2,4);
console.log(duranDuran);
console.log(thePowerStation);
//実行結果
//['Simon'、'Nick'、'Andy'、'John'、'Roger']
//['Andy'、'John']
sec3_さまざまな文字列
文字列でもインデックスを指定して一部の文字を取り出すことができる
let word = 'JavaScript';
console.log(word[0],word[4]);
//実行結果
//JS
「 \ (バックスラッシュ)」をつけて書くことで、特殊な文字を入力することができる
「エスケープシーケンス」という
「 \n 」は改行
let atsumori='下天の内を比ぶれば\n夢幻の如くなり';
console.log(atsumori);
//実行結果
//下天の内を比ぶれば
//夢幻の如くなり
「 \t 」はテキストの位置を揃えるために使われる
console.log('\tabc');
console.log('a\tbc');
console.log('ab\tc');
//実行結果
// abc
//a bc
//ab c
「 '' (シングルクォート)」「 "" (ダブルクォート)」のような文字を普通の文字として扱いたいときは、バックスラッシュを頭につける
console.log('You say \'goodbye\'');
console.log("and I say \"hello\"");
//実行結果
//You say 'goodbye'
//and I say "hello"
改行が多く含まれる文を書く場合、\nだと見栄えが悪いので
全体をバッククォートを使って囲う
「テンプレートリテラル」という
let mailText = `お館様
お世話になっております。
服部です。
今週のシフトをお送りします。
月曜 服部
火曜 川村`;
console.log(mailText);
テンプレートリテラルの中に変数の値を差し込むとき、値を差し込みたい部分を「 ${ } 」で囲む
let animal = '鶴';
let longevity =1000;
console.log(`${animal}は${longevity}年`);
//実行結果
//鶴は1000年
ファイルのパスやバックスラッシュを多用する文字列を入力する際には「 String.raw 」を使うと便利
console.log(String.raw`\Users\libroworks\Douments\note.txt`)
sec4_文字列を操作する
「includesメソッド」を使うと引数に指定した値が配列の中に存在しているかどうかが真偽値でわかる
let text = 'ninja';
console.log(text.includes('j'));
//実行結果
//true
「startsWithメソッド」は文字列が引数の値で始まっているか
「endsWithメソッド」は文字列が引数の値で終わっているか
を判定する
let url = 'https://libroworks.co.jp';
console.log(url.startsWith('https://'));
console.log(url.endsWith('.com'));
//実行結果
//true
//false
「replaceメソッド」を使えば１つ目の引数で指定した値を２つ目の引数に置き換えられる
let message ='忍者です。伊賀市出身です';
console.log(message.replace('です','でござる'));
//実行結果
//忍者でござる。伊賀市出身です
replaceでは１回目に出現した文字列しか置換の対象にならないので
「replaceAll」を使って全て置き換える
console.log(message.replaceAll('です','でござる'))
//実行結果
//忍者でござる。伊賀市出身でござる
「trimメソッド」は文字列の最初と最後にある空白文字を取り除くメソッド
引数は指定しない
let toName = ' 服部 様\n';
console.log(toName.trim());
//実行結果
//服部 様
「splitメソッド」は指定した文字で文字列を分割して、配列を返すメソッド
分割する文字のことを「セパレータ」という
let poetry = '忍ぶけれど 色に出にけり 我が恋は';
console.log(poetry.split(' '));
「concatメソッド」はsplitとは反対に複数の文字列を結合して１つの文字列を返すメソッド
console.log('臨'.concat('兵','闘','者','皆','陣'));
sec5_プロジェクトリテラルでデータをまとめる
オブジェクトとは、複数の値の組み合わせをまとめて管理するデータ値
「キー：値」という形でコロンを挟んだペアを、カンマで区切って並べて全体を波カッコ{}で囲んだもの
let scores = {
math: 98,
japanese: 70,
science: 89,
};
console.log(scores);
//実行結果
//{math: 98, japanese: 70, science: 89}
オブジェクトの要素のことを「プロパティ」という
オブジェクトリテラルのプロパティを参照するにはプロパティ名を指定する
オブジェクト名の後に [] に囲んでプロパティ名を文字列として書く「ブラケット記法」
「 . 」をつけてプロパティ名を書く「ドット記法」がある
console.log(scores['math'],scores.japanese);
let subject='science';
console.log(scores[subject]);
オブジェクトリテラルも値を書き換えることができる
まだオブジェクトに存在しないプロパティを指定して値を代入すると、キーと値のペアが新たに追加される
scores.science = '欠席';
scores['english']='A+';
console.log(scores);