PlusOne Blog

2021年8月に投稿した記事

【JavaScript】配列操作③ ~foreach~

JavaScriptにおける配列の操作(foreach|ループ処理)について紹介します。
 
 

foreach|ループ処理

 

   arr.forEach(callback(currentValue[, index[, array]]) {
     // execute something
   }[, thisArg]);

   callback:各要素に対して実行するコールバック関数で、
   1 つから 3 つの引数を受け付けます。
     currentValue:現在処理されている配列の要素です。
     index(省略可):配列内の currentValue の添字です。
     array(省略可):forEach() が呼び出されている配列です。
   thisArg(省略可)※:callback 内で this として使用する値です。
   ※callback がアロー関数の場合は利用できません。

 

 
要素にオブジェクトを持つ配列の場合、次のように要素内のオブジェクトの値を抽出できます。

 
コールバック関数の第3引数は、forEach() が呼び出されている配列になります。
次の例は、各要素を2倍にしています。

 
thisArg(省略可):callback 内で this として使用する値です。
※callback がアロー関数の場合は利用できません。

 

 

この記事を読む

【JavaScript】配列操作②

JavaScriptにおける配列の操作(「要素の追加」「要素の削除」など)のうち、要素変更に係る操作について紹介します。
 
目次
unshift|先頭に追加
push|末尾に追加
shift|先頭を削除
pop|末尾を削除
splice|位置指定して削除 and 追加
concat|他の配列と結合
slice|一部を抜粋して、配列生成
fill|固定値で埋める

 

unshift|先頭に追加

 

   arr.unshift(element1[, ...[, elementN]])

   elementN:arr の先頭に追加する要素。

 

push|末尾に追加

 

   arr.push([element1[, ...[, elementN]]])

   elementN:配列の末尾に追加する要素。

 

shift|先頭を削除

 

   arr.shift()

 

pop|末尾を削除

 

   arrName.pop()

 

splice|位置指定して削除 and 追加

 

   array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

   start:配列を変更する開始位置を表すインデックスです。
   deleteCount(省略可):配列の start から取り除く古い要素の数を示す整数です。
   item1, item2, ...(省略可):配列に追加する要素で、start から始まります。

 

concat|他の配列と結合

 

   const new_array = old_array.concat([value1[, value2[, ...[, valueN]]]])

   valueN(省略可):新しい配列に連結する配列や値です。
   すべての valueN 引数が省略された場合、 concat は呼び
   出された既存の配列のシャローコピーを返します。

 

slice|一部を抜粋して、配列生成

 

   const new_array = arr.slice([start[, end]])

   start(省略可):取り出しの開始位置を示す 0 から始まるインデックスです。
   end(省略可):取り出しを終える直前の位置を示す 0 から始まるインデックスです。
   slice は end 自体は含めず、その直前まで取り出します。

 

fill|固定値で埋める

 

   arr.fill(value[, start[, end]])

   value:配列に設定する値です。
   start(省略可):開始する位置です。既定値は 0 です。
   end(省略可):終了する位置です。既定値は this.length です。

 

 

この記事を読む

【JavaScript】配列操作①

JavaScriptにおける配列の操作(「要素数取得」「配列のコピー生成」「並び替え」など)について紹介します。
 
目次
length|要素数取得
includes|存在確認
indexOf|位置確認 & 存在確認
join|結合
slice|配列のコピー生成
reverse|逆順
sort|並び替え

 

length|要素数取得

 

   Array.length

 

includes|存在確認

 

   arr.includes(valueToFind[, fromIndex])

   valueToFind:検索する値です。
   fromIndex(省略可):この配列内で valueToFind を探し始める位置です。

 

indexOf|位置確認 & 存在確認

 

   arr.indexOf(searchElement[, fromIndex])

   searchElement:検索する配列要素です。
   fromIndex(省略可):この配列内で searchElement を探し始める位置です。

 

join|結合

 

   arr.join([separator])

   separator(省略可):配列の各要素を区切る文字列を指定します。
   省略した場合、配列の要素はカンマ (",") で区切られます。

 

slice|配列のコピー生成

 

   arr.slice([start[, end]])

   start(省略可):取り出しの開始位置を示す 0 から始まるインデックスです。
   end(省略可):取り出しを終える直前の位置を示す 0 から始まるインデックスです。

 

reverse|逆順

 

   a.reverse()

 

sort|並び替え

 

   arr.sort([compareFunction])

   compareFunction(省略可):ソート順を定義する関数を指定します。
   省略された場合、配列の各要素は文字列に変換され、
   各文字の Unicode のコードポイント順に従ってソートされます。

 
compareFunction では、2つの要素の値を引数に取ります。
そして、次のルールに従って並び替えをおこないます。
==========================
・コールバック関数が 0 未満の値(例えば -1 )を返した場合、一つ目の要素を二つ目の要素より小さいインデックスにする
・コールバック関数が 0 を返した場合はそのまま
・コールバック関数が 0 より大きい値(例えば 1 )を返した場合、二つ目の要素を一つ目の要素より小さいインデックスにする
==========================

 

 

この記事を読む

【JavaScript】form の input の入力値をJSで取得するにはどうしたらよいか?

form の input の入力値を取得するには、input への入力のイベント「input イベント」または「change イベント」を利用します。 
 
「input イベント」⇒input エリアに文字を入力するたびに発火します。
「change イベント」⇒input エリアに文字を入力して Enterキーを押すと発火します。
 
●要素の属性値にイベントハンドラを登録する場合は 「oninput 属性」または「onchange 属性」を使用します。

   <input type="text" name="test1" oninput="inputChange01()">

   <input type="text" name="test3"  onchange="inputChange02()">

 
●addEventListener を使用して、イベントハンドラを登録する場合

   input.addEventListener('input', inputChange);

   input.addEventListener('change', inputChange2);

 
●引数 event で、入力された値を取得することができます。
・「oninput 属性/イベント」

  et inputChange = (e) => {
     text_val.textContent = e.currentTarget.value;  //テキストエリアに入力されたテキスト
     input_val.textContent = e.data;  //今、入力されたテキスト
  }

・「change 属性/イベント」

  et inputChange = (e) => {
     text_val.textContent = e.currentTarget.value;  //テキストエリアに入力されたテキスト
  }

 
 

 

この記事を読む

【JavaScript】アロー関数(Arrow function)とは?

アロー関数(Arrow function)を利用すると、関数リテラル(無名関数 匿名関数)をシンプルに記述することができるようになります。
コードも可読性を上げて、メンテナンスを容易にするためにも、ぜひ覚えて使えるようになりましょう。
 
■基本的なアロー関数の記述方法

   (引数) => {関数の本体}

 

 
■アロー関数は条件によってさらに簡素化できます。
①関数の本体が一文である場合は、{…}の「{」と「}」を省略することができます。

②引数がひとつの場合、引数のカッコも省略できます。

③引数がない場合、「()」と記述します。

 
 
■アロー関数での、this の取り扱いについて
・通常の無名関数で this を使用すると、その呼び出し元のオブジェクトになります。

・一方、アロー関数式で宣言された関数は、宣言された時点で、thisを確定(=束縛)させてしまいます。

 

 

この記事を読む
記事一覧に戻る