Open5

4章少し高度なデータ

人形劇人形劇

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

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

配列(Array) 順番を示す数値インデックス 0から数える
配列を作成したあと個々の要素を書き換える

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

console.log(people[0][0]);

配列の中に配列を入れることができる

c4_1_3_.js
let shogun = ['家光','家綱'];
shogun.push('綱吉');
console.log(shogun);
shogun.unshift('秀忠');
console.log(shogun);
let matsudaira = ['家康','健'];
shogun = shogun.concat(matsudaira);
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メゾットは、配列の最後に要素を追加
unshiftメゾットは、配列の先頭に要素を追加
concatメゾットは、もとの配列に引数を結合した配列を戻り値として返すメゾット
今回は他の配列の最後に結合させている concatメゾット実行しただけでは、もとの配列は変更されない
spliceメゾットは、要素の削除、追加を行う
要素の削除と類かを同時に行える。 上記では削除を行なっている。
popメゾット 配列から要素を取り出して削除する。削除するにはインデックスをしてする。
指定しない場合は最後の要素を取り出し削除。

人形劇人形劇

#02配列を操作する

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));

lengthプロパティ 配列の要素数を調べることができます。
includesメゾッド 因数に指定した値が配列の中に存在するか真偽で返す。

c4_2_2.js
console.log(daysInMonth.indexOf(30));
console.log(daysInMonth.lastIndexOf(30));

indexOfメゾッド指定された引数と同じ値を持つインデックスを返す。 複数の場合最初を返す
lastIndexOfメゾッドの場合は最後のインデックスを返す。

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);

fillメゾットは配列の中の特定の範囲を同じにする。
引数が1つ目は更新する値2つ目は更新を開始するインデックス3つ目は更新を終了するインデックス
を指定する
week1は全て更新 week2はインデックス2以降を更新
week3要な時は引数3つ目の指定した値の1つ手前までしか更新されない

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

spliceメゾッドは新しい要素の挿入もできる。

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

sliceメゾッド インデックスの開始と終了をしてい連続した要素を取り出す。
終了インデックスの一つ前までを取り出す。
引数を省略した場合開始は0 終了は配列の長さ

人形劇人形劇

#03様々な文字列

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

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

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

特定の文字の前に\バックシュラッシュをつけておくことで
特殊な文字を入力これをエクケープシーケンス
\n改行 'シングルクォート "ダブルクオート\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 I say \"hello\"")
c4_3_5.js
let mailText = `お館様

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

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

テンプレートリテラルを使用すると全体を`バッククォートで囲み改行タブ文字が打ったままにする

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

${・・・} ・・・の部分の変数式の値の応じて変わる。

c4_3_7.js
console.log(String.raw`\Users\libroworks\Documents\note.txt`);

テンプレートリテラルの前にString.rawを書くと\だけで\かける

人形劇人形劇

#04文字列を操作する

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

includesメゾッド 文字列の中に引数に指定したあたいがあるか真偽で返す

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

startWithメゾッド文字列が引数で始まっているかendWithは引数で終わっているか。
startWithの二つ目の引数はどのインデックスから確認を始めるか endWithhは確認を終えるか

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

replaceメゾッド 1つ目の引数を2つ目の引数に置き換える
1回目の文字列しか対象にならない
全て変えたい場合はreplaceAllを使う

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

trimメゾッド 文字列の最初と最後の空白文字を取り除く文字列の間のものは消されない

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

splitメゾッド指定した文字列を分割する 分割する文字をセパレータを言う
なぜか一文字ずつ別れたなぜなぜなぜなぜ

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

concatメゾッド複数の文字列を結合して1つの文字列にする。
素の文字列を先頭に順番につなげる

人形劇人形劇

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

4_5_1.js
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['ebglish'] = 'A+';
console.log(scores);
console.log('music'in scores);

オブジェクト 複数のキーと値の組み合わせを管理
オブジェクトは個々の値に重複しないキーを与えることで管理
オブジェクトリテラル キー:値コロンを挟んだペアを間まで区切って全体を{}囲む
オブジェクトの要素をプロパティ
オブジェクトリテラルのプロパティを参照する時にはプロパティ名を指定する。
プラケット記法オブジェクト名の後に[]に囲んでプロパティ名を文字列で書く
ドット記法 .でプロパティ名を書く
オブジェクトに存在しないプロパティを指定して値を代入する
プロパティにはオブジェクトや配列も含めて任意の型の値を入れることができます。
プロパティのキー(プロパティ名)は文字列である必要がある。
in演算子を使うとオブジェクトの中にとあるプロパティがあるかないか真偽でわかる