はじめに
ここでは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のプロトタイプからオブジェクト指向を学ぶ