JavaScriptのArray(配列)について


ここではJavaScriptの配列(Array)の基本的なメソッドを紹介します。

🏀 要素数分ループ:forEach

forEach()は配列の要素を順番に処理していきます。

var result = [];
var array = ['a', 'b', 'c', 'd'];
array.forEach(function(val, index){
if(val === 'c') { result.push(index); }
});
console.log(result); //=> [2]

🍄 要素数分ループ:map

map()を使うと各要素に対して、特定の処理を実施できます。返り値は処理を実行した結果の配列です。

var array = ['a', 'b', 'c', 'd'];
var result = array.map(function(val, index){
if (val === 'c') {
return index;
} else {
return -1;
}
});
console.log(result); //=> [-1, -1, 2, -1]

配列の中の特定の要素だけ、別の要素に置き換えるのは次のように記述します。

const arr = [1, 2, 3]
arr = arr.map(function (element, index, array) {
return element === 2 ? 'hoge' : element;
});
console.log(arr) //=> [1, hoge, 3]

🏈 フィルタリング:filter

filterは配列で特定の条件を満たす要素を選別する(フィルタリング)を行うメソッドです。

var array = [0, 1, 2, 3];
var result = array.filter(function(element){
if (element >= 2) { return element; }
});
console.log(result); //=> [2, 3]

🐯 条件を満たす要素を検索:find

findは配列内の要素から条件を満たす最初の要素を取り出すメソッドです。

[12, 5, 8, 130, 44].find(el => el >= 15); //=> 130

🗻 隣り合う要素に対する処理:reduce

reduceは配列の隣り合う要素に対して(左から右へ)同時に関数を適用して単一の値を返すメソッドです。

var array = [1, 2, 3, 4];
var result = array.reduce(function(previousVal, currentVal){
return previousVal + currentVal;
});
console.log(result); //=> 10

🎳 配列の最初に要素を追加:unshift

unshift()メソッドは、配所の最初に要素を追加するメソッドです。
返り値は、新しい配列の長さです。

var arr = [1, 2];
arr.unshift(0); // = 3
// arr is [0, 1, 2]
arr.unshift(-2, -1); // = 5
//arr is [-2, -1, 0, 1, 2]

😎 配列を結合して文字列にする:join

join()メソッドは配列の要素を結合して文字列を返すメソッドです。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(", "); //=> Banana, Orange, Apple, Mango

🍣 配列のどれかが条件を満たすか:some

some()メソッドは配列のどれかが条件を満たせばtrueを返すメソッドです。

function isBiggerThan10(element, index, array) {
return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

🚕 配列の結合:concat

concat()メソッドは2つ以上の配列を結合させて新しい配列を生成します。

var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
var arr3 = arr1.concat(arr2); //=> [ "a", "b", "c", "d", "e", "f" ]

🐠 配列の要素をユニークにする

配列の要素の重複を排除してユニークにするには次のように記述します。

array = [1, 2, 3, 1]
Array.from(new Set(array)); //=> 1, 2, 3

🐰 配列から特定の要素を除去する

Arrayの要素の中で特定の要素を除去(削除)するには次のように記述します。

var inArray = ['one', 'two', 'three'];
// 配列から two を取り除く
inArray.filter(function(e) { return e !== 'two' }); //=> ["one", "three"]
// ECMA6形式でアロー関数を使う場合
inArray.filter(e => e !== 'two'); //=> ["one", "three"]

🤔 配列が空かどうかの判定

配列からかどうかを判定するのは次のコードです。

var array = [];
console.log(array.length === 0); //=> true

🐮 配列をフラットにする

Arrayのメソッドではないですが、2次元配列 => 1次元配列のように配列をフラットにするコードです。

var array = [
[0, 1],
[2, 3],
[4, 5]
];
Array.prototype.concat.apply([], array);
// => [0, 1, 2, 3, 4, 5]

🐡 参考リンク

📚 おすすめの書籍