JavaScript 配列(Array)総まとめ

どうもかわうそです！

今日は『JavaScript 配列(array)総まとめ』したいと思います。

できる限りシンプルによく使うものをまとめました。

JavaScript 配列(Array)の基本

配列(Array)の基礎

配列リテラル

ブラケット[]で囲みます。

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

1	var array = ['a','b','c'];

配列の呼び出し

配列[index]で呼び出します。

var array = ['a','b','c'];
console.log(array[0]) //結果 a
console.log(array[1]) //結果 b

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

console.log(array[0]) //結果 a

console.log(array[1]) //結果 b

配列に格納できる要素

文字列、数字、変数、オブジェクト(なんでもok)

var apple = "リンゴ"
var array = [1,'a',apple,{b:10,c:"lemon"}];

1 2	var apple = "リンゴ" var array = [1,'a',apple,{b:10,c:"lemon"}];

配列(Array)の作成

リテラル表現で配列作成

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

1	var array = ['a','b','c'];

new-コンストラクターを使用した配列作成

var array = new Array('a','b','c');

1	var array = new Array('a','b','c');

空の配列作成

var array = [];
var array = new Array();

1 2	var array = []; var array = new Array();

指定サイズの配列作成

var array = new Array(5);

1	var array = new Array(5);

[alert title=”注意”]上記は『長さが5の配列(indexが0～4)を作成』するという指示です。しかし、5の要素を持つ配列を作成する、と見えなくもないので、表現としてはややこしいです。配列を作成する際は極力リテラル［］を使用しましょう。[/alert]

配列(Array)の使用方法

length

配列の長さを調べます

[box class=”box3″]配列.length[/box]

var array = ['a','b','c'];
console.log(array.length); //結果 3

1 2	var array = ['a','b','c']; console.log(array.length); //結果 3

isArray

オブジェクトが配列かどうかを調べます。

[box class=”box3″]Array.isArray(配列)[/box]

var array = ['a','b','c'];
console.log(Array.isArray(array));  //結果 true

var notArray = "a";
console.log(Array.isArray(notArray));  //結果 false

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

console.log(Array.isArray(array)); //結果 true

var notArray = "a";

console.log(Array.isArray(notArray)); //結果 false

toString

要素,要素,….に文字列変換します

[box class=”box3″]配列.toString()[/box]

var array = ['a','b','c'];
console.log(array.toString());  //結果 a,b,c

1 2	var array = ['a','b','c']; console.log(array.toString()); //結果 a,b,c

toLocaleString

配列をlocaleに合わせた文字列に変換します

[box class=”box3″]配列.toLocaleString()[/box]

[memo title=”locale-ロケール”]システムにおける地域、国、言語、時刻、通貨の設定のこと。使っているコンピュータの基礎設定ってところです[/memo]

var array = [100,1000,10000];
console.log(array.toString());  //結果 100,1000,10000
console.log(array.toLocaleString());  //結果 100,1,000,10,000

var array = [100,1000,10000];

console.log(array.toString()); //結果 100,1000,10000

console.log(array.toLocaleString()); //結果 100,1,000,10,000

indexOf

指定要素にマッチした最初の要素のキー(index)を取得

[box class=”box3″]配列.indexOf( value , start)[/box]

[memo title=”検索開始位置”]第二引数にstart番号を指定すると、検索開始位置を指定できます[/memo]

[memo title=”マッチしない場合”]マッチする要素がない場合は-1を返します[/memo]

var array = ['a','b','c','b','a'];
console.log(array.indexOf('b'));  //結果 1
console.log(array.indexOf('b',1));  //結果 1
console.log(array.indexOf('b',2));  //結果 3
console.log(array.indexOf('b',3));  //結果 3
console.log(array.indexOf('b',4));  //結果 -1

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

console.log(array.indexOf('b')); //結果 1

console.log(array.indexOf('b',1)); //結果 1

console.log(array.indexOf('b',2)); //結果 3

console.log(array.indexOf('b',3)); //結果 3

console.log(array.indexOf('b',4)); //結果 -1

lastIndexOf

指定要素にマッチした最後の要素のキー(index)を取得
indexOfは先頭から調べるのに対し、lastIndexOfは後ろから先頭へ調べていきます。

[box class=”box3″]配列.lastIndexOf( value , start)[/box]

[memo title=”indexOfとの違い”]lastINdexOfは後ろの要素から先頭に向かって調べます。引数に指定したindexは、後ろから見て何番目まで検索するかを指定できます。しかし、返す戻り値の値は、マッチした要素が配列の中で何番目か？というindexです。しっかり理解しておきましょう。[/memo]

var array = ['a','b','c','b','a'];
console.log(array.lastIndexOf('b'));  //結果 3
console.log(array.lastIndexOf('b',0));  //結果 -1
console.log(array.lastIndexOf('b',1));  //結果 1
console.log(array.lastIndexOf('b',2));  //結果 1
console.log(array.lastIndexOf('b',3));  //結果 3
console.log(array.lastIndexOf('b',4));  //結果 3

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

console.log(array.lastIndexOf('b')); //結果 3

console.log(array.lastIndexOf('b',0)); //結果 -1

console.log(array.lastIndexOf('b',1)); //結果 1

console.log(array.lastIndexOf('b',2)); //結果 1

console.log(array.lastIndexOf('b',3)); //結果 3

console.log(array.lastIndexOf('b',4)); //結果 3

concat

配列同士を結合

[memo title=”MEMO”]array1.concat(array2)で、array1にarray2を結合[/memo]

var array1 = ['a','b','c'];
var array2 = ['dog','cat'];
console.log(array1.concat(array2));  //結果 ["a", "b", "c","dog", "cat"]

var array1 = ['a','b','c'];

var array2 = ['dog','cat'];

console.log(array1.concat(array2)); //結果 ["a", "b", "c","dog", "cat"]

join

配列内の要素を、区切り文字(x)で結合

var array = ['a','b','c'];
console.log(array.join('---'));  //結果 a---b---c

1 2	var array = ['a','b','c']; console.log(array.join('---')); //結果 a---b---c

slice

start+1～end番目の要素を部分配列として抜き出します。

引数が1つの場合は、start番号以降の全ての要素を抜き出します。

[box class=”box3″]配列.slice( start, end)[/box]

[memo title=”MEMO”]マイナスの数字を使うと、後ろから数えてくれます。[/memo]

[alert title=”注意”]スタート番号+1から始まる点に注意してください。[/alert]

var array = ['a','b','c','d','e'];
console.log(array.slice(0));  //結果 ["a", "b", "c", "d", "e"]
console.log(array.slice(2));  //結果 ["c", "d", "e"]
console.log(array.slice(0,1));  //結果 ["a"]
console.log(array.slice(0,3));  //結果  ["a", "b", "c"]
console.log(array.slice(1,3));  //結果 ["b", "c"]
console.log(array.slice(0,-1));  //結果 ["a", "b", "c", "d"]

var array = ['a','b','c','d','e'];

console.log(array.slice(0)); //結果 ["a", "b", "c", "d", "e"]

console.log(array.slice(2)); //結果 ["c", "d", "e"]

console.log(array.slice(0,1)); //結果 ["a"]

console.log(array.slice(0,3)); //結果 ["a", "b", "c"]

console.log(array.slice(1,3)); //結果 ["b", "c"]

console.log(array.slice(0,-1)); //結果 ["a", "b", "c", "d"]

splice

配列に複数要素を追加、置換、削除するメソッドです。

[alert title=”破壊的メソッド”]元の配列自体を変更してしまう破壊的メソッドです。[/alert]

ややこしそうですが、構文さえ覚えれば簡単です！

[box class=”box3″]配列.solice( index , many , value1, value2 )[/box]

index　要素抽出開始位置
many　取り出す要素数
value1、2　削除部分に挿入する要素

実際に見てみましょう。

var array = ['a','b','c','d','e'];
console.log(array.splice(0,2));  //結果 ["a", "b"]
console.log(array);  //結果 ["c", "d", "e"]

var array = ['a','b','c','d','e'];

console.log(array.splice(0,2)); //結果 ["a", "b"]

console.log(array); //結果 ["c", "d", "e"]

valueを入れなければ、指定した要素を配列から削除してくれますね。
次はvalueを差し込んでみましょう。

var array = ['a','b','c','d','e'];
console.log(array.splice(0,2,'x','y'));  //結果 ["a", "b"]
console.log(array);  //結果 ["x", "y", "c", "d", "e"]

var array = ['a','b','c','d','e'];

console.log(array.splice(0,2,'x','y')); //結果 ["a", "b"]

console.log(array); //結果 ["x", "y", "c", "d", "e"]

引数manyを0にすれば、indexで指定した位置にvalueを挿入することもできます

var array = ['a','b','c','d','e'];
console.log(array.splice(1,0,'x','y'));  //結果 []
console.log(array);  //結果 ["a", "x", "y", "b", "c", "d", "e"]

var array = ['a','b','c','d','e'];

console.log(array.splice(1,0,'x','y')); //結果 []

console.log(array); //結果 ["a", "x", "y", "b", "c", "d", "e"]

copyWithin

[box class=”box3″]配列.copyWithin( target , start ,end ) [/box]

任意の区間(start～endの直前)の要素をコピーし、任意の位置(target)から貼り付けます。

[memo title=”MEMO”]マイナスの数字を使うと、後ろから数えてくれます。[/memo]

[alert title=”破壊的メソッド”]元の配列自体を変更してしまう破壊的メソッドです。[/alert]

var array = ['a','b','c','d','e'];
console.log(array.copyWithin(0,1,2));  //結果 ["b", "b", "c", "d", "e"]
console.log(array.copyWithin(0,1,3));  //結果 ["b", "c", "c", "d", "e"]
console.log(array.copyWithin(-1,1,2));  //結果 ["a", "b", "c", "d", "b"]

var array = ['a','b','c','d','e'];

console.log(array.copyWithin(0,1,2)); //結果 ["b", "b", "c", "d", "e"]

console.log(array.copyWithin(0,1,3)); //結果 ["b", "c", "c", "d", "e"]

console.log(array.copyWithin(-1,1,2)); //結果 ["a", "b", "c", "d", "b"]

fill

配列内　start+1 ~ end　の要素をvalueで置換できます。

[box class=”box3″]配列.fill( value , start , end)[/box]

[alert title=”破壊的メソッド”]元の配列自体を変更してしまう破壊的メソッドです。[/alert]

var array = ['a','b','c','d','e'];
console.log(array.fill(0));  //結果 [0, 0, 0, 0, 0]
console.log(array.fill(0,1));  //結果 ["a", 0, 0, 0, 0]
console.log(array.fill(0,1,3));  //結果  ["a", 0, 0, "d", "e"]

var array = ['a','b','c','d','e'];

console.log(array.fill(0)); //結果 [0, 0, 0, 0, 0]

console.log(array.fill(0,1)); //結果 ["a", 0, 0, 0, 0]

console.log(array.fill(0,1,3)); //結果 ["a", 0, 0, "d", "e"]

pop

配列の最後の要素を取得し削除できます

[box class=”box3″]配列.pop()[/box]

[alert title=”破壊的メソッド”]元の配列自体を変更してしまう破壊的メソッドです。[/alert]

var array = ['a','b','c','d','e'];
console.log(array.pop());  //結果 e
console.log(array);  //結果 ["a", "b", "c", "d"]

var array = ['a','b','c','d','e'];

console.log(array.pop()); //結果 e

console.log(array); //結果 ["a", "b", "c", "d"]

shit

配列の最初の要素を取得し削除できます

[box class=”box3″]配列.shift()[/box]

[alert title=”破壊的メソッド”]元の配列自体を変更してしまう破壊的メソッドです。[/alert]

var array = ['a','b','c','d','e'];
console.log(array.shift());  //結果 a
console.log(array);  //結果 ["b", "c", "d", "e"]

var array = ['a','b','c','d','e'];

console.log(array.shift()); //結果 a

console.log(array); //結果 ["b", "c", "d", "e"]

push

配列の最後に指定要素を追加し、配列の長さを返します

[box class=”box3″]配列.push( value1 , value2 …)[/box]

[alert title=”破壊的メソッド”]元の配列自体を変更してしまう破壊的メソッドです。[/alert]

var array = ['a','b','c','d','e'];
console.log(array.push('h'));  //結果 6
console.log(array);  //結果 ["a", "b", "c", "d", "e", "h"]

var array = ['a','b','c','d','e'];

console.log(array.push('h')); //結果 6

console.log(array); //結果 ["a", "b", "c", "d", "e", "h"]

var array = ['a','b','c','d','e'];
console.log(array.push('h','i'));  //結果 7
console.log(array);  //結果 ["a", "b", "c", "d", "e", "h", "i"]

var array = ['a','b','c','d','e'];

console.log(array.push('h','i')); //結果 7

console.log(array); //結果 ["a", "b", "c", "d", "e", "h", "i"]

unshift

配列の最初に指定要素を追加し、配列の長さを返します

[box class=”box3″]配列.unshift( value1 , value2 …)[/box]

[alert title=”破壊的メソッド”]元の配列自体を変更してしまう破壊的メソッドです。[/alert]

var array = ['a','b','c','d','e'];
console.log(array.unshift('h'));  //結果 6
console.log(array);  //結果 ["h", "a", "b", "c", "d", "e"]

var array = ['a','b','c','d','e'];

console.log(array.unshift('h')); //結果 6

console.log(array); //結果 ["h", "a", "b", "c", "d", "e"]

var array = ['a','b','c','d','e'];
console.log(array.unshift('h',"i"));  //結果 7
console.log(array);  //結果  ["h", "i", "a", "b", "c", "d", "e"]

var array = ['a','b','c','d','e'];

console.log(array.unshift('h',"i")); //結果 7

console.log(array); //結果 ["h", "i", "a", "b", "c", "d", "e"]

reverse

配列を逆順に並び替えます

[box class=”box3″]配列.reverse()[/box]

[alert title=”破壊的メソッド”]元の配列自体を変更してしまう破壊的メソッドです。[/alert]

var array = ['a','b','c','d','e'];
console.log(array.reverse());  //結果 ["e", "d", "c", "b", "a"]
console.log(array);  //結果 ["e", "d", "c", "b", "a"]

var array = ['a','b','c','d','e'];

console.log(array.reverse()); //結果 ["e", "d", "c", "b", "a"]

console.log(array); //結果 ["e", "d", "c", "b", "a"]

sort

配列内の要素を昇順に並び替えます

[box class=”box3″]配列.sort()[/box]

[alert title=”破壊的メソッド”]元の配列自体を変更してしまう破壊的メソッドです。[/alert]

var array = ['d','e','b','a','c'];
console.log(array.sort());  //結果 ["a", "b", "c", "d", "e"]
console.log(array);  //結果 ["a", "b", "c", "d", "e"]

var array = ['d','e','b','a','c'];

console.log(array.sort()); //結果 ["a", "b", "c", "d", "e"]

console.log(array); //結果 ["a", "b", "c", "d", "e"]

forEach

配列内の要素を順番に取り出し、コールバック関数に渡し、順番に実行する。

[box class=”box3″]配列.forEach( function( value, index, array){
処理;
});[/box]

var array = ['a','b','c','d','e'];
array.forEach( function( value, index, arrayData ){
  console.log(value);
  console.log(index);
});

//結果
//0
//b
//1
//c
//2
//d
//3
//e
//4

var array = ['a','b','c','d','e'];

array.forEach( function( value, index, arrayData ){

console.log(value);

console.log(index);

});

//結果

//0

//b

//1

//c

//2

//d

//3

//e

//4

このとき引数arrayDataはarrayの中身を受け取っています。

console.log(arrayData); //結果 ['a','b','c','d','e']

1	console.log(arrayData); //結果 ['a','b','c','d','e']

map

配列を指定した関数で加工できます

[box class=”box3″]配列.map( function( value, index, array){
処理;
});[/box]

var array = ['a','b','c','d','e'];
var result = array.map( function( value, index, array){
  return value+index;
});
console.log(result);  //["a0", "b1", "c2", "d3", "e4"]

var array = ['a','b','c','d','e'];

var result = array.map( function( value, index, array){

return value+index;

});

console.log(result); //["a0", "b1", "c2", "d3", "e4"]

some

配列内に指定した要素があるかどうかを判定します

[box class=”box3″]配列.some( function( value, index, array){
処理;
});[/box]

var array = ['a','b','c','d','e'];
var result = array.some( function( value, index, array){
  return value === 'a';
});
console.log(result);  //結果　true

var array = ['a','b','c','d','e'];

var result = array.some( function( value, index, array){

return value === 'a';

});

console.log(result); //結果　true

var array = ['a','b','c','d','e'];
var result = array.some( function( value, index, array){
  return value === 'f';
});
console.log(result);  //結果　false

var array = ['a','b','c','d','e'];

var result = array.some( function( value, index, array){

return value === 'f';

});

console.log(result); //結果　false

filter

条件に合致した要素で配列を生成

[box class=”box3″]配列.filter( function( value, index, array){
処理;
});[/box]

var array = [1,2,3,4,5,6,7,8,9,10];
var result = array.filter( function( value, index, array){
  return value % 3 === 0;
});
console.log(result); //[3,6,9]

var array = [1,2,3,4,5,6,7,8,9,10];

var result = array.filter( function( value, index, array){

return value % 3 === 0;

});

console.log(result); //[3,6,9]

find

関数が最初にtrueを返した要素を取得

[box class=”box3″]配列.find( function( value, index, array){
処理;
});[/box]

var array = [1,2,3,4,5,6,7,8,9,10];
var result = array.find( function( value, index, array){
  return value % 3 === 0;
});
console.log(result); //3

var array = [1,2,3,4,5,6,7,8,9,10];

var result = array.find( function( value, index, array){

return value % 3 === 0;

});

console.log(result); //3

findIndex

関数が最初にtrueを返した要素のインデックスを取得

[box class=”box3″]配列.findIndex( function( value, index, array){
処理;
});[/box]

var array = [1,2,3,4,5,6,7,8,9,10];
var result = array.findIndex( function( value, index, array){
  return value % 3 === 0;
});
console.log(result); //2