0%

Programmingプログラミングナレッジ

Posted:2019.09.18

javascriptで配列を扱う時によく使うメソッド#1【配列の作成・値や総数の取得・空判定など】

Vue.jsでフロントエンドの開発をしていると、配列のデータを取り扱う場面が多々あります。そこで、javascriptで配列のデータを取り扱う場面でよく使うメソッドなどを備忘録として複数記事でまとめていきたいと思います。第一回目はメソッドに当てはまらないのですが、基本的な部分として配列の作成や値を取得する方法をテーマに行くつかあげてみました。

 

1. 空の配列を作成する

最も基本的なところですが、定数もしくは変数に配列を定義する方法です。空の角カッコで囲むことで空の配列を定義できます。もしくは「new Array()」でも同義になります。

【javascript】

const arrayData = [];
 // もしくは
const arrayData = new Array();

console.log(arrayData);

 

【console】

[]

 

 

2. 値が入った配列を作成する

配列を定義する時に値を入れることも可能です。初期値として値が入った配列を扱うことができます。

【javascript】

const arrayData = [ 'りんご', 'みかん', 'ぶどう' ];

console.log(arrayData);

 

【console】

[ "りんご", "みかん", "ぶどう" ]

 

 

3. 引数から配列を作成する

「Array.of()」を使うことで引数に設定した値から配列を作ることができます。あまり使うケースはないように思います。

【javascript】

const arrayData = Array.of('りんご', 'みかん', 'ぶどう');

console.log(arrayData);

 

【console】

[ "りんご", "みかん", "ぶどう" ]

 

 

4. 配列をコピーして作成する

「Array.from()」で配列をコピーすることができます。全く同じ配列を新たに作り出します。

【javascript】

const arrayData = [ 'りんご', 'みかん', 'ぶどう' ];
const arrayCopied = Array.from(arrayData);

console.log(arrayCopied);

 

【console】

[ "りんご", "みかん", "ぶどう" ]

 

 

5. 配列内の特定の値を取得

配列名の後にインデックス番号を添えると、そのインデックスに対応した値を取得することができます。インデックス番号は0から始まるので注意が必要です。

【javascript】

const arrayData = [ 'りんご', 'みかん', 'ぶどう', 'さくらんぼ', 'いちご' ];
const orange = arrayData[1];
const cherry = arrayData[3];

console.log(orange);
console.log(cherry);

 

【console】

"みかん"
"さくらんぼ"

 

 

6. 配列の長さ(値の数)を取得する

「Array.length」で配列の長さ、つまり値の数を取得することができます。全てのデータ数などを調べるときによく使います。

【javascript】

const arrayData = [ 'りんご', 'みかん', 'ぶどう', 'さくらんぼ', 'いちご' ];
const arrayLength = arrayData.length;

console.log(arrayLength);

 

【console】

5

 

 

7. 配列が空かどうか判定する

配列に値が入っているか、入っていないつまり空であるかを調べる時に使います。専用の関数はないので、このような形で先ほどの「Array.length」で返り値を見て判断しています。

【javascript】

const arrayData = [];
function isEmpty(array) {
 if ( array.length > 0) {
  console.log('配列は空ではありません'); 
 } else {
  console.log('配列は空です');
 }
}
isEmpty(arrayData);

 

【console】

"配列は空です"

 

 

まとめ

【空の配列を作成】

const ***** = []; もしくは const ***** = new Array();

 

【値が入った配列を作成】

const ***** = [ val1, val2, val3, ….. ];

 

【引数から配列を作成】

const ***** = Array.of( val1, val2, val3, ….. );

 

【配列をコピーして作成】

const ***** = Array.from( array );

 

【配列内の特定の値を取得】

const ***** = array[index];

 

【配列の長さを取得】

const ***** = array.length;

 

【配列の空判定】

if ( array.length > 0) { }

 

これらは配列を扱う上で基本的な部分になりますが、javascriptでは配列データを扱うのにとても便利なメソッドがたくさん用意されています。また別記事にて色々とまとめていきたいと思います。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】