Array 配列

JavaScriptでの配列の使用方法について解説します。

基本的な使い方

配列の宣言

let animals = ['dog', 'cat', 'turtle', 'hamster'];
//let animals = new Array('dog', 'cat', 'turtle', 'hamster');
/*
let animals = new Array();
animals.push('dog');
animals.push('cat');
animals.push('turtle');
animals.push('hamster');
*/

配列の長さ・サイズの取得

let size = animals.length; // 4

配列の繰り返し処理・ループ

以下はforの構文を使用した繰り返し処理の記述方法です。メソッドを利用したループ処理はメソッドを使った繰り返し処理を参照してください。

for (let i = 0; i < animals.length; i++) {
   console.log(animals[i]);
}

for (const animal of animals){
   console.log(animal);
}

配列の要素へのアクセス

console.log(animals[0]); // 'dog' 先頭の要素へのアクセス

animals[1] = 'gecko'; // 'cat' -> 'gecko' 2番目要素の値を設定
console.log(animals[1]); // 'gecko' 2番目要素へのアクセス

console.log(animals[animals.length -1]); // 'hamster' 末尾の要素へのアクセス

console.log(animals[animals.length]); // undefined 存在しないインデックスでのアクセス

配列の並び替え・ソート

let animals = ['dog', 'cat', 'turtle', 'hamster'];

console.log(animals.sort()); // 文字列で辞書的に並び替え 'cat', 'dog', 'hamster', 'turtle'
console.log(animals); // 配列自身の順序も変更される 'cat', 'dog', 'hamster', 'turtle'

console.log(animals.reverse()); // 逆順に並び替え 'hamster', 'turtle', 'cat', 'dog'
console.log(animals); // 配列自身の順序も変更される 'hamster', 'turtle', 'cat', 'dog'

カスタムでソートの方法を指定する場合、2つの引数を受け取る関数を使用する。

let array = [
  { name: 'taro', age: 120, } ,
  { name: 'jiro', age: 75, } ,
  { name: 'saburou', age: 50, } ,
  { name: 'hanako', age: 80, } ,
  { name: 'hachi', age: 18, } ,
];

let compareAge = function(a, b){
  // 0未満の場合aをbより前に、
  // 0より大きい場合aをbより後にソートする  
  return a.age - b.age;
};

console.log(array.sort(compareAge)); // ageの昇順で並び替え
console.log(array); // 元の配列が変更される

Arrayのメソッド

Array.isArray 配列の判定

console.log(Array.isArray([])); // true
console.log(Array.isArray([1, 2, 3])); //  true
console.log(Array.isArray(1)); // false
console.log(Array.isArray(null)); // false

Array.from 配列の生成

console.log(Array.from('abc')); // ["a", "b", "c"]
console.log(Array.from(new Set(['a', 'b', 'c']))); // ["a", "b", "c"]

const map = new Map([['a', 'x'], ['b', 'y'], ['c', 'z']]);
console.log(Array.from(map.values())); // ["x", "y", "z"]
console.log(Array.from(map.keys())); // ["a", "b", "c"]
console.log(Array.from(map)); // [["a", "x"], ["b", "y"], ["c", "z"] ]

console.log(Array.from([1, 2, 3, 4 , 5], x => x * x)); // [1, 4, 9, 16, 25]

第1引数には、lengthのプロパティを持ち、インデックスでのアクセス可能なインスタンスも指定することができる。

console.log(Array.from({length: 3 , 0: 'a', 1:'b', 2 : 'c' })); // ["a", "b", "c"]
console.log(Array.from({length: 3}, (_, index) => index)); // ["a", "b", "c"]

Array.of 引数からの配列の作成

console.log(Array.of(1)); // [1]
console.log(Array.of(1, 2, 3)); // [1, 2, 3]

メソッドを使った繰り返し処理

配列要素が条件を満たすか

every(callback)で配列要素のすべてが指定したcallback関数についてtrueを返却するかを判定できます。

const isPositiveNumber = (v) => 0 < v;

console.log([1, 5, 3, 2].every(isPositiveNumber)); // true
console.log([3, -1, 4, 6].every(isPositiveNumber)); //false

some(callback)は、配列要素の少なくとも1つ以上についてtrueを返却するかを判定します。

const isPositiveNumber = (v) => 0 < v;

console.log([-1, 0, 1, -5].some(isPositiveNumber)); // true
console.log([-1, 0, -2, -3].some(isPositiveNumber)); //false

callback関数の引数は以下の通りです。(以降も特に記載がなければ「メソッドを使った繰り返し処理」のcallback関数は同様の引数を取ります)

/**
 * コールバック関数
 *
 * @param {object} element 配列の要素
 * @param {number} index 要素のインデックス
 * @param {array} array 配列全体
 */
callback(element,index,array){}

配列を指定した条件で抽出する (Filter)

const isPositiveNumber = (v) => 0 < v;
console.log([1, -3, 0, 5].filter(isPositiveNumber)); // [1, 5]

配列から指定した条件を満たす最初の要素・インデックスを取得する

const array = [
  { name:'tanaka', age:17},
  { name:'suzuki', age:25},
  { name:'yamada', age:20},
];

const isAdult = (element) => 20 <= element.age ;
console.log(array.find(isAdult)); // {name: "suzuki", age: 25}
console.log(array.findIndex(isAdult)); // 1

配列の繰り返し処理・ループ

let array = ['a', 'b', 'c'];
for (let [index , value] of array.entries()) {
  // "array[0] = a", "array[1] = b", "array[2] = c"
  console.log(`array[${index}] = ${value}`);
}

entries()はイテレータを返却するので以下のように繰り返し処理を行う事もできます。

let array = ['a', 'b', 'c'];

const iterator = array.entries();
let result = iterator.next();
while (!result.done) {
 console.log(result.value);
 result = iterator.next(); // [0, "a"],  [1, "b"],  [2, "c"]
}

配列要素全てに処理を行いその結果を配列として取得(Map)

console.log(['a', 'b', 'c'].map(s => s + s)); //["aa", "bb", "cc"]

配列から1つの値を取得する(Reduce)

reduce(callback, initialValue])の形のメソッドです。数値の配列から最大値や合計値を取得するなど、配列から1つの値を取得する操作を行えます。

callback関数の引数は以下の通りとなります。

/**
 * コールバック関数
 *
 * @param {object} accumulator 処理全体で格納している値
 * @param {number} currentValue 現在の配列要素
 * @param {array} index 配列要素のインデックス
 * @param {array} array 配列全体
 */
callback(accumulator, currentValue, index, array){}

initialValueはaccumulatorの初期値となりますが、省略した場合配列の最初の要素となります。


console.log([1, 3, 5, 7, 9].reduce((a, cv) => a + cv, 0)); // 25 合計
console.log([1, 3, 5, 7, 9].reduce((a, cv) => a + 1, 0)); // 5 件数カウント

reduceは配列の先頭の要素から順に実行しますが、reduceRightは配列の末尾から順に実行を行います。

let array = Array.from('abcde');
console.log(array); // ["a", "b", "c", "d", "e"]
console.log(array.reduceRight((a, cv) => a + cv, '')); // "edcba"

配列のインデックスと値のペアを取得

['a', 'b', 'c'].forEach(function(element, index, array) {
  console.log(element, index, array);  
});

配列の要素を取得

for (let v of ['a', 'b', 'c'].values()){
  console.log(v); // "a", "b", "c"
}

配列のインデックスを取得

for (let i of ['a', 'b', 'c'].keys()){
  console.log(i); // 0, 1, 2
}

配列、または、配列の情報の取得 (呼び出し元の配列自体を変更しないメソッド)

インデックス位置の検索

let array =　['dog', 'cat', 'turtle', 'dog', 'hamster', 'dog', 'hamster'];

console.log(array.indexOf('dog')); // 0 指定した値の要素が複数ある場合、先頭の要素のインデックス
console.log(array.lastIndexOf('dog')); // 5 指定した値の要素が複数ある場合、末尾の要素のインデックス

console.log(array.indexOf('dog',4)); // 5 2つ目の引数で指定したインデックス以降を検索する
console.log(array.lastIndexOf('dog',-3)); // 3 2つ目の引数で指定したインデックス以前を検索する。マイナスは末尾からのカウント。

配列内の要素存在チェック

let array = [1,3,5,2,7,3,4];
console.log(array.includes(2)); // true
console.log(array.includes(2,3)); // true 2つ目の引数で指定したインデックス以降を検索する
console.log(array.includes(2,4)); // false 2つ目の引数で指定したインデックス以降を検索する
console.log(array.includes('2')); // false 比較は型を含めて厳密に行う

配列を結合(Join)した文字列の取得

let animals = ['dog', 'cat', 'turtle', 'hamster'];
console.log(animals.join()); // 'dog,cat,turtle,hamster'
console.log(animals.join(':')); // 'dog:cat:turtle:hamster' 引数で連結する文字を指定

配列の連結・結合

let array1 = [1,3,5];
let array2 = [2,4,6];
let array3 = array1.concat(array2);
console.log(array3); // [1, 3, 5, 2, 4, 6]

配列の一部を取り出した配列の取得

let array =　['dog', 'cat', 'turtle', 'dog', 'hamster', 'dog', 'hamster'];

console.log(array.slice(2));// ["turtle", "dog", "hamster", "dog", "hamster"] 指定インデックス以降を取得
console.log(array.slice(2, 4)); // ["turtle", "dog"] 指定したインデックスの範囲を取得
console.log(array);// ["dog", "cat", "turtle", "dog", "hamster", "dog", "hamster"]　元の配列はそのまま

配列を示す文字列の取得

const array = [12345.67, 'a', null, undefined,true,new Date(2020,0,31)];
console.log(array.toString()); // "12345.67,a,,,true,Fri Jan 31 2020 00:00:00 GMT+0900 (日本標準時)"

ロケールで言語・国を指定できる。

const array = [12345.67, 'a', null, undefined,true,new Date(2020,0,31)];
//"￥12,346,a,,,true,2020/1/31 0:00:00"
console.log(array.toLocaleString('ja', { style: 'currency', currency: 'JPY' , timeZone: 'Asia/Tokyo' }));

配列を変更する操作 (呼び出し元の配列自体を変更するメソッド)

配列への要素追加と取り出し

let animals = ['dog', 'cat', 'turtle', 'hamster'];

//末尾への要素追加
let newLastInsect = animals.push('tarantula'); // note. 複数引数を指定し複数要素の追加が可能
console.log(newLastInsect); // 5 (追加後の要素数)
console.log(animals); // ['dog', 'cat', 'turtle', 'hamster', 'tarantula']

//末尾要素の取り出し・削除
let lastOne = animals.pop(); // note. 空の配列をpop()するとundefined
console.log(lastOne); // 'tarantula'
console.log(animals); // ['dog', 'cat', 'turtle', 'hamster']

//先頭への要素追加
let newFirstOne = animals.unshift('newt'); // note. 複数引数を指定し複数要素の追加が可能
console.log(newFirstOne); // 5 (追加後の要素数)
console.log(animals); // ['newt', dog', 'cat', 'turtle', 'hamster']

//先頭要素の取り出し・削除
let firstOne = animals.shift();
console.log(firstOne); // 'newt'
console.log(animals); // ['dog', 'cat', 'turtle', 'hamster']

要素の削除・追加・特定位置の取り出し

spliceは第1引数のインデックスを開始位置として第2引数の要素数を除去し、代わりに第3引数以降を要素として追加します。

let animals = ['dog', 'cat', 'turtle', 'hamster'];

// インデックス1番目の要素から2個の要素を除外し、3つ目以降の引数「'tarantula','newt'」を要素として追加する。
let pickupItems = animals.splice(1, 2,'tarantula','newt');
console.log(pickupItems); // ['cat', 'turtle'] 除去した要素の配列
console.log(animals); //  ['dog', 'tarantula', 'newt', 'hamster']; 元の配列が変更される

第3引数以降を省略した場合、除去だけが行われます。

let animals = ['dog', 'cat', 'turtle', 'hamster'];

// インデックス1番目の要素から2個の要素を除外する (インデックス1番目の要素から2個の要素を取り出す)
let pickupItems = animals.splice(1, 2);
console.log(pickupItems); // ['cat', 'turtle'] 除去した要素の配列
console.log(animals); //  ['dog', 'hamster'] 元の配列が変更される

配列要素の値設定

fill(value, start, end)は、valueの値で配列要素の値を置き換えます。置き換えの対象範囲はstartとendのインデックスの範囲となります。

let array = [1, 2, 3, 4, 5, 6, 7];

console.log(array.fill(0, 3, 5)); // [1, 2, 3, 0, 0, 6, 7]
console.log(array.fill(0, 3)); // [1, 2, 3, 0, 0, 0, 0] // endを省略すると末尾まで置き換え対象
console.log(array.fill(0)); //[0, 0, 0, 0, 0, 0, 0] // 第1引数のみ指定すると全要素を置き換える

配列内要素のコピー

copyWithin(target, start , end)で配列内の要素間のコピーを行う。 startからendまでの範囲にある要素を、targetを開始位置としてコピーする。

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(numbers.copyWithin(1, 5, 7)); // [1, 6, 7, 4, 5, 6, 7, 8, 9]
console.log(numbers); // [1, 6, 7, 4, 5, 6, 7, 8, 9] 自身の配列が変更される

end省略時はstartから末尾までの要素を、targetを開始位置としてコピーする。

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(numbers.copyWithin(1, 5)); // [1, 6, 7, 8, 9, 6, 7, 8, 9]

引数がtarget1つだけの場合、targetを開始位置として配列の先頭からコピーする。

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(numbers.copyWithin(2)); // [1, 2, 1, 2, 3, 4, 5, 6, 7]

作成日 : 2020年06月13日