【JavaScript】配列系メソッドあれこれ

配列に値を追加

末尾に追加（push）

const array = [1, 2, 3, 4, 5, 6];
array.push('追加した要素');
console.log(array);

//【出力】
//[1, 2, 3, 4, 5, 6, '追加した要素']

先頭に追加（unshift）

const array = [1, 2, 3, 4, 5, 6];
array.unshift("追加した要素");
console.log(array);

//【出力】
//['追加した要素', 1, 2, 3, 4, 5, 6]

配列の値を削除

末尾を削除（pop）

const array = [1, 2, 3, 4, 5, 6];
array.pop();
console.log(array);

//【出力】
//[1, 2, 3, 4, 5]

先頭を削除（shift）

const array = [1, 2, 3, 4, 5, 6];
array.shift();
console.log(array);

//【出力】
//[2, 3, 4, 5, 6]

配列内部を検索

検索して最初にマッチしたデータを取り出す（find）

const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.find(v => {
	return v % 2 === 0;
});

//【出力】
//2

findメソッドは trueを返すと検索が止まり、要素が見つからなければ undefinedを返す。

Array.prototype.find()

検索してマッチしたデータで配列を作成（filter）

下記コードは array のインデックスが 2 より大きいものを抽出し、新たな配列を作成する。

const array = ["大阪", "兵庫", "京都", "奈良", "和歌山"];
const new_array = array.filter(function (value, index, list) {
	return index > 2;
});
console.log(new_array);

//【出力】
//['奈良', '和歌山']

filter メソッドの各引数には

• 第一引数： value は配列の値
• 第二引数： indexは配列のインデックス番号
• 第三引数： listは現在処理している配列

が渡ってくる。

const array = ["大阪", "兵庫", "京都", "奈良", "和歌山"];
const new_array = array.filter(function (value, index, list) {
	console.log(value, index, list);
});

//【出力】
//大阪 0 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//兵庫 1 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//京都 2 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//奈良 3 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//和歌山 4 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']

Array.prototype.filter()

ある条件の要素が存在するかどうか判定（some）

指定された条件に、配列内の要素が １つでも当てはまるかどうかを判定。

const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.some(function(item){
	return item === 2;
});
console.log(reslut);

//【出力】
//true

• 配列の要素が1つでも条件を満たしていればtrueを返し、そうでなければfalseを返す
• 引数itemには配列の値が渡ってくる

Array.prototype.some()

ある条件の要素が存在するかどうか判定（every）

指定された条件に、配列内の要素が 全ての要素が当てはまるかどうかを判定。

const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.every(function(item){
	return item >= 2;
});
console.log(reslut);

//【出力】
//false

const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.every(function(item){
	return item >= 1;
});
console.log(reslut);

//【出力】
//true

• 配列要素の全てが条件を満たしていればtrueを返し、そうでなければfalseを返す

Array.prototype.every()

ある条件の要素が含まれているかどうか判定（includes）

特定の要素が配列に含まれているかどうかを判定。

const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.includes(5);
console.log(reslut);

//【出力】
//true

• 1つでも要素が含まれていればtrueを返し、そうでなければfalseを返す

Array.prototype.includes()

配列を順番に処理

配列を順番に処理（forEach）

const array = [1, 2, 3, 4, 5, 6, 7, 8];
let sum = 0;
array.forEach(function (v) {
	sum += v;
	console.log(sum);
});

//【出力】
//1
//3
//6
//10
//15
//21
//28
//36

forEach メソッドの各引数には

• 第一引数： value は配列の値
• 第二引数： indexは配列のインデックス番号
• 第三引数： listは現在処理している配列

が渡ってくる。

const array = ["大阪", "兵庫", "京都", "奈良", "和歌山"];
array.forEach(function (value, index, list) {
	console.log(value, index, list);
});

//【出力】
//大阪 0 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//兵庫 1 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//京都 2 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//奈良 3 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//和歌山 4 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']

Array.prototype.forEach()

配列を作成

処理行った要素で新しい配列を作成（map）

mapメソッドは、forEachメソッドに似ているが、それぞれの要素になにかしらの処理をした値で再度、新しい配列を得ることができる。

const array = [1, 2, 3, 4, 5, 6, 7, 8];
let new_array = array.map(function(v){
	return v * 2;
});
console.log(new_array);

//【出力】
//[2, 4, 6, 8, 10, 12, 14, 16]

map メソッドの各引数には

• 第一引数： value は配列の値
• 第二引数： indexは配列のインデックス番号
• 第三引数： listは現在処理している配列

が渡ってくる。

const array = [1, 2, 3, 4, 5, 6, 7, 8];
array.map(function(value, index, list){
	console.log(value, index, list);
});

//【出力】
//0 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//1 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//2 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//3 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//4 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//5 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//6 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//7 (8) [1, 2, 3, 4, 5, 6, 7, 8]

reduce()

const array = [1, 2, 3, 4];
const result = array.reduce(function (accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
});

//【出力】
//10

• 第三引数currentIndexと第四引数、arrayは省略可能

処理の流れ

関数実行回数	accumulator	currentValue	currentIndex
1回目	1	2	1
2回目	3	3	2
3回目	6	4	3

• 初めは accumulator に array の0番目である 1 、currentValue にarray の1番目である 2 が入る
• 1 + 2 の結果である 3 が2回目の第一引数 accumulator に渡る
• 2回目は第一引数accumulator に 1回目の 1 + 2 の計算結果である 3 が入り、第二引数currentValueには array の2番目である 3 が入る
• 3 + 3 の結果である 6が3回目の第一引数 accumulator に渡る
• 3回目は第一引数accumulator に 2回目の 3 + 3 の計算結果である 6 が入り、第二引数currentValueには array の3番目である 4 が入る
• accumulator の 6 とcurrentValueの 4 を足して出力は 10 となる

Array.prototype.reduce()