JavaScriptのArray(配列)について

JavaScriptの配列(Array)の基本的なメソッドを知らずに詰まることがあったので、よく使うものを整理してみました！

😼 要素の追加：push

push()で配列に要素を追加できます。

var sports = ['soccer', 'baseball'];
var totalCount = sports.push('football', 'swimming');

console.log(sports); // => ['soccer', 'baseball', 'football', 'swimming']
console.log(totalCount); // => 4

🚌 要素数分ループ：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]

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

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

🐯 フィルタリング：filter

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

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

🏀 条件を満たす要素を検索：find

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

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

🍮 条件を満たすインデックスを検索：findIndex

findIndexは配列から条件を満たす要素のインデックスを取得するメソッドです。対象の要素がみつからない場合は-1を返します。

[4, 6, 8, 12].findIndex(e => e === 1); //=> -1
[4, 6, 7, 12].findIndex(e => e === 7); //=> 2

😀 隣り合う要素に対する処理：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" ]

🐡 配列の一部切り出し：slice

slice()メソッドは配列から一部を切り出すことができます。

var a = ['zero', 'one', 'two', 'three'];
var sliced = a.slice(1, 3);

console.log(sliced); //=> ['one', 'two']

1つ目の引数がスタート位置で、2つ目の引数が終了位置です。終了位置の要素は含まないのを注意してください。

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

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

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]

🎉 nullやundefinedを削除する

配列からnullやundefinedをfilterメソッドを使って削除する手順です。

var arr = [1,2,,3,,3,null,,0,,undefined,4,,4,,5,,6,'',false,,];

arr = arr.filter(Boolean); //=> [1, 2, 3, 3, 4, 4, 5, 6]

🍣 1からNまでの配列を生成

1からNまでの配列を生成するのは次の方法です。

Array.from({length: 5}, (v, k) => k+1); //=> [1,2,3,4,5]

🚕 最後の要素の取得

配列の最後の要素を取得する方法です。1つ目はシンプルなgetterメソッドを作る方法です。

if (!Array.prototype.last){
    Array.prototype.last = function(){
        return this[this.length - 1];
    };
};

[1, 2, 3].last() //=> 3

Getterメソッドなどを作らずにslice()メソッドで対応する場合はこちら。

[1, 2, 3].slice(-1)[0] //=> 3

🍄 配列を途中で抜ける：break

var arr = [1, 2, 3, 4, 5];

for (var i = 0; i < arr.length; i++) {
    var value = arr[i];
    if (value > 5) { break; }
    console.log(value);
}

😸 配列に要素が含まれているかを判定

Array内に特定の要素が含まれているかどうかを判定するにはinclude()メソッドを使います。

var a = [1, 2, 3];
a.includes(2); // true
a.includes(4); // false

🐠 参考リンク

• これだけ覚えるべきJSの基礎
• JavaScriptでflatten
• How to get an array of unique values from an array containing duplicates in JavaScript?
• Remove item from array by value
• Array.prototype.find() - JavaScript
• Selecting last element in JavaScript array
• Remove empty elements from an array in Javascript
• Array.prototype.findIndex() - JavaScript
• javascript - How to filter() out NaN, null, 0, false in an array (JS)
• Create a JavaScript array containing 1…N
• Array.prototype.push() - JavaScript
• ループ途中で抜ける処理は for(in break) ではなく some を使おう♪
• Array.prototype.slice() - JavaScript
• Array.prototype.includes()
• https://qiita.com/kazu56/items/557740f398e82fc881df

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

📚 おすすめの書籍