Edited at

JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。

More than 3 years have passed since last update.


はじめに

ここではJavaScriptの配列である、Arrayの基本的な使い方をまとめました。主な内容としては、要素の追加、結合、取得、削除となります。

JavaScriptの最新情報などの技術系のみをつぶやくTwitterをはじめました。

Twitter: @takeharumikami

RSSはこちら

RSS: http://qiita.com/takeharu/feed

Feedly: フォロー


要素の追加


先頭に追加 - unshift

配列の先頭に値を追加します。

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

array.unshift('a');
console.log(array); // ['a', 'b', 'c']


末尾に追加 - push

配列の末尾に値を追加します。

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

array.push('c');
console.log(array); // ['a', 'b', 'c']


指定した位置に一つ以上追加 - splice

配列の指定した位置に一つ以上の値を追加します。

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

array.splice(1, 0, 'A'); // 二番目に挿入
console.log(array); // ['a', 'A', 'b', 'c']

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

array.splice(2, 0, 'A', 'B'); // 三番目に複数挿入
console.log(array); // ['a', 'b', 'A', 'B', 'c']


配列の結合


非破壊的な結合 - concat

結合して新しい配列を生成します。もともとの二つの配列には影響を及ぼしません。

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

var array2 = ['c', 'd'];

var array = array1.concat(array2);

console.log(array); // ['a', 'b', 'c', 'd']
console.log(array1); // ['a', 'b']
console.log(array2); // ['c', 'd']


破壊的な結合 - push

一つ目の配列に二つ目の配列を結合します。新しい配列は生成せず、一つ目の配列に影響を及ぼします。

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

var array2 = ['c', 'd'];

Array.prototype.push.apply(array1, array2);

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


要素の取得


先頭を取得

配列の先頭の値を取得します。

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

var value = array[0];

console.log(array); // ['a', 'b', 'c']
console.log(value); // 'a'


末尾を取得

配列の末尾の値を取得します。

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

var value = array[array.length - 1];

console.log(array); // ['a', 'b', 'c']
console.log(value); // 'c'


配列の数を取得 - length

配列の数である、要素数を取得します。

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

var l = array.length;

console.log(l); // 3


値から最初のkeyを取得 - indexOf

配列の値からkeyを取得します。複数以上の同じ値が存在する場合、最初の値のkeyを取得します。

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

var index = array.indexOf('b');

console.log(index); // 1


値から最後のkeyを取得 - lastIndexOf

配列の値からkeyを取得します。複数以上の同じ値が存在する場合、最後の値のkeyを取得します。

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

var index = array.lastIndexOf('b');

console.log(index); // 3


指定した位置から、一つ以上の値(配列)を取得 - slice

指定した位置から、一つ以上の値(配列)を取得します。sliceの第一引数の位置から、第二引数の位置までを取得します。これは少しわかりづらいのですが、第一引数以上、第二引数未満の配列を取得します。

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

var s1 = array.slice(1, 2);
var s2 = array.slice(1, 3);

console.log(array); // ['a', 'b', 'c', 'd']
console.log(s1); // ['b']
console.log(s2); // ['b', 'c']


ランダムに取得 - Math.random

Mathオブジェクトを用いて、配列の値をランダムに取得します。

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

var r = Math.floor(Math.random() * array.length); // 0~2の値

console.log(array[r]); // 'a' OR 'b' OR 'c'


最大値、最小値を取得 - Math.max Math.min

Mathオブジェクトを用いて、配列の値の最大値、最小値を取得します。

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


要素の削除


先頭を削除 - shift

配列の先頭を削除して詰めます。

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

array.shift();
console.log(array); // ['b', 'c']

配列の先頭にundefinedを代入して、先頭を削除して詰めません。

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

array[0] = void 0; // void 0 によりundefinedを代入できます。
console.log(array); // [undefined, 'b', 'c']


末尾を削除する - pop

配列の末尾を削除します。

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

array.pop();
console.log(array); // ['a', 'b']


指定した位置から一つ以上の値を削除 - splice

配列の指定した位置から一つ以上の値を削除します。

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

array.splice(1, 1); // 二番目から一つ削除
console.log(array); // ['a', 'c']

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

array.splice(1, 2); // 二番目から二つ削除
console.log(array); // ['a']


配列の全要素を削除(全削除) - length, []

配列の長さを意図的に0にして、配列の全要素の削除をします。

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

array.length = 0;
console.log(array); // []

空配列を再代入して、初期化することにより配列の全要素の削除をします。

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

array = [];
console.log(array); // []


アカウント

JavaScriptの最新情報などの技術系のみをつぶやくTwitterをはじめました。

Twitter: @takeharumikami

RSSはこちら

RSS: http://qiita.com/takeharu/feed

Feedly: フォロー


おすすめな記事

この記事のようにそのまま配列を使うことは基本ないです。便利なUnderscore.js, lodashを使いこなす。

JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選(lodashもあるよ)

入門者がつまづく、thisの挙動を4種類に分けて簡単に学ぶならこれ。Apply, callの挙動までわかる。

JavaScriptの「this」は「4種類」?」

JavaScriptはオブジェクト指向?プロトタイプベースのオブジェクト指向を学ぶなら。

JavaScriptのプロトタイプからオブジェクト指向を学ぶ