TypeScriptでの配列操作

wp-admin

7年前

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.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