はじめに
ここでは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のプロトタイプからオブジェクト指向を学ぶ
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="204" height="219"><rect fill-opacity="0"/></svg>)
コメント
@1ntegrale9（編集済み） リンクをコピー このコメントを報告 16 サービス利用規約に基づき、このコメントは削除されました。
要素の削除の項の説明が不十分なので補足です。
（意図的に割愛しているかもしれませんが）
shift()とpop()は指定した値を返しつつ配列から要素を取り除くため、
削除というよりは取り出しという説明の方が正確かと思います。
末尾の取得の項もpop()を使用するのが最も簡潔かと思います。
配列を破壊してしまうので常に使用できるわけではないですが、
配列を取得するメソッドと組み合わせて末尾だけ欲しい場合に有効です。
また、splice()も削除のためのメソッドではなく、
追加, 削除, 置換のいずれも可能です。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice