More than 5 years have passed since last update.

株式会社サイバーエージェント

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

JavaScript

Last updated at 2016-06-28Posted at 2015-11-28

はじめに

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

JavaScriptの最新情報などの技術系のみをつぶやくTwitterをはじめました。
Twitter: [@takeharumikami]
(https://twitter.com/takeharumikami)

RSSはこちら
RSS: http://qiita.com/takeharu/feed
Feedly: [フォロー]
(http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fqiita.com%2Ftakeharu%2Ffeed)

要素の追加

先頭に追加 - 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); // []

アカウント