少し高度なデータ
配列に複数の値をまとめる
JavaScriptつみあげトレーニングブックより
let walks = ['抜き足','差し足','忍び足'];
console.log(walks[1]);
walks[1]='駆け足';
console.log(walks)
配列の特徴は要素に順番をつけて管理できる、作成した後に要素の順番や内容を書き換えることができることの2つ。
配列を作成する場合は、0個以上の要素を「 [ ] 」で囲う。
配列全体ではなく個々の要素を参照したい場合は、配列名の後ろに[]で囲んだ数字を書く。
インデックスは先頭からの相対的な距離を離すため、先頭は0から数え始める。
また、配列を作成した後に個々の要素を書き換えることができる。
let ninja=['佐助','才蔵','六郎'];
let samurai=['信長','秀吉','家康'];
let people=[ninja,samurai];
console.log(people);
console.log(people[0][0]);
配列は型の異なるデータをまとめて格納できるが、配列の中に配列を格納し、入れ子状にすることのできる。
let shogun=['家光','家綱'];
shogun.push('綱吉');
console.log(shogun);
shogun.unshift('秀忠');
console.log(shogun);
let matssudaira=['家康','健'];
shogun=shogun.concat(matssudaira);
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);
配列のpushメゾットを使うと、配列の末尾に要素を追加することができる。
pushメゾットは配列の末尾に要素を追加することができるが、配列の先頭に要素を追加するにはunshiftメゾットを使用する。
concatメゾットで、他の配列を末尾に結合することもできる。concatメゾットは、もとの配列と引数を結合した配列を戻り値として返すメゾットのため、代入文の左右にもとの配列を、右辺にconcatメゾットを書くことで、結合した結果がもとの配列に代入される。
spliceメゾットは、配列に対して要素の削除と追加を同時に行えるメゾット
popメゾットを使うと、配列から要素を取り出して、同時にその要素を削除できる。引数にはインデックスを指定するが、指定しなければ自動的に末尾の要素を取り出して削除する。
配列を操作する
JavaScriptつみあげトレーニングブックより
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));
lengthプロパティを取得すると、配列の要素数を調べることができる。
lengthプロパティは、引数に指定した値が配列の中に存在するかを真偽値で返す。
let daysInMonth2=[31,28,31,30,31,30,31,31,30,31,30,31];
console.log(daysInMonth2.indexOf(30));
console.log(daysInMonth2.lastIndexOf(30));
indexOfメゾットは、指定された引数と同じ値を持つ要素のインデックスを返す。同じ値あの要素がある場合は、最初に登場するインデックスを返す。
indexOfメゾットを使えば、指定した値が最後に登場するインデックスを検索することができる。
let week1=['月','火','水','木','金'].fill('祝');
let week2=['月','火','水','木','金'].fill('祝',2);
let week3=['月','火','水','木','金'].fill('祝',2,3);
console.log(week1)
console.log(week2)
console.log(week3)
fillメゾットは、配列の中で特定の範囲を同じ値に書き換えるメゾット。
1つ目の引数に更新する値、2つ目の引数に更新を開始するインデックス、3つ目の引数に更新を終了するインデックスを指定する。1つ目の引数以外は省略可能。省略した場合は開始するインデックス以外は0、終了するインデックスは配列の長さが自動的に指定される。
3つ目の引数に指定した値の、1つ手前のインデックスまでしか更新されないことに注意
let music=['Aメロ','サビ'];
console.log(music);
music.splice(1,0,'Bメロ');
console.log(music);
2つ目の引数に0を指定しているため要素の削除を行わず、要素の挿入だけを行っていいる。
さまざまな文字列
JavaScriptつみあげトレーニングブックより
let word='JavaScript';
console.log(word[0],word[4]);
文字列でもインデックスを指定することで一部の文字を取り出せる。
特定の文字の前に「\」をつけて書くことで、特殊な文字を入力することができる。これをエスケープシーケンスという。
エスケープシーケンス 説明
\n 改行
\ ' シングルクォート
\ " ダブルクォート
\t 水平タブ文字
\ バックスラッシュ
let atsumori='下天の内を比ぶれば\nゆめ幻のごとくなり';
console.log(atsumori);
最も使う機会が多いのは、改行文字として使う「\n」文字列の中にこの文字が含まれると、改行として扱われる。
console.log('\tabc');
console.log('a\tbc');
console.log('ab\tc');
テキストの位置を揃えるために使われるタブ文字は、「\t」と書くことで表現できる。
console.log('you say\'goodbye\'');
console.log("and I say\"hello\"");
特別ない意味を持つ「'」、「"」のような文字を通常の文字として使いたい場合も、\を頭につける。
let mailText=`お館様
お世話になっております。
服部です。
今週のシフトをお送りいたします。
月曜 服部
火曜 川村`;
console.log(mailText);
テンプレートリテラルは全体を「'」を囲んで書く。テンプレートリテラルの中に入力した改行やタブは文字はそのまま残される。
let animal='鶴';
let longevity=1000;
console.log(`${animal}は${longevity}年`);
値を差し込みしたい部分を${}という形で囲むことで、その部分が変数や式の値に応じて書き換わる。
console.log(String.raw`\Users\liboroworks\Documents\note.txt`);
String.rawという記法を使うと便利。String.rawは、「'」で囲むテンプレートリテラルの前に、「String.raw」と書くと作成できる。
文字列を操作する
JavaScriptつみあげトレーニングブックより
let text='ninja';
console.log(text.includes('j'));
includesメゾットを使うと、配列と同じく、引数に指定した値が存在するかが真偽値で返る。
let url='https://liboroworks.co.jp';
console.log(url.startsWith('https://'));
console.log(url.endsWith('.com'));
startsWithメゾットは文字列が引数の値で始まっているか、endsWithメゾットは文字列が引数の値で終わっているかを判定します。
let message='忍者です。伊賀市出身です。';
console.log(message.replace('です','でござる'));
console.log(message.replaceAll('です','でござる'));
文字列の内容を変更して、新しい文字列を作成するメゾットもある。だが、文字列は配列のように値を変更できないため、これらのメゾットは全て新しい文字列を作成することに注意が必要。
replaceメゾットは1つ目の引数で指定した値を、2つ目の引数に置き換えた結果を返す。
全ての文字を置換したい場合は、replaceAllを使う。
let toName=' 服部 様\n';
console.log(toName.trim());
trimメゾットは、文字列の最初と最後にある半角スペース、全角スペース改行文字を取り除くメゾット。trimメゾットには引数を指定しない。
文字列の最初と最後以外の場所にある空白文字は除去されない。
let poetry='忍れど 色に出にけり 我が恋は';
console.log(poetry.split(''));
splitメゾットは、指定した文字を分割して、配置を繰り返すメゾット。分割する文字のことをセパレータというが、セパレータには半角スペース、「-」「/」などの記号が使われる事が一般的。
console.log('臨'.concat('兵','闘','者','皆','陣'));
concatメゾットは反対的に複数の文字列を結合して1つの文字列を返すメゾット。もとの文字列を先頭に、引数に指定した文字列を順番に繋げていく。
オブジェクトリテラルでデータをまとめる
JavaScriptつみあげトレーニングブックより
let scores={
math: 98,
japanese: 70,
science: 89,
};
console.log(scores);
console.log(scores['math'],scores.japanese);
let subject='science';
console.log(scores[subject]);
scores.science='欠席';
scores['english']='A+';
console.log(scores);
console.log('music' in scores);
プロパティにはオブジェクトや配列も含め任意の型の値を入れる事ができる。一方で、プロパティのキー(プロパティ名)は文字列である必要がある。ただし、変数の名前として有効な文字列や数字をプロパティとして使う場合は、" , "" で囲む必要はない。
オブジェクトの中に、あるプロパティが存在するかどうかを知りたい場合は、in演算子を使う。