【JS】【TS】ループ操作

JavaScript TypeScript

■ はじめに

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

目次

【０】ブラウザ上での実行環境
【１】forループ
　１）for ... in
　２）for ... of
　３）forEach
　４）ESLint「no-restricted-syntax」
【２】map
【３】filter
【４】reduce / reduceRight

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

１）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

２）TypeScript
http://www.typescriptlang.org/Playground/

【１】forループ

* forループ（for ... in / for ... of / forEach）について記載。

１）for ... in

* index を返す

１）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);
}

２）for ... of

* 要素を返す

１）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);
}

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

３）forEach

* 関数型のような感じでループ処理できる

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

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

４）ESLint「no-restricted-syntax」

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

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

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

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

【２】map

* 以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2022/08/25/191412

【３】filter

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

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

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

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

【４】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

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

２）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
ループ操作 ～ map ～
https://dk521123.hatenablog.com/entry/2022/08/25/191412
配列・リスト操作
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