クロピグログ

職業訓練で学んだことまとめ

【JavaScript授業十二日目】組み込みオブジェクト(続き4)

Dateインスタンス代表的なメソッド テキストP170~171

Stringインスタンス代表的なプロパティ テキストP183~191

Arrayインスタンス代表的なプロパティ テキストP194~210

 

●文字数を表示

var str = '田中,菊池,丸,鈴木,新井';
console.log(str.length + "文字です");

 

●「丸」の文字位置表示

var str = '田中,菊池,丸,鈴木,新井';
console.log(str.indexOf('丸') + 1);
今回は1から数えた位置番号にしたいので+1している
※PG内部の0からカウントで「6」の解答もOK

 

●文字をカンマ区切りで配列化して表示

var str = '田中,菊池,丸,鈴木,新井';
var array = str.split(',');
 
for (var i = 0i < array.lengthi++) {
  console.log(array[i] + "さん");
}

 

●最後のファイル名のみ抽出

//解1(lastIndexOf+slice)
console.log(src2.slice(src2.lastIndexOf("/") + 1));

//解2(配列)
メリット:後で管理しやすい
デメリット:配列するのでメモリ重くなる
var array2 = src2.split("/");
console.log(array2[array2.length - 1]);

 

正規表現使い方

・今回の問題ではあまりよくないが、文字数や数字の数が決まっている文字を抽出するときは役に立つ

//(正規表現)[今回はあまりよくない]
console.log(src2.match(/[a-z]{4}[0-9]{3}.+/g));
「match」で抽出
「/」と「/g」で囲むと正規表現
アルファベット4文字でその後に数字が3文字あり、その後に「.」がつく文字

 

Arrayオブジェクト

正式なArrayインスタンスの作成方法
※あまり使われない
var array0 = new Array(
  'いちご',
  'みかん',
  'りんご',
);
この書き方が主流(今までに習ったやつ)
var array1 = ['いちご''みかん''りんご'];

 

●正式な書き方が使われない理由

配列の部屋になにもはいっていない「length3」の一つの箱ができる
var test1 = new Array(3);

・Arrayコンストラクタの引数に数値を一つ指定すると指定した分の数値分の部屋を作成するので注意!
・記述量が多いかつ、思った動きではない(上記のような例)ことがあるのであまりつかわない

 

●pushメソッド

var array1 = ['いちご''みかん''りんご'];
console.log(array1.push('メロン'));

・末尾に要素(部屋)を追加
・引数:追加する値(必要があれば複数指定可)
・戻り値:追加後の要素数(部屋数)

 

●popメソッド

console.log(array1.pop());

・末尾に要素(部屋)を削除

・引数:なし
・戻り値:削除後の要素

 

●splice「スプライス」メソッド(pushとpopの上位互換)

 
console.log("3-1:" + array1.splice(11'もも'));
変更位置を指定して入替(置換)する
console.log(array1);
 
console.log("3-2:" + array1.splice(10'びわ'));
変更位置を指定して追加する
console.log(array1);
 
console.log("3-3:" + array1.splice(11));
変更位置を指定して削除する
console.log(array1);

・第1引数:配列の変更位置を指定
・第2引数:変更位置から削除する数
・第3引数以降:変更位置に追加する要素(複数指定)
・戻り値:削除された要素を含む配列

 

●reverseメソッド

console.log(array1.reverse());

・配列の要素を逆順に並び替える

・戻り値:並び替えた配列

 

 ●cncat「コンカット」メソッド

var numList1 = [21032];
console.log(numList1);
console.log("5-1A:  " + numList1.concat(7582));
console.log("5-1B:  " + numList1.concat([3159]));
                       ↑連結配列も可能
console.log(numList1);
 
console.log("5-2:  " + numList1.slice(13));
console.log(numList1);

・メソッドが呼び出したインスタンスが保持する配列の変更はない
・引数で渡された値をもとに新しい配列を作成して戻り値

 

 ●joinメソッド

console.log(numList1.join('/'));

・第1引数:接続文字(省略時は「,」)
・戻り値(文字列型):配列内のすべての値を引数で指定した接続文字でつないだ文字列を返す

 

  ●toStringメソッド(joinだけ覚えたんでもいい)

console.log(numList1.toString());

 ・内部で「joinメソッド」呼び出して実行してる

・引数なしで呼び出す

 

●indexOf、lastIndexOfメソッド

var List = ["あ""い""う""あ"];
 
console.log(List.indexOf("あ")); ←コンソール表示:0
console.log(List.indexOf("あ"1)); ←コンソール表示:3
 
console.log(List.lastIndexOf("あ")); ←コンソール表示:3
console.log(List.lastIndexOf("あ"2)); ←コンソール表示:0

・第1引数:検索対象

・第2引数:検索を始める部屋番号

(省略時はindexOfは最初から、lastIndexOfは最後から検索開始)
・戻り値:部屋番号の番号(合致する要素がない場合は「-1」を返す)

 

●名前似てる二つの違い

●slice:抽出
console.log(salesPart.slice(4, -1));
sliceのマイナス値は後ろからカウント
 
●splice:削除、追加、置き換え
console.log(salesPart.splice(-2, -1"aaa"));
spliceの第1引数のマイナス値はマイナス値は後ろからカウント
spliceの第2引数のマイナス値は0扱い

 

 ●form,onsubmit(HTML)

form:値送信の大枠
onsubmit属性:returnリターン付きのformCheck() ←関数
<form action="" onsubmit="return formCheck();">

 

  ●onkeyup(HTML)

onkeyup属性:キーを押して戻るタイミング
<textarea id="content" name="myContent" onkeyup="countString();">
</textarea>