【JS】【TS】ループ操作 ~ map etc ~

■ はじめに

JavaScript/TypeScript において、
for/while/do-while 以外にもループ処理を扱う方法をメモ。

目次

【0】ブラウザ上での実行環境
 1)JavaScript
 2)TypeScript
【1】for ... in / for ... of / forEach
 1)for ... in
 2)for ... of
 3)forEach
 4)ESLint「no-restricted-syntax」
【2】map
【3】filter
【4】reduce / reduceRight

【0】ブラウザ上での実行環境

1)JavaScript
https://paiza.io/ja/projects/new?language=javascript

* Google Chrome なら、以下のような方法もある

https://www.javadrive.jp/javascript/console/index1.html

その他の環境については、以下のサイトを参照。

https://qiita.com/zchee/items/7b68c0f194d07ee06e10

2)TypeScript
http://www.typescriptlang.org/Playground/

【1】for ... in / for ... of / forEach

* ループについて記載。

1)for ... in

1)JavaScript

let people = [
  { name: 'Mike', age: 17 },
  { name: 'Sam', age: 23 },
  { name: 'Kevin', age: 41 },
  { name: 'Tom', age: 32 }
];

for (var index in people) {
  console.log(people[index].name + " : " + people[index].age);
}

2)for ... of

1)JavaScript

let people = [
  { name: 'Mike', age: 17 },
  { name: 'Sam', age: 23 },
  { name: 'Kevin', age: 41 },
  { name: 'Tom', age: 32 }
];

for (var person of people) {
  console.log(person.name + " : " + person.age);
}

2)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 = [];
for (const person of people) {
  idList.push(person.id);
}

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

3)forEach

1)JavaScript

let people = [
  { name: 'Mike', age: 17 },
  { name: 'Sam', age: 23 },
  { name: 'Kevin', age: 41 },
  { name: 'Tom', age: 32 }
];

people.forEach(person => console.log(
  'name:' + person.name + ' age:' + person.age));

2)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: string[] = [];
people.forEach(person => {
  idList.push(person.id);
});

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

4)ESLint「no-restricted-syntax」

for .. of (例えば、「2)for ... of」の「2)TypeScript」みたいな感じ)で実装したら
ESLintエラー「no-restricted-syntax」がでてきた。

対応としては、forEach(例えば、「3)forEach」の「2)TypeScript」みたいな感じ)で
置き換えたら、エラーが解消された。
 ⇒ forEach で書く癖をつけておいた方がよさそう。

ESLintエラー「no-restricted-syntax」の詳細については、以下のサイトを参照。

https://qiita.com/41semicolon/items/6ec0f6a9fdf7c97f1a41
https://qiita.com/putan/items/0c0037ce00d21854a8d0

【2】map

* ループして、新しい配列を生成

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

1ー1)JavaScript

// 'value:1'...
[1, 2, 3, 4, 5].map(value => console.log('value:' + value));

1ー2)JavaScript

let people = [
  { name: 'Mike', age: 17 },
  { name: 'Sam', age: 23 },
  { name: 'Kevin', age: 41 },
  { name: 'Tom', age: 32 }
];

people.map(person => console.log(
  'name:' + person.name + ' age:' + person.age));

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

【3】filter

* ループして、条件に合うものを新しい配列として生成

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

1)JavaScript

let people = [
  { name: 'Mike', age: 17 },
  { name: 'Sam', age: 23 },
  { name: 'Kevin', age: 41 },
  { name: 'Tom', age: 32 }
];

// 30歳未満を抽出する
const unser30s = people.filter(function(element, index, array) {
    return (element.age < 30);
});

unser30s.map(unser30 => console.log(
  'name:' + unser30.name + ' age:' + unser30.age));

2)TypeScript

const people = [
  { id: "0001", name: "Mike", age: 29 },
  { id: "0002", name: "Tom", age: 34 },
  { id: "0003", name: "Sam", age: 45 },
  { id: "0004", name: "Kevin", age: 19 },
  { id: "0005", name: "Ken", age: 20 },
];

const peopleOver30 = people.filter(person => person.age > 30);

// [
//  { id: '0002', name: 'Tom', age: 34 },
//  { id: '0003', name: 'Sam', age: 45 }
// ]
console.log(peopleOver30);

【4】reduce / reduceRight

* 配列の各要素に対して reducer 関数を実行して、単一の出力値を生成
* reduce については、以下のサイトを参照。

https://hapicode.com/javascript/reduce.html
公式サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight

1)JavaScript

let people = [
  { name: 'Mike', age: 17 },
  { name: 'Sam', age: 23 },
  { name: 'Kevin', age: 41 },
  { name: 'Tom', age: 32 }
];

// 構文:arr.reduce(callback[, initialValue(今回は 0)])
const total = people.reduce((sum, person) => sum + person.age, 0);

// 113
console.log(total);

2)TypeScript

const people = [
  { id: "0001", name: "Mike", age: 29 },
  { id: "0002", name: "Tom", age: 34 },
  { id: "0003", name: "Sam", age: 45 },
  { id: "0004", name: "Kevin", age: 19 },
  { id: "0005", name: "Ken", age: 20 },
];

const total = people.reduce((sum, person) => sum + person.age, 0);

// 147
console.log(total);

参考文献

https://qiita.com/wifeofvillon/items/15359535a834832e08ea
https://qiita.com/itagakishintaro/items/29e301f3125760b81302
https://www.wakuwakubank.com/posts/280-javascript-array-helper/

関連記事

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