JavaScript

JavaScriptの配列操作をメモがてら整理してまとめてみる

自分用のメモです。JavaScriptの配列操作に関するメソッドなんかを整理する意味でまとめてみました。なんか、いざ使うとなった時に毎回ほぼ忘れているので自分なりに見やすいように残しておきます。

[ads_center]

配列操作

配列にデータを格納して生成するには以下のようにします。

var array1 = ['aaa', 'bbb', 'ccc'];
document.writeln(array1); // aaa,bbb,ccc

追加と削減

配列に要素を追加したり削減したりします。

shift

配列要素の先頭を削減します。

var shift1 = array1.shift();
document.writeln(array1 + '<br>');
document.writeln('削減した要素は ' + shift1 + ' です');
// 実行結果
// bbb,ccc
// 削減した要素は aaa です

unshift

引数に指定した要素を先頭に追加します。

var unshift1 = array1.unshift('ddd', 'eee', 'fff');
document.writeln(array1 + '<br>');
document.writeln('現在の要素数は ' + unshift1 + ' です');
// 実行結果
// ddd,eee,fff,aaa,bbb,ccc
// 現在の要素数は 6 です

pop

配列要素の末尾を削減します。

var pop1 = array1.pop();
document.writeln(array1 + '<br>');
document.writeln('削減した要素は ' + pop1 + ' です');
// 実行結果
// aaa,bbb
// 削減した要素は ccc です

push

引数に指定した要素を末尾に追加します。

var push1 = array1.push('ddd', 'eee', 'fff');
document.writeln(array1 + '<br>');
document.writeln('現在の要素数は ' + push1 + ' です');
// 実行結果
// aaa,bbb,ccc,ddd,eee,fff
// 現在の要素数は 6 です

ソート(並べ替え)

配列内の要素順を並べ替えます。

reverse

現在の配列内の要素順を逆にします。

array1.reverse();
document.writeln(array1);
// 実行結果 
// ccc,bbb,aaa

sort

配列内の要素を昇順に並べ替えます。

array1.sort();
document.writeln(array1);
// 実行結果
// aaa,bbb,ccc

連結

配列同士を連結したり、要素を区切る文字を指定して連結します。

concat

配列同士を連結します。

var array1 = ['aaa', 'bbb', 'ccc'];
var array2 = ['ddd', 'eee', 'fff'];
array3 = array1.concat(array2);
document.writeln(array3);
// 実行結果
// aaa,bbb,ccc,ddd,eee,fff

join

引数に指定した文字で要素を区切り連結します。

var array1 = ['aaa', 'bbb', 'ccc'];
array2 = array1.join('&');
document.writeln(array2);
// 実行結果
// aaa&bbb&ccc

取り出しと置き換え

配列内の要素を取り出したり違う要素に置き換えたりします。

slice

引数に取り出すインデックスを指定します。例えばslice(1)と指定した場合は0からスタートした1番目の要素から末尾までを取得します。また、slice(2, 4)などといった引数を指定すると2番目から4番目未満の要素を取得できます。

var array1 = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff'];
array2 = array1.slice(1);
array3 = array1.slice(2, 4);
document.writeln('取り出す前の配列内要素:' + array1 + '<br>');
document.writeln('slice(1)で取り出した要素:' + array2 + '<br>');
document.writeln('slice(2, 4)で取り出した要素:' + array3);
// 実行結果
// 取り出す前の配列内要素:aaa,bbb,ccc,ddd,eee,fff
// slice(1)で取り出した要素:bbb,ccc,ddd,eee,fff
// slice(2, 4)で取り出した要素:ccc,ddd

splice

第一引数に開始インデックス、第二引数に終了インデックスを指定します。第一引数から第二引数に指定した範囲内の要素をその後に指定する引数に置き換えます。

var array1 = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff'];
document.writeln('置き換え前の配列内要素:' + array1 + '<br>');
splice1 = array1.splice(3, 5, 'ggg', 'hhh', 'iii');
document.writeln('置き換え対象要素:' + splice1 + '<br>');
document.writeln('置き換え後の配列内要素:' + array1);
// 実行結果
// 置き換え前の配列内要素:aaa,bbb,ccc,ddd,eee,fff
// 置き換え対象要素:ddd,eee,fff
// 置き換え後の配列内要素:aaa,bbb,ccc,ggg,hhh,iii

配列内の要素数を取得

配列内の要素数を取得します。

length

var array1 = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff'];
var length1 = array1.length;
document.writeln('現在の要素数:' + length1);
// 実行結果
// 現在の要素数:6

lengthを使えばループ時に簡単に配列内の要素を1つずつ取り出したり共通の処理を適用させることができますね。

for

var array1 = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff'];
var length1 = array1.length;

for (var i = 0; i < length1; i++) {
    document.writeln(i + '. ' + array1[i] + '<br>');
}
// 実行結果
// 0. aaa
// 1. bbb
// 2. ccc
// 3. ddd
// 4. eee
// 5. fff

for…in

こちらはlength関係ないですが…。

var array1 = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff'];

for (i in array1) {
    document.writeln(i + '. ' + array1[i] + '<br>');
}
// 実行結果
// 0. aaa
// 1. bbb
// 2. ccc
// 3. ddd
// 4. eee
// 5. fff

ということで、配列操作に関することをまとめてみました。また忘れた時はこれ見ようかと思います。

滑らかに流れるニュースティッカー「jQuery News Ticker」がとてもいい前のページ

よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる次のページ

関連記事

  1. Lena.js

    JavaScript

    多彩な画像処理ができるJSライブラリ「Lena.js」

    Lena.jsは多彩な画像処理を行うことができるJSライブラリです。セ…

  2. Luminous

    JavaScript

    軽くてシンプルなLightboxを実装できるスクリプト「Luminous」

    Luminousを使えば軽くてシンプルなLightboxを実装すること…

  3. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

  4. Ion Zoom

    JavaScript

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Zoom」

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Z…

  5. uploadHBR

    JavaScript

    複数の画像選択に対応したjQueryファイルアップローダー「uploadHBR」

    uploadHBRは複数の画像選択に対応したファイルアップローダーを実…

  6. Multi-device scrolling menu

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP