PlusOne Blog

「JavaScript」に関する記事

【JavaScript】オブジェクト操作

今まで配列操作を紹介してきましたが、これをオブジェクトを操作しようとしてもできません。
同様にオブジェクトを操作するためには、「Object.keys(obj)」で key の配列にして操作するようになります。
 

foreach

 

 
 

map

 

 

 

この記事を読む

【JavaScript】配列操作⑦

JavaScriptにおける配列の操作(「絞り込み(1要素)」「指定の要素が1つでもあるかないか」「指定の要素がすべてあるかないか」)について紹介します。
 
目次
find|絞り込み(1要素)
some|指定の要素が1つでもあるかないか
every|指定の要素がすべてあるかないか

 

find|絞り込み(1要素)

 

   arr.find(callback(element[, index[, array]])[, thisArg])

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

返り値は、配列ではなく数字orテキストになります。

 

some|指定の要素が1つでもあるかないか

 

   arr.some(callback(element[, index[, array]])[, thisArg])

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

 

every|指定の要素がすべてあるかないか

 

   arr.every(callback(element[, index[, array]])[, thisArg])

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

 

 

この記事を読む

【JavaScript】配列操作⑥ ~filter~

JavaScriptにおける配列の操作(filter|絞り込み(複数要素))について紹介します。
 
 

filter|絞り込み(複数要素)

 

   let newArray = arr.filter(callback(element[, index, [array]])[, thisArg])

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

 

 
重複した値の要素を削除する
コールバック関数の引数「array」「value」と「indexOf」で取得したインデックス番号と「indexOf」で取得したインデクス番号を見てみると、重複したデータだけがインデックス番号と同じではないです。
したがって、インデックス番号が同じ要素だけを取り出せばよいことになります。

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

 

 

この記事を読む

【JavaScript】配列操作⑤ ~reduce~

JavaScriptにおける配列の操作(reduce|1つの値を取得)について紹介します。
 
 

reduce|1つの値を取得

 

   arr.reduce(callback( accumulator, currentValue[, index[, array]] ) {
     // return result from executing something for accumulator or currentValue
   }[, initialValue]);

   callback:各要素に対して実行するコールバック関数で、
   1 つから 4 つの引数を受け付けます。
     accumulator:「累積値」、配列要素を順番に処理していった値が格納されます。
     currentValue:現在処理されている配列要素です。
     index(省略可):現在処理されている配列のインデックス番号です。
     array(省略可):reduce() が呼び出されている配列です。
   initialValue(省略可)※:callback の最初の呼び出しの最初の引数として使用する値です。
                initialValue が与えられなかった場合、配列の最初の要素がアキュムレーターの初期値として使用されます。

 

 
reduce()の関数内では「break」は使えません。その代わりに、配列のインデックス番号を利用した中断方法
配列の3番目のインデックス番号になった時点で「arr.splice(0)」を処理して、arrを空配列にして、処理の実行を止めます。

 

合計、平均値、最大値、最小値を取得

 

 

 

この記事を読む

【JavaScript】配列操作④ ~map~

JavaScriptにおける配列の操作(map|新しい配列を生成)について紹介します。
 
 

map|新しい配列を生成

 

   new_array = arr.mach(callback(currentValue[, index[, array]]) {
     // execute something
    //return ****
   }[, thisArg]);

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

 

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

 
コールバック関数の第3引数は、forEach() が呼び出されている配列になります。
第3引数を利用すれば、元の配列を変更することもできます。

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

 

 

この記事を読む

【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を確定(=束縛)させてしまいます。

 

 

この記事を読む

【JavaScript】分割代入(Destructuring assignment)とは?

分割代入(Destructuring assignment)とは、配列やオブジェクトの要素を取り出して個別の変数に代入するのを簡単に行えることをいいます。
 

 
取り出したプロパティ値を、名前の異なる変数に割り当てることもできます。

 
対応するプロパティがない変数には、undefinedが入ります。

 
■この構文とスプレッドの組み合わせで、要素を取り出しつつ残りを変数に代入することが可能です。

ネストしたオブジェクトの場合

 

 

この記事を読む

【JavaScript】スプレッド構文(Spread Syntax)とは?

スプレッド構文(Spread Syntax)とは、「…foo」の形で記述され、配列やオブジェクトの要素を文字通り展開する構文のことをいいます。
 
例:配列の場合

 
例:オブジェクトの場合

 
■ネストしている場合
配列・オブジェクトの両方において、ネストしている場合gは注意が必要です。
下記のとおり、クローンした子要素は元の配列・オブジェクトを参照しています。

これを解決するには、ネストしている配列・オブジェクトも分割してスプレットする必要があります。

 

 

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