どうもかわうそです！
今日は『JavaScript 配列(array)総まとめ』したいと思います。
できる限りシンプルによく使うものをまとめました。
JavaScript 配列(Array)の基本
配列(Array)の基礎
配列リテラル
ブラケット[]で囲みます。
|
1 |
var array = ['a','b','c']; |
配列の呼び出し
配列[index]で呼び出します。
|
1 2 3 |
var array = ['a','b','c']; console.log(array[0]) //結果 a console.log(array[1]) //結果 b |
配列に格納できる要素
文字列、 数字 、変数、オブジェクト(なんでもok)
|
1 2 |
var apple = "リンゴ" var array = [1,'a',apple,{b:10,c:"lemon"}]; |
配列(Array)の作成
リテラル表現で配列作成
|
1 |
var array = ['a','b','c']; |
new-コンストラクターを使用した配列作成
|
1 |
var array = new Array('a','b','c'); |
空の配列作成
|
1 2 |
var array = []; var array = new Array(); |
指定サイズの配列作成
|
1 |
var array = new Array(5); |
[alert title=”注意”]上記は『長さが5の配列(indexが0～4)を作成』するという指示です。しかし、5の要素を持つ配列を作成する、と見えなくもないので、表現としてはややこしいです。配列を作成する際は極力リテラル［］を使用しましょう。[/alert]
配列(Array)の使用方法
length
配列の長さを調べます
[box class=”box3″]配列.length[/box]
|
1 2 |
var array = ['a','b','c']; console.log(array.length); //結果 3 |
isArray
オブジェクトが配列かどうかを調べます。
[box class=”box3″]Array.isArray(配列)[/box]
|
1 2 3 4 5 |
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]
|
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]
|
1 2 3 |
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]
|
1 2 3 4 5 6 |
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]
|
1 2 3 4 5 6 7 |
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]
|
1 2 3 |
var array1 = ['a','b','c']; var array2 = ['dog','cat']; console.log(array1.concat(array2)); //結果 ["a", "b", "c","dog", "cat"] |
join
配列内の要素を、区切り文字(x)で結合
|
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]
|
1 2 3 4 5 6 7 |
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 削除部分に挿入する要素
実際に見てみましょう。
|
1 2 3 |
var array = ['a','b','c','d','e']; console.log(array.splice(0,2)); //結果 ["a", "b"] console.log(array); //結果 ["c", "d", "e"] |
valueを入れなければ、指定した要素を配列から削除してくれますね。
次はvalueを差し込んでみましょう。
|
1 2 3 |
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を挿入することもできます
|
1 2 3 |
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]
|
1 2 3 4 |
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]
|
1 2 3 4 |
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]
|
1 2 3 |
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]
|
1 2 3 |
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]
|
1 2 3 |
var array = ['a','b','c','d','e']; console.log(array.push('h')); //結果 6 console.log(array); //結果 ["a", "b", "c", "d", "e", "h"] |
|
1 2 3 |
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]
|
1 2 3 |
var array = ['a','b','c','d','e']; console.log(array.unshift('h')); //結果 6 console.log(array); //結果 ["h", "a", "b", "c", "d", "e"] |
|
1 2 3 |
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]
|
1 2 3 |
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]
|
1 2 3 |
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]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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の中身を受け取っています。
|
1 |
console.log(arrayData); //結果 ['a','b','c','d','e'] |
map
配列を指定した関数で加工できます
[box class=”box3″]配列.map( function( value, index, array){
処理;
});[/box]
|
1 2 3 4 5 6 |
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]
|
1 2 3 4 5 |
var array = ['a','b','c','d','e']; var result = array.some( function( value, index, array){ return value === 'a'; }); console.log(result); //結果 true |
|
1 2 3 4 5 |
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]
|
1 2 3 4 5 |
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]
|
1 2 3 4 5 |
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]
|
1 2 3 4 5 |
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 |