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

■ はじめに

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

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

目次

【1】push ... リストへ追加
【2】concat ... リストの結合
【3】slice ... リストの部分抽出
【4】sort ... リストのソート
【5】find / filter ... 合致したものを返却する
 1)差異
【6】some / every ... 合致しているかどうかbool値で返却
 1)差異
【Z】配列・リストあれこれ
 1)辞書・クラスの一覧をリストに変換するには
 2)辞書・クラスの一覧から該当のデータを取得するには

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

* 配列の末尾に追加

【2】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);

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

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

使用上の注意

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

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

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

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

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

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

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

1)差異

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

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

1)差異

some

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

every

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

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

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

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);

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

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