Help us understand the problem. What is going on with this article?

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

takeharu
【名前】三上丈晴 【経歴】北海道大学理学院数学専攻を経て、2012年新卒入社。現在ピグパーティ プロダクトマネージャ 【著書】Git逆引き入門
https://twitter.com/takeharumikami
cyberagent
サイバーエージェントは「21世紀を代表する会社を創る」をビジョンに掲げ、インターネットテレビ局「AbemaTV」の運営や国内トップシェアを誇るインターネット広告事業を展開しています。インターネット産業の変化に合わせ新規事業を生み出しながら事業拡大を続けています。
http://www.cyberagent.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした