JavaScriptのArrayオブジェクトに関して(後編)

2021 2/02

2020.12.29 2021.02.02

トモジ

Arrayオブジェクトって何？
詳しく知りたい・・

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、Arrayオブジェクトに関して要点を
わかりやすく説明しております。

記事の内容

1.JavaScriptのArrayオブジェクト

Arrayオブジェクトは、
配列型の値を扱うためのオブジェクトで
要素を[追加]・[削除]・[結合]・[並べ替え]などを
行うための機能が提供されております。

非常にたくさんの機能が提供されておりますので、
今回は後編(みどり枠)を順番に説明します。

2.追加/削除

Arrayオブジェクトの追加/削除は、
以下の4種類のメンバーがありますので
順番に見ていきましょう。

Arrayオブジェクトの追加/削除類の図 — Arrayオブジェクトの追加/削除

pop

popは、配列末尾の要素を取得して削除します。

例

popに関して

var ary = ["総統", "吉田くん", "フィリップ"];

console.log('pop(取得) : ' + ary.pop());
console.log('ary(pop後) : ' + ary);

出力結果

pop(取得) : フィリップ
ary(pop後) : 総統,吉田くん

push

pushは、配列末尾に要素を追加します。

例

pushに関して

var ary = ["総統", "吉田くん"];

console.log('push(追加) : ' + ary.push("フィリップ"));
console.log('ary(push後) : ' + ary);

出力結果

push(追加) : 3
ary(push後) : 総統,吉田くん,フィリップ

shift

shiftは、配列先頭の要素を取得して削除します。

例

shiftに関して

var ary = ["総統", "吉田くん", "フィリップ"];

console.log('shift(先頭削除) : ' + ary.shift());
console.log('ary(shift後) : ' + ary);

出力結果

shift(先頭削除) : 総統
ary(shift後) : 吉田くん,フィリップ

unshift

unshiftは、配列先頭に指定要素を追加します。

例

unshiftに関して

var ary = ["フィリップ"];

console.log('unshift() : ' + ary.unshift("総統", "吉田くん"));
console.log('ary(unshift後) : ' + ary);

出力結果

unshift() : 3
ary(unshift後) : 総統,吉田くん,フィリップ

3.並び替え

Arrayオブジェクトの並び替えは、
以下の2種類のメンバーがありますので
順番に見ていきましょう。

reverse

reverseは、配列の順番を反転します。

例

reverseに関して

var ary = ["総統", "吉田くん", "フィリップ"];

console.log('reverse : ' + ary.reverse());

出力結果

reverse : フィリップ,吉田くん,総統

sort

sortは、要素を昇順に並び替えます。

例

sortに関して

var ary = ["総統", "吉田くん", "フィリップ"];

console.log('sort(昇順) : ' + ary.reverse());

出力結果

sort(昇順) : フィリップ,吉田くん,総統

4.コールバック

Arrayオブジェクトのコールバックは、
以下の9種類のメンバーがありますので
順番に見ていきましょう。

Arrayオブジェクトのコールバック類の図 — Arrayオブジェクトのコールバック

forEach

forEachは、
配列要素のループ処理（繰り返し処理）で使用し、
for文よりも記述が見やすくなります。

例

forEachに関して

var ary = ["総統", "吉田"];

ary.forEach( function( value , index , array ) {
    array[index] = value + 'さん';
});

console.log('forEach(さん付け) : ' + ary);

出力結果

forEach : 総統さん,吉田さん

forEachとforの比較

以下の2つのコードを比較していただきたいのですが、少しfor文の方わかりにくですね。

例

forEachの場合

var ary = ["りんご", "ゴルゴ", "パンツ"];

ary.forEach( function( value ) {
  console.log('forEach : ' + value); 
});

出力結果

forEach : りんご
forEach : ゴルゴ
forEach : パンツ

例

forの場合

var ary = ["りんご", "ゴルゴ", "パンツ"];

for( var i = 0; i < ary.length; i++) {
  console.log('for : ' + ary[i] );
}

出力結果

for : りんご
for : ゴルゴ
for : パンツ

map

mapは、配列要素1つずつに対して処理をして新しい配列を作成します。

例

mapに関して

var ary = ["総統", "吉田"];

var newAry = ary.map(function(value, index) {
    return '[' + index + ']'+value + 'さん';
});

console.log('map : ' + newAry);
console.log('ary : ' + ary);

出力結果

map : [0]総統さん,[1]吉田さん
ary : 総統,吉田

every

everyは、特定の条件を
配列のすべての要素が満足する場合は true、
そうでなければ false を返します。

例

everyに関して

var num = [0, 10, 20, 30, 40];

var result = num.every(function(value, index) {
    console.log('index[' + index + '] : ' + value);
    return (value < 30);
});

console.log('every : ' + result);

出力結果

index[0] : 0
index[1] : 10
index[2] : 20
index[3] : 30
every : false

some

someは、特定の条件を
配列のいずれかの要素が満足する場合は true、
そうでなければ false を返します。

例

someに関して

var num = [0, 10, 20, 30, 40];

var result = num.some(function(value, index) {
    console.log('index[' + index + '] : ' + value);
    return (value > 20);
});

console.log('some : ' + result);

出力結果

index[0] : 0
index[1] : 10
index[2] : 20
index[3] : 30
some : true

filter

filterは、条件に合致した要素を取り出し
新しい配列を作成します。

例

filterに関して

var num = [0, 5, 10, 15, 20];

var result = num.filter(function(value) {
    return value % 2 === 1;
});

console.log('filter(奇数) : ' + result);

出力結果

filter(奇数) : 5,15

find

findは、
初めて条件に合致した要素を取り出します。

例

findに関して

var num = [0, 5, 10, 15, 20];

var result = num.find(function(value) {
    return value % 2 === 1;
});

console.log('find : ' + result);

出力結果

find : 5

findIndex

findIndexは、初めて条件に合致した要素の
インデックス番号を取得します。

例

findIndexに関して

var num = [0, 5, 10, 15, 20];

var result = num.findIndex(function(value) {
    return value % 2 === 1;
});

console.log('findIndex : ' + result);

出力結果

findIndex : 1

reduce

reduceは、配列データの各要素を累積して
1つの値にする用途に最適なメソッドになります。

例

reduceに関して

var numbers = [5,9,6,3];

var result = numbers.reduce(function(accumulator, currentValue, index, array) {
  console.log('accumulator(累積値) : ' + accumulator);
  console.log('currentValue(要素) : ' + currentValue);
  console.log('index(配列番号) : ' + index);
  console.log('array(配列) : ' + array);
  console.log('===================');

  return accumulator + currentValue;
 
},10);
 
console.log('配列合計値 : ' + result);

出力結果

accumulator(累積値) : 10
currentValue(要素) : 5
index(配列番号) : 0
array(配列) : 5,9,6,3
===================
accumulator(累積値) : 15
currentValue(要素) : 9
index(配列番号) : 1
array(配列) : 5,9,6,3
===================
accumulator(累積値) : 24
currentValue(要素) : 6
index(配列番号) : 2
array(配列) : 5,9,6,3
===================
accumulator(累積値) : 30
currentValue(要素) : 3
index(配列番号) : 3
array(配列) : 5,9,6,3
===================
配列合計値 : 33

reduceRight

reduceRightは、隣り合う 2 つの配列要素に対して
(右から左へ) 関数を適用して、単一の値にします。

例

reduceRightに関して

var numbers = [5,9,6,3];

var result = numbers.reduceRight(function(accumulator, currentValue, index, array) {
  console.log('accumulator(累積値) : ' + accumulator);
  console.log('currentValue(要素) : ' + currentValue);
  console.log('index(配列番号) : ' + index);
  console.log('array(配列) : ' + array);
  console.log('===================');

  return accumulator + currentValue;
 
},10);
 
console.log('配列合計値 : ' + result);

出力結果

accumulator(累積値) : 10
currentValue(要素) : 3
index(配列番号) : 3
array(配列) : 5,9,6,3
===================
accumulator(累積値) : 13
currentValue(要素) : 6
index(配列番号) : 2
array(配列) : 5,9,6,3
===================
accumulator(累積値) : 19
currentValue(要素) : 9
index(配列番号) : 1
array(配列) : 5,9,6,3
===================
accumulator(累積値) : 28
currentValue(要素) : 5
index(配列番号) : 0
array(配列) : 5,9,6,3
===================
配列合計値 : 33