TypeScript配列mapメソッド解説
2024-10-08
mapメソッドの戻り値は、関数の戻り値に基づいて型が決まります。たとえば、関数が数値を返す場合、mapメソッドの戻り値は数値の配列になります。関数がオブジェクトを返す場合、mapメソッドの戻り値はオブジェクトの配列になります。
以下は、mapメソッドの例です。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => {
return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
TypeScript配列mapメソッド解説とコード例
基本的な使い方
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => {
return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
- doubledNumbers
新しい配列。元の配列の各要素を2倍した結果が含まれます。 - return number * 2
関数の戻り値。各要素を2倍します。 - map((number) => { ... })
mapメソッドのコールバック関数。numberは現在の要素を表します。 - numbers
元の配列
オブジェクトを返す例
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
];
const userNames = users.map((user) => {
return user.name;
});
console.log(userNames); // ['Alice', 'Bob', 'Charlie']
- userNames
新しい配列。元の配列の各オブジェクトのnameプロパティが含まれます。 - return user.name
関数の戻り値。各オブジェクトのnameプロパティを抽出します。 - users
元の配列（オブジェクトの配列）
複数のプロパティを返す例
const products = [
{ id: 1, name: 'Apple', price: 1.5 },
{ id: 2, name: 'Banana', price: 0.8 },
{ id: 3, name: 'Orange', price: 1.2 }
];
const productInfo = products.map((product) => {
return {
name: product.name,
price: product.price * 1.1 // 10%の値上げ
};
});
console.log(productInfo);
- productInfo
新しい配列。元の配列の各オブジェクトから必要な情報を抽出した新しいオブジェクトが含まれます。 - return { ... }
関数の戻り値。新しいオブジェクトを作成し、必要なプロパティを抽出または計算します。
forループ
最も基本的な方法は、forループを使用することです。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = [];
for (let i = 0; i < numbers.length; i++) {
doubledNumbers.push(numbers[i] * 2);
}
console.log(doubledNumbers ); // [2, 4, 6, 8, 10]
for...ofループ
ES6以降では、for...ofループを使用して、配列の各要素を直接イテレートすることができます。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = [];
for (const number of numbers) {
doubledNumbers.push(number * 2);
}
console.log(doubledNumbe rs); // [2, 4, 6, 8, 10]
reduceメソッド
reduceメソッドは、配列の各要素に対して関数を適用し、累積値を計算します。mapメソッドと同様に、新しい配列を返すことができます。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.reduce((acc, number) => {
acc.push(number * 2);
return acc;
}, []);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
filterメソッドとmapメソッドの組み合わせ
特定の条件を満たす要素のみを抽出して、その後mapメソッドを使用して変換する場合、filterメソッドとmapメソッドを組み合わせて使用することができます。
const numbers = [1, 2, 3, 4, 5];
const evenDoubledNumbers = numbers
.filter(number => number % 2 === 0)
.map(number => number * 2);
console.log(evenDoubledNumbers); // [4, 8]
typescript
