d_tail's blog

プログラミングについてなど

JavaScriptの配列操作のまとめ

はじめに

この記事はCODEPREPJavaScript基礎 配列操作編で学んだ内容+αについてまとめたものとなっています.

配列の定義

空配列の定義

var array = [];

console.log(array); // []

数値/文字列の配列の定義

var array1 = [1,2,3];
var array2 = ["a","b","c"];

console.log(array1); // [ 1, 2, 3 ]
console.log(array2); // [ 'a', 'b', 'c' ]

配列の長さを取得【length】

var array = [1,2,3,4];

console.log(array.length); // 4

要素の追加

配列の末尾に値を追加【push】

var array = [1,2,3];
array.push(4);

console.log(array); // [ 1, 2, 3, 4 ]

配列の先頭に値を追加【unshift】

var array = [1,2,3];
array.unshift(0);

console.log(array); // [ 0, 1, 2, 3 ]

配列の連結

連結して新たな配列を生成【concat】

var array1 = [1,2,3];
var array2 = [4,5,6];
var array3 = array1.concat(array2);

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

一つ目の配列に二つ目の配列を連結【Array.prototype.push.apply】

var array1 = [1,2,3];
var array2 = [4,5,6];
Array.prototype.push.apply(array1, array2);

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

要素の取得/削除

先頭の要素の取得

var array = [1,2,3];

console.log(array[0]); // 1

末尾の要素の取得

var array = [1,2,3];

console.log(array[array.length - 1]); // 3

指定した位置の要素の置き換え

var array = [1,2,3];
array[1] = 10

console.log(array); // [ 1, 10, 3 ]

先頭の要素を取得と同時に削除【shift】

var array = [1,2,3,4,5];
var x = array.shift()

console.log(x) // 1
console.log(array); // [ 2, 3, 4, 5 ]

末尾の要素を取得と同時に削除【pop】

var array = [1,2,3,4,5];
var x = array.pop()

console.log(x) // 5
console.log(array); // [ 1, 2, 3, 4 ]

配列の全要素を削除

var array = [1,2,3,4,5];
array.length = 0;

console.log(array);  // []
var array = [1, 2, 3, 4];
array = [];

console.log(array); // []

配列の最大値/最小値を取得【Math.max/Math.min】

var array = [3, 1, 5, 9];
var max = Math.max.apply(null, array);
var min = Math.min.apply(null, array);

console.log(max); // 9
console.log(min); // 1

配列の途中に要素を追加/配列の途中の要素を削除【splice】

配列の途中から複数の値を削除/挿入

var array = [1,2,3,4,5,6];
// 3番目の要素から2個の要素を削除し,そこへ[14,15,16]を挿入する
var x = array.splice(3,2,14,15,16)

console.log(array); // [ 1, 2, 3, 14, 15, 16, 6 ]
console.log(x) // [ 4, 5 ]

参考:

配列の途中に値を挿入

var array = [1,2,4];
// 2番目の要素から0個の要素を削除し,そこへ[3]を挿入する
array.splice(2,0,3)

console.log(array); // [ 1, 2, 3, 4 ]

配列の途中の要素を削除

var array = [1,2,3,4,5];
// 1番目の要素から2個の要素を削除し,何も挿入しない
var x = array.splice(1,2)

console.log(array); // [ 1, 4, 5 ]
console.log(x); // [ 2, 3 ]

配列の関数

先頭から要素の位置を検索して取得【indexOf】

var array = [1,2,3,4,5,3];
var index = array.indexOf(3)

console.log(array); // [ 1, 2, 3, 4, 5, 3 ]
console.log(index); // 2

末尾から要素の位置を検索して取得【lastIndexOf】

var array = [1,2,3,4,5,3];
var index = array.lastIndexOf(3)

console.log(array); // [ 1, 2, 3, 4, 5, 3 ]
console.log(index); // 5

要素を連結して文字列化【join】

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

console.log(array.join(" ")); // 1 2 3 4 5
console.log(array); // [ 1, 2, 3, 4, 5 ]

配列の一部を切り出す【slice】

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

//1番目の要素から2番目の要素までを切り出す
console.log(array.slice(1,3)); // [ 2, 3 ]
//spliceとは違い元の配列には影響を与えない
console.log(array); // [ 1, 2, 3, 4, 5 ]

配列のソート【sort】

var array = [3,2,3,4,6,1,5];
var array_string = ["1","3","11","5","2","21"];

console.log(array.sort()); // [ 1, 2, 3, 3, 4, 5, 6 ]
//文字列の場合は数値のようにはソートされないので注意
console.log(array_string.sort()); // [ '1', '11', '2', '21', '3', '5' ]

参考記事