วิธี flatMap

วิธี flatMap ส่งคืน อาร์เรย์ใหม่ ที่ถูกสร้างขึ้นหลังจากที่ callback ที่ระบุในพารามิเตอร์ของเมธอด ถูกนำไปใช้กับแต่ละองค์ประกอบของอาร์เรย์ต้นทาง callback. เมื่อมองครั้งแรก วิธี flatMap ดูคล้ายกับวิธี map แต่ความแตกต่างหลัก คือมันจะส่งคืนอาร์เรย์หนึ่งมิติเสมอ

ไวยากรณ์

javascriptlet newArray = array.flatMap(function);

ตัวอย่าง

ลองรับอาร์เรย์ใหม่มา โดยใช้วิธี flatMap:

javascriptlet arr = ['a', 'b', 'c'];

let res = arr.flatMap(function(elem) {
  return elem + '!';
});

console.log(res);

ผลลัพธ์ของการรันโค้ด:

javascript['a!', 'b!', 'c!']

ตัวอย่าง

ลองรับอาร์เรย์ใหม่จาก อาร์เรย์ต้นทางที่ประกอบด้วยตัวเลข:

javascriptlet arr = [1, 2, 3, 4, 5];

let res = arr.flatMap(function(elem) {
  return elem + 2;
});

console.log(res);

ผลลัพธ์ของการรันโค้ด:

javascript[3, 4, 5, 6, 7]

ตัวอย่าง

ลองนำวิธี flatMap ไปใช้กับอาร์เรย์ที่มี ระดับการซ้อนกันแรก:

javascriptlet arr = [1, 2, 3, [4, 5]];

let res = arr.flatMap(function getElem(elem){
  return elem + 2;
});

console.log(res);

หลังจากรันโค้ด เราจะเห็นว่าเงื่อนไขของฟังก์ชันถูกนำไปใช้ กับซับอาร์เรย์ โดยนับเป็นหนึ่งองค์ประกอบ ดังนั้นการเรียกเมธอดนี้กับอาร์เรย์ที่ซ้อนกัน จึงไม่สมเหตุสมผล:

javascript[3, 4, 5, '4,52']

ตัวอย่าง

หากเราไม่ต้องการกังวลกับระดับการซ้อนกัน แต่ต้องการรวมอาร์เรย์ทั้งหมด ให้ใช้พารามิเตอร์ Infinity:

javascriptlet arr = ['a', 'b', ['c', 'd', ['e', 'f', ['g', 'h', ['i']]]]];

let res = arr.flatMap(Infinity);

console.log(res);

ผลลัพธ์ของการรันโค้ด:

javascript[
  'a', 'b', 'c',
  'd', 'e', 'f',
  'g', 'h', 'i'
]

ตัวอย่าง

ลองนำสองวิธีไปใช้กับอาร์เรย์: flatMap และ map โดยในพารามิเตอร์ของทั้งสองวิธี จะระบุฟังก์ชันที่ทำให้อาร์เรย์เป็นสองมิติ:

javascriptlet arr = [1, 2, 3, 4, 5, 6];
let res1 = arr.map(elem => [elem * 3]);
let res2 = arr.flatMap(elem => [elem * 3]);

console.log('method map', res1);
console.log('method flatMap', res2);

ผลลัพธ์ของการรันโค้ด:

javascript'method map' [[3], [6], [9], [12], [15], [18]]
'method flatMap' [3, 6, 9, 12, 15, 18]

ดูเพิ่มเติม