10
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-06-08

配列に値を追加

末尾に追加(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)

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

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
  • 初めは accumulatorarray の0番目である 1currentValuearray の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 が入る
  • accumulator6currentValue4 を足して出力は 10 となる

Array.prototype.reduce()

10
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?