TypeScriptでの配列操作 | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

TypeScriptでの配列操作についてまとめています。

※目次をクリックすると目次の下部にコンテンツが表示されます。

１．JavaScriptでの配列操作
２．TypeScriptでの配列操作

JavaScriptでの配列操作

・JavaScriptの配列は、Array.prototypeから継承されたもの。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
・宣言するときに、配列の要素数を指定する必要がない。JavaScriptがリサイズしてくれる。
・配列の要素の型を指定する必要がない。異なる型の要素が混在できる。
　
●配列の作成
　
〇構文
[element0, element1, …, elementN]
new Array(element0, element1[, …[, elementN]])
new Array(arrayLength)
　
例１）
var demoAry = new Array();
demoAry[0] = 32;
demoAry[1] = “東京都新宿区”;
demoAry[2] = true;
　
例２）
var demoAry = [32, “東京都新宿区”, true];

TypeScriptでの配列操作

TypeScriptでは、型注釈、クラスを使用できます。
　

１）クラスの配列の作成

　
①constructorなしの場合の例

export class Member {
  id: number;
  name: string;
}

var MEMBERS: Member[] = [
  { id: 11, name: '相田' },
  { id: 12, name: '飯田' },
];

　
②constructorありの場合の例

export class Member1 {
  id: number;
  name: string;
  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

var MEMBERS1: Member1[] = [
  new Member1(11, '相田'),
  new Member1(12, '飯田'),
];

２）Forループの配列の要素にアクセス

for (var i = 0; i < MEMBERS1.length; i++) {
  console.log("id: " + MEMBERS1[i].id + ",name: " + MEMBERS1[i].name);
  console.log("ID: " + MEMBERS1[i]["id"] + ",NAME: " + MEMBERS1[i]["name"]);
}

３）配列に要素を追加

　
①配列の最後に要素を追加
MEMBERS1.push({ id: 19, name: '謙田' });
MEMBERS1.push(new Member1(19, '謙田'));
　
②配列の先頭に要素を追加
MEMBERS1.unshift({ id: 20, name: '小林' });
MEMBERS1.unshift(new Member1(20, '小林'));
　

４）指定した範囲の配列要素をリターン

　
var MEMBERS2: Member1[] = MEMBERS1.slice(1,8);
　

５）配列内の要素をソート

　
●構文
array.sort(compareFunction);
　
〇compareFunction
・ソート順を定義する関数を指定
・ompareFunction(a, b) が 0 未満の場合、a を b より小さい添字にソート。
・compareFunction(a, b) が 0 より大きい場合、b を a より小さい添字にソート。
　
例）

MEMBERS2.sort((a: Member1, b:Member1) => {
  if (a.id > b.id) {
    return 1;
  }
  if (a.id < b.id) {
    return -1;
  }
    return 0;
});

関連記事の目次

１）クラスの配列の作成

２）Forループの配列の要素にアクセス

３）配列に要素を追加

４）指定した範囲の配列要素をリターン

５）配列内の要素をソート

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル