【JS】【TS】配列・リスト操作

JavaScript TypeScript

■ はじめに

https://dk521123.hatenablog.com/entry/2021/01/03/000000

でループを取り上げたが、
今回は、配列（Array）・リストを取り上げる。

目次

【０】定義方法
【１】push ... リストへ追加
【２】concat ... リストの結合
【３】slice ... リストの部分抽出
【４】sort ... リストのソート
【５】find / filter ... 合致したものを返却する
　１）差異
【６】some / every ... 合致しているかどうかbool値で返却
　１）差異
【７】join ... リストを結合し、文字列返却(e.g. カンマ区切り)
【Z】配列・リストあれこれ
　１）辞書・クラスの一覧をリストに変換するには
　２）辞書・クラスの一覧から該当のデータを取得するには

【０】定義方法

* 色々な方法がある

https://algorithm.joho.info/typescript/array-push-ts/
https://maku.blog/p/ttwoetd/

サンプル

// 配列の宣言
var sampleList1: string[] = [];
var sampleList2: Array<string> = [];
var sampleList3: any[] = new Array(3);

【１】push ... リストへ追加

* 配列の末尾に追加

【２】concat ... リストの結合

* 2つ以上の配列を結合する

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
後書き： スプレッド構文 / Three-dots について 

*  スプレッド構文 / Three-dots (...) で同じことができる
 => 詳細は、以下の関連記事を参照のこと

https://dk521123.hatenablog.com/entry/2021/03/09/000000

TypeScript・サンプル 

const list1 = [1, 2, 3];
const list2 = [4, 5, 6];

const list3 = list1.concat(list2);

// [ 1, 2, 3 ] <= 元のリストには影響しない
console.log(list1);
// [ 4, 5, 6 ] <= 元のリストには影響しない
console.log(list2);
// [ 1, 2, 3, 4, 5, 6 ] <= リストを結合
console.log(list3);

【３】slice ... リストの部分抽出

* 配列の指定した部分を抽出して、生成する

使用上の注意

１）slice(start, end) で指定した場合、
　　start から end まで指定したことになるが
　　end は含まれないことに注意！
２）配列の一部の浅いコピーを新しい配列オブジェクトとして生成

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

【４】sort ... リストのソート

リストのソート処理。
 => 詳細は、以下の関連記事を参照のこと。

配列・リスト操作 ～ ソート編 ～
https://dk521123.hatenablog.com/entry/2021/02/19/000000

【５】find / filter ... 合致したものを返却する

* 合致したものを返却する
 => filter のサンプルは、下記「２）辞書・クラスの一覧から該当のデータを取得するには」を参照

１）差異

find 

* 条件が一致していた場合、配列内の 最初の要素 の 値 (単一オブジェクト) を返す
 => 一致しなかった場合は、 undefined が返却

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find
filter 

* 条件が一致していた場合、その配列内の 全て要素 (複数オブジェクト) を返す
 => 一致しなかった場合は、 空リストが返却

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

【６】some / every ... 合致しているかどうかbool値で返却

１）差異

some 

* 対象配列が条件と1個でも一致していた場合、true を返す

every 

* 対象配列が条件と全て致していた場合、true を返す

【７】join ... リストを結合し、文字列返却(e.g. カンマ区切り)

const list = [
  'data1',
  'data2',
  'data3',
]
const result0 = list.join(', ')

// result0 = data1, data2, data3
console.log(`result0 = ${result0}`)

【Z】配列・リストあれこれ

１）辞書・クラスの一覧をリストに変換するには

https://dk521123.hatenablog.com/entry/2021/01/03/000000

で扱った map を利用する。

TypeScript・サンプル 

// Example to convert Dictionary to List
const people = [
  { id: "0001", name: "Mike" },
  { id: "0002", name: "Tom" },
  { id: "0003", name: "Sam" },
  { id: "0004", name: "Kevin" },
  { id: "0005", name: "Ken" },
];

const idList = people.map(person => person.id);

// [ '0001', '0002', '0003', '0004', '0005' ]
console.log(idList);

２）辞書・クラスの一覧から該当のデータを取得するには

https://dk521123.hatenablog.com/entry/2021/01/03/000000

で扱った filter を利用する。

【補足】
 filter で返ってくるのは、配列で返ってくる。
IDなどで絞って必ず1件しかない場合は、以下のサンプルのように
"[0]"にしてあげればいい。（条件が一致しなくても大丈夫そう）

TypeScript・サンプル 

const people = [
  { id: "0001", name: "Mike" },
  { id: "0002", name: "Tom" },
  { id: "0003", name: "Sam" },
  { id: "0004", name: "Kevin" },
  { id: "0005", name: "Ken" },
];

let targetId = '0003';
let targetPerson = people.filter(function(person) {
  return person.id === targetId;
})[0];
// { id: '0003', name: 'Sam' }
console.log(targetPerson);

targetId = '0009';
targetPerson = people.filter(function(person) {
  return person.id === targetId;
})[0];
// undefined
console.log(targetPerson);

参考文献

https://www.wakuwakubank.com/posts/280-javascript-array-helper/

関連記事

TypeScript ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/12/21/180904
ループ操作 ～ map etc ～
https://dk521123.hatenablog.com/entry/2021/01/03/000000
配列・リスト操作 ～ ソート編 ～
https://dk521123.hatenablog.com/entry/2021/02/24/222452
配列・リスト操作 ～ スプレッド構文 / Three-dots ～
https://dk521123.hatenablog.com/entry/2021/03/09/000000