JavaScriptの配列操作のまとめ
はじめに
この記事はCODEPREPのJavaScript基礎 配列操作編で学んだ内容+αについてまとめたものとなっています．
配列の定義
空配列の定義
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番目の要素から２個の要素を削除し，そこへ[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' ]
