Array.prototype.flatMap()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itโs been available across browsers since โจ2020ๅนด1ๆโฉ.
flatMap()
ใฏ Array
ใคใณในใฟใณในใฎใกใฝใใใงใๆๅใซใใใใณใฐ้ขๆฐใไฝฟ็จใใฆใใใใใฎ่ฆ็ด ใใใใใใๅพใ็ตๆใๆฐใใ้
ๅๅ
ใซๅนณๅฆๅใใพใใใใใฏใ map()
ใฎๅพใซๆทฑใ 1 ใฎ flat()
ใ่กใใฎใจๅใใงใใ (arr.map(...args).flat()
)ใใใใ 2 ใคใฎใกใฝใใใๅฅใ
ใซๅผใณๅบใใใใใใใใซๅน็็ใงใใ
่ฉฆใใฆใฟใพใใใ
const arr = [1, 2, 1];
const result = arr.flatMap((num) => (num === 2 ? [2, 2] : 1));
console.log(result);
// ไบๆณใใใ็ตๆ: Array [1, 2, 2, 1]
ๆงๆ
flatMap(callbackFn)
flatMap(callbackFn, thisArg)
ๅผๆฐ
callbackFn
-
้ ๅใฎใใใใใฎ่ฆ็ด ใซๅฏพใใฆๅฎ่กใใ้ขๆฐใใใฎ้ขๆฐใฏใๆฐใใ้ ๅใฎ่ฆ็ด ใๆ ผ็ดใใ้ ๅใ่ฟใใใๆฐใใ้ ๅใซ่ฟฝๅ ใใ 1 ใคใฎ้ ๅไปฅๅคใฎๅคใ่ฟใใพใใใใฎ้ขๆฐใฏใไปฅไธใฎๅผๆฐใงๅผใณๅบใใใพใใ
thisArg
็็ฅๅฏ-
callbackFn
ใๅฎ่กใใใจใใซthis
ใจใใฆไฝฟ็จใใๅคใงใใๅๅพฉๅฆ็ใกใฝใใใๅ็ งใใฆใใ ใใใ
่ฟๅค
ๅ่ฆ็ด ใใณใผใซใใใฏ้ขๆฐใฎ็ตๆใงใใใๆทฑใใ 1 ใซๅนณๅฆๅใใใๆฐใใ้ ๅใงใใ
่งฃ่ชฌ
flatMap()
ใกใฝใใใฏๅๅพฉๅฆ็ใกใฝใใใงใใใณใผใซใใใฏ้ขๆฐใฎ่ฉณ็ดฐใช่ชฌๆใฏ Array.prototype.map()
ใๅ็
งใใฆใใ ใใใflatMap()
ใกใฝใใใฏใmap(callbackFn, thisArg)
ใฎๅพใซใฎ flat(1)
ใๅผใณๅบใใฎใจๅใใงใใ่ฆ็ด ใใจใซใๆฐใใ่ฆ็ด ใฎ้
ๅใ็ๆใใใงใใ้
ๅใ้ฃ็ตใใฆๆฐใใ้
ๅใๅฝขๆใใพใใใใใใฎใกใฝใใใไธ่ฌ็ใซใฉใฎใใใซๅไฝใใใฎใใซใคใใฆใฎ่ฉณ็ดฐใฏใๅๅพฉๅฆ็ใกใฝใใใฎ็ฏใใ่ฆงใใ ใใใ
flatMap()
ใกใฝใใใฏๆฑ็จ็ใงใใใใใฏ this
ๅคใซ length
ใใญใใใฃใจๆดๆฐใญใผใฎใใญใใใฃใใใใใจใ ใใๆๅพ
ใใพใใใใ ใใ callbackFn
ใใ่ฟใใใๅคใฏใๅนณๅฆๅใใๅ ดๅใฏ้
ๅใงใชใใใฐใชใใพใใใ
ไปฃๆฟๆๆฎต
ไบๅๅฒใๅฝใฆใจๆ็คบ็ใชๅๅพฉๅฆ็
const arr = [1, 2, 3, 4];
arr.flatMap((x) => [x, x * 2]);
// is equivalent to
const n = arr.length;
const acc = new Array(n * 2);
for (let i = 0; i < n; i++) {
const x = arr[i];
acc[i * 2] = x;
acc[i * 2 + 1] = x * 2;
}
// [1, 2, 2, 4, 3, 6, 4, 8]
ใใฎๅ ดๅใ flatMap
ใฎๆๆณใฏ for ใซใผใใฎๆๆณใใใ้
ใใใจใซๆณจๆใใฆใใ ใใใใใใฏใใฌใใผใธใณใฌใฏใทใงใณใๅฟ
่ฆใชไธๆ็ใช้
ๅใ็ๆใใใใใใจใ่ฟใใใ้
ๅใฎใตใคใบใ้ ป็นใซๅคๆดใใๅฟ
่ฆใใชใใใใงใใใใใใๆ่ปๆงใจๅฏ่ชญๆงใๆฑใใใใๅ ดๅใซใฏใ flatMap
ใๆญฃใใ่งฃๆฑบ็ญใจใชใๅฏ่ฝๆงใใใใพใใ
ไพ
map() ใจ flatMap()
const arr = [1, 2, 3, 4];
arr.map((x) => [x * 2]);
// [[2], [4], [6], [8]]
arr.flatMap((x) => [x * 2]);
// [2, 4, 6, 8]
// 1ใคใฎใฌใใซใ ใใใใฉใใๅใใใ
arr.flatMap((x) => [[x * 2]]);
// [[2], [4], [6], [8]]
ไธ่จใฏ map ใไฝฟ็จใใใใจใงใๅฎ็พใงใใพใใใใใใงใฏ flatMap()
ใฎไฝฟ็จๆนๆณใใใใใ็คบใไพใ็ดนไปใใพใใ
ๆ็ซ ใฎใชในใใใๅ่ชใฎใชในใใ็ๆใใฆใฟใพใใใใ
const arr = ["it's Sunny in", "", "California"];
arr.map((x) => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr.flatMap((x) => x.split(" "));
// ["it's","Sunny","in", "", "California"]
ๅบๅใชในใใฎ้ทใใฏๅ ฅๅใชในใใฎ้ทใใจใฏ็ฐใชใๅ ดๅใใใใใจใซๆณจๆใใฆใใ ใใใ
map() ใฎใขใคใใ ใฎ่ฟฝๅ ใจๅ้ค
flatMap
ใฏใmap
ไธญใซใขใคใใ ใฎ่ฟฝๅ ใจๅ้ค๏ผใขใคใใ ใฎๆฐใๅคๆด๏ผใ่กใๆนๆณใจใใฆๅฉ็จใงใใพใใ
ใคใพใใๅธธใซไธๅฏพไธใงใฏใชใใๅคใใฎใขใคใใ ใๅคใใฎใขใคใใ ใซ๏ผๅ
ฅๅใใใใขใคใใ ใๅๅฅใซๆฑใใใจใง๏ผใใใใงใใใใใซใชใใพใใ
ใใฎๆๅณใงใฏใ filter ใฎ้ใฎใใใชๅใใใใพใใ
ๅ็ดใซใใขใคใใ ใไฟๆใใใซใฏ 1 ่ฆ็ด ใฎ้
ๅใ่ฟใใใขใคใใ ใ่ฟฝๅ ใใใซใฏ่คๆฐ่ฆ็ด ใฎ้
ๅใ่ฟใใใขใคใใ ใๅ้คใใใซใฏ 0 ่ฆ็ด ใฎ้
ๅใ่ฟใใพใใ
// ไพใใฐใใในใฆใฎ่ฒ ใฎๆฐใๅใ้คใใ
// ๅฅๆฐใๅถๆฐใจ 1 ใซๅๅฒใใใใจใใพใใ
const a = [5, 4, -3, 20, 17, -33, -4, 18];
// |\ \ x | | \ x x |
// [4,1, 4, 20, 16, 1, 18]
const result = a.flatMap((n) => {
if (n < 0) {
return [];
}
return n % 2 === 0 ? [n] : [n - 1, 1];
});
console.log(result); // [4, 1, 4, 20, 16, 1, 18]
callbackFn ใฎ็ฌฌ 3 ๅผๆฐใฎไฝฟ็จ
array
ๅผๆฐใฏใ้
ๅๅ
ใฎๅฅใฎ่ฆ็ด ใซใขใฏใปในใใใๅ ดๅใ็นใซใใใฎ้
ๅใๅ็
งใใๆขๅญใฎๅคๆฐใใชใๅ ดๅใซไพฟๅฉใงใใๆฌกใฎไพใงใฏใๆๅใซ filter()
ใไฝฟ็จใใฆ้็จในใใผใทใงใณใๆฝๅบใใๆฌกใซ flatMap()
ใไฝฟ็จใใฆใใใใใใฎ่ฆ็ด ใ้ง
ใจใใฎๆฌกใฎ้ง
ใๅซใๆฐใใ้
ๅใไฝๆใใฆใใพใใๆๅพใฎ้ง
ใงใฏใๆ็ต็ใช้
ๅใใใใฎ้ง
ใ้คๅคใใใใใซใ็ฉบใฎ้
ๅใ่ฟใใฆใใพใใ
const stations = ["New Haven", "West Haven", "Milford (closed)", "Stratford"];
const line = stations
.filter((name) => !name.endsWith("(closed)"))
.flatMap((name, idx, arr) => {
// arr ๅผๆฐใใชใๅ ดๅใๅคๆฐใซไฟๅญใใใซไธญ้้
ๅใซ็ฐกๅใซ
// ใขใฏใปในใใๆนๆณใฏใใใพใใใ
if (idx === arr.length - 1) return []; // ๆๅฎใใใ้ง
ใซๆฌกใฎ้ง
ใใชใ
return [`${name} - ${arr[idx + 1]}`];
});
console.log(line); // ['New Haven - West Haven', 'West Haven - Stratford']
array
ๅผๆฐใฏใๆง็ฏไธญใฎ้
ๅใงใฏใใใพใใใใณใผใซใใใฏ้ขๆฐใใๆง็ฏไธญใฎ้
ๅใซใขใฏใปในใใๆนๆณใฏใใใพใใใ
็้ ๅใซๅฏพใใ flatMap() ใฎไฝฟ็จ
map()
ใฏๅผใณๅบใใใใ flat()
ใฏ่ฟใ้
ๅใฎ็ฉบใฎในใญใใใ็ก่ฆใใใฎใงใ callbackFn
ใฏๅ
ใฎ้
ๅใฎ็ฉบใฎในใญใใใซๅฏพใใฆใฏๅผใณๅบใใใพใใใ
console.log([1, 2, , 4, 5].flatMap((x) => [x, x * 2])); // [1, 2, 2, 4, 4, 8, 5, 10]
console.log([1, 2, 3, 4].flatMap((x) => [, x * 2])); // [2, 4, 6, 8]
้ ๅไปฅๅคใฎใชใใธใงใฏใใซๅฏพใใ flatMap() ใฎๅผใณๅบใ
flatMap()
ใกใฝใใใฏ this
ใฎ length
ใใญใใใฃใ่ชญใฟ่พผใฟใๆฌกใซใญใผใ length
ใใๅฐใใ้่ฒ ใฎๆดๆฐใงใใๅใใญใใใฃใซใขใฏใปในใใพใใใณใผใซใใใฏ้ขๆฐใฎ่ฟใๅคใ้
ๅใงใชใๅ ดๅใฏใๅธธใซ็ตๆใฎ้
ๅใซ็ดๆฅ่ฟฝๅ ใใใพใใ
const arrayLike = {
length: 3,
0: 1,
1: 2,
2: 3,
3: 4, // length ใ 3 ใงใใใใ flatMap() ใใ็ก่ฆใใใ
};
console.log(Array.prototype.flatMap.call(arrayLike, (x) => [x, x * 2]));
// [1, 2, 2, 4, 3, 6]
// ใณใผใซใใใฏใใ่ฟใใใ้
ๅ้ขจใฎใชใใธใงใฏใใฏๅนณๅฆๅใใใชใ
console.log(
Array.prototype.flatMap.call(arrayLike, (x) => ({
length: 1,
0: x,
})),
);
// [ { '0': 1, length: 1 }, { '0': 2, length: 1 }, { '0': 3, length: 1 } ]
ไปๆงๆธ
Specification |
---|
ECMAScriptยฎ 2026 Language Specification # sec-array.prototype.flatmap |
ใใฉใฆใถใผใฎไบๆๆง
Loadingโฆ