JavaScript: array ตอนที่ 12 การคำนวณทางคณิตศาสตร์ เพื่อสร้าง array ใหม่ ด้วย map()

ในการใช้งาน เมธอด map() ร่วมกับ array เราสามารถคำนวณข้อมูลใน array เก่า และนำผลลัพธ์ ออกออกมาสร้างเป็น array ใหม่ได้ ตามต้องการ

 

การใช้งาน เมธอด map()

ในเบื้องต้น เรามีข้อมูลใน array ดังต่อไปนี้

 

ผลลัพธ์

javascript-array-map-1

ภาพที่ 1 ผลลัพธ์

 

เราสามารถเรียกใช้ เมธอด map() ได้ง่าย ๆ ดังนี้  data.map(); 

 

จากนั้นก็เพิ่ม function เข้าไปในวงเล็บ ( )  ของ map( )

 

เพิ่มตัวแปร value (สามารถตั้งชื่อได้ตามต้องการ) ลงไปในวงเล็บของ function

 

map() จะทำการคำนวณทางคณิตศาสตร์ และคืนค่าผลลัพธ์ กลับออกมา เช่น เราทำการ คูณ ( * ) ข้อมูลใน array เก่า ด้วยเลข 5 ดังนี้ value * 5; 

 

 

จากนั้น ประกาศตัวแปรชื่อ newData มารับค่า ข้อมูลใหม่ ที่ได้จากการคำนวณ

 

เรามาดูกันค่ะว่า ข้อมูลใน array ใหม่ ที่ชื่อ newData  มีอะไรบ้าง

 

ผลลัพธ์

เราจะได้ข้อมูล array ใหม่ ที่ถูกคำนวณออกมาเรียบร้อยแล้ว สำหรับค่า NaN คือ Not a Number เมื่อเรานำตัวเลขไปคูณกับตัวอักษร ทำให้ไม่สามารถคำนวณได้ จึงได้ค่า NaN กลับมา ในตำแหน่งแรก ( ‘กล้วยหอม’ * 5 = NaN)

javascript-array-map-2

ภาพที่ 2 ผลลัพธ์

 

คราวนี้ มาดูข้อมูลใน array เก่า กันบ้างค่ะ

 

ผลลัพธ์

ปรากฏว่า ข้อมูลใน array เก่า ก็ยังคงเดิม ไม่เปลี่ยนแปลงนะคะ 🙂

javascript-array-map-3

ภาพที่ 3 ผลลัพธ์

 

 

สรุป

การใช้งาน เมธอด map() เป็นการคำนวณทางคณิศาสตร์ กับข้อมูลใน array เก่า และนำผลลัพธ์ที่ได้ออกมาสร้างเป็น array ใหม่ โดยยังคงข้อมูลใน array เก่าเอาไว้เช่นเดิม

 

 

Comments

comments

ธมนวรรณ มณีจันทร์

เป้าหมาย : "พัฒนาคุณภาพชีวิตผู้คน ผ่านการส่งมอบความรู้ ด้วยเทคโนโลยีที่ดีที่สุด" ... ประวัติ