บทความนี้เขียนโดยบรรณาธิการของ Downcodes เพื่ออธิบายรายละเอียดวิธีการต่างๆ ในการแปลงข้อมูล JSON เป็นอาร์เรย์ใน JavaScript ในการพัฒนาเว็บ เรามักจะต้องประมวลผลข้อมูล JSON ที่ได้รับจากฝั่งเซิร์ฟเวอร์ และแปลงเป็นอาร์เรย์ JavaScript สำหรับการดำเนินการในภายหลัง บทความนี้จะให้การอภิปรายเชิงลึกเกี่ยวกับภาพรวมของ JSON, วิธี JSON.parse, การสำรวจออบเจ็กต์ JSON เพื่อสร้างอาร์เรย์ และการประมวลผลข้อมูล JSON ที่ซ้อนกัน นอกจากนี้ ยังมีตัวอย่างโค้ดเพื่อช่วยให้ผู้อ่านเชี่ยวชาญทักษะการแปลงข้อมูล JSON ได้อย่างรวดเร็ว และปรับปรุงประสิทธิภาพการพัฒนา
ในโปรแกรม JavaScript การแปลงข้อมูล JSON เป็นอาร์เรย์เป็นการดำเนินการทั่วไป โดยเฉพาะอย่างยิ่งเมื่อประมวลผลข้อมูลที่ส่งคืนโดย Web API บทความนี้จะเจาะลึกวิธีการต่างๆ ในการแปลงข้อมูล JSON เป็นอาร์เรย์ และเลือกวิธีการแปลงที่เหมาะสมที่สุดโดยพิจารณาจากโครงสร้างข้อมูลและการใช้งานเป้าหมาย โดยเฉพาะอย่างยิ่งสำหรับการแปลงระหว่างออบเจ็กต์ JSON และอาร์เรย์ เราจะเน้นที่การใช้วิธี JSON.parse เพื่อแยกวิเคราะห์สตริง JSON
JSON (JavaScript Object Notation) เป็นรูปแบบการแลกเปลี่ยนข้อมูลขนาดเล็กที่อ่านและเขียนได้ง่าย รวมถึงแยกวิเคราะห์และสร้างเครื่องได้ง่าย ใน JavaScript JSON มักใช้เพื่ออธิบายข้อมูลในวัตถุหรือโครงสร้างอาร์เรย์ การแปลงข้อมูล JSON ให้เป็นอาร์เรย์ช่วยให้นักพัฒนาสามารถสำรวจและจัดการข้อมูลได้สะดวกยิ่งขึ้น โดยเฉพาะอย่างยิ่งเมื่อทำการผูกข้อมูล การแสดงข้อมูล หรือการประมวลผลอัลกอริทึมบางอย่าง
ข้อมูล JSON สามารถแสดงเป็นวัตถุหรืออาร์เรย์ได้ ออบเจ็กต์จะแสดงเป็นคอลเลกชันของคู่คีย์/ค่า ในขณะที่อาร์เรย์จะแสดงคอลเลกชันของค่าตามลำดับ การทำความเข้าใจโครงสร้างพื้นฐานทั้งสองนี้ของ JSON เป็นสิ่งสำคัญสำหรับการดำเนินการแปลงในภายหลัง
การแปลง JSON เป็นอาร์เรย์ทำให้การประมวลผลข้อมูลมีความยืดหยุ่น ในจาวาสคริปต์ อาร์เรย์จัดเตรียมวิธีการจำนวนมากในการดำเนินการ เช่น การข้าม การกรอง และการเรียงลำดับ ซึ่งมีความสำคัญมากสำหรับการประมวลผลและการแสดงข้อมูลที่มีประสิทธิภาพ
เมธอด JSON.parse เป็นวิธีมาตรฐานในการแปลงสตริง JSON กลับเป็นอ็อบเจ็กต์หรืออาร์เรย์ JavaScript วิธีการนี้มีประโยชน์มาก โดยเฉพาะอย่างยิ่งเมื่อประมวลผลสตริงรูปแบบ JSON ที่ได้รับจากเซิร์ฟเวอร์
ให้ jsonString = '{ชื่อ:จอห์น อายุ:30 เมือง:นิวยอร์ก}';
ให้ jsonObj = JSON.parse(jsonString);
ในตัวอย่างนี้ เมธอด JSON.parse จะแปลงสตริงที่จัดรูปแบบ JSON เป็นอ็อบเจ็กต์ JavaScript
หากสตริง JSON แสดงถึงอาร์เรย์ JSON.parse จะแปลงเป็นอาร์เรย์ JavaScript โดยตรงด้วย
ให้ jsonArrayString = '[แอปเปิ้ล, กล้วย, เชอร์รี่]';
ให้ jsonArray = JSON.parse(jsonArrayString);
วิธีการนี้เหมาะสำหรับการแปลงโดยตรงจากสตริง JSON เป็นอาร์เรย์
บางครั้งเราจำเป็นต้องแปลงค่าทั้งหมดของออบเจ็กต์ JSON ให้เป็นอาร์เรย์ ณ จุดนี้ คุณสามารถใช้เมธอด Object.keys, Object.values หรือ Object.entries เพื่อสำรวจออบเจ็กต์ JSON และสร้างอาร์เรย์ได้ตามต้องการ
ให้ jsonObject = { firstName: John, นามสกุล: Doe, อายุ: 30 };
ให้valueArray = Object.values(jsonObject);
วิธี Object.values แยกค่าทั้งหมดในวัตถุ JSON โดยตรงและทำให้เป็นองค์ประกอบของอาร์เรย์ วิธีนี้เหมาะสำหรับสถานการณ์ที่คุณสนใจเฉพาะค่าออบเจ็กต์เท่านั้น
การข้ามผ่านช่วยให้มีความยืดหยุ่นมากขึ้นในการสร้างอาร์เรย์ โดยเฉพาะอย่างยิ่งเมื่อคุณต้องการดึงข้อมูลเฉพาะจากออบเจ็กต์ JSON หรือดำเนินการแปลงบางประเภท
ให้ customArray = [];
สำหรับ (ให้ป้อน jsonObject) {
ถ้า (jsonObject.hasOwnProperty (คีย์)) {
customArray.push(${key}: ${jsonObject[คีย์]});
-
-
วิธีการนี้ช่วยให้นักพัฒนาสามารถควบคุมกระบวนการสร้างอาร์เรย์ รวมถึงการเลือกคีย์และค่า และตรรกะในการเปลี่ยนแปลงใดๆ
ในการพัฒนาจริง เรามักจะพบกับโครงสร้างข้อมูล JSON ที่ซ้อนกัน และจำเป็นต้องได้รับการดูแลเป็นพิเศษเมื่อประมวลผลข้อมูลเหล่านี้
สำหรับโครงสร้างที่ซ้อนกันอย่างง่าย คุณสามารถใช้เมธอด JSON.parse ได้โดยตรง จากนั้นดำเนินการกับข้อมูลที่แยกวิเคราะห์ตามต้องการ
ให้ NestedJsonString = '{นักเรียน:[{ชื่อ:จอห์น,อายุ:18},{ชื่อ:เจน,อายุ:19}]}';
ให้ NestedObj = JSON.parse(nestedJsonString);
ให้ studentsArray = NestedObj.students;
สำหรับโครงสร้างนี้ ก่อนอื่นเราจะแยกวิเคราะห์สตริง JSON ทั้งหมด จากนั้นเข้าถึงคุณสมบัติที่ซ้อนกันโดยตรงเพื่อรับอาร์เรย์ที่ต้องการ
สำหรับการซ้อนที่ซับซ้อนมากขึ้นหรือสถานการณ์ที่ต้องมีการประมวลผลเฉพาะ อาจจำเป็นต้องใช้วิธีการแปลงร่วมกัน
ให้ complexNestedObj = { โรงเรียน: { ชื่อ: มัธยมปลาย นักเรียน: [ {ชื่อ: จอห์น อายุ: 18}, {ชื่อ: เจน อายุ: 19} ] } };
ให้ studentsDetAIlsArray = complexNestedObj.school.students.map(student => ${student.name} is ${student.age} years old.);
ในตัวอย่างนี้ เราใช้วิธีการแมปเพื่อดำเนินการประมวลผลเฉพาะกับแต่ละอ็อบเจ็กต์ในอาร์เรย์นักเรียนที่ซ้อนกัน และสุดท้ายจะได้อาร์เรย์ใหม่ที่อธิบายรายละเอียดของนักเรียน
ใน JavaScript การแปลงข้อมูล JSON เป็นอาร์เรย์ถือเป็นงานพื้นฐานทั่วไป การทำความเข้าใจและฝึกฝนวิธีการแปลงต่างๆ สามารถช่วยให้นักพัฒนาจัดการสถานการณ์ข้อมูลต่างๆ ได้อย่างยืดหยุ่นและมีประสิทธิภาพ การเลือกวิธีการที่เหมาะสมจะขึ้นอยู่กับโครงสร้างของข้อมูลต้นฉบับและเป้าหมายของการเปลี่ยนแปลง สิ่งสำคัญคือต้องรักษาโค้ดให้ชัดเจนและมีประสิทธิภาพอยู่เสมอ โดยเฉพาะอย่างยิ่งเมื่อต้องจัดการกับข้อมูลที่ซับซ้อนหรือในแอปพลิเคชันที่คำนึงถึงประสิทธิภาพ
โดยรวมแล้ว เมธอด JSON.parse มอบวิธีที่ง่ายและตรงไปตรงมาในการประมวลผลสตริง JSON สำหรับออบเจ็กต์ JSON การแวะผ่านและการแปลงสามารถทำได้ง่ายโดยใช้วิธีคงที่ของคลาส Object สำหรับโครงสร้างข้อมูลที่ซ้อนกัน การใช้วิธีการพื้นฐานเหล่านี้ร่วมกันอย่างสมเหตุสมผลสามารถช่วยแก้ปัญหาความต้องการในการแปลงส่วนใหญ่ได้ ในการพัฒนาจริง การทำความเข้าใจโครงสร้างข้อมูลและการชี้แจงเป้าหมายเป็นกุญแจสำคัญในการเลือกแนวทางปฏิบัติที่ดีที่สุด
1. วิธีแปลงข้อมูล json เป็นอาร์เรย์ในโปรแกรมจาวาสคริปต์ ในโปรแกรม Javascript คุณสามารถใช้ฟังก์ชัน JSON.parse() เพื่อแปลงข้อมูล JSON ให้เป็นอาร์เรย์ได้ ฟังก์ชันนี้รับข้อมูล json เป็นพารามิเตอร์และส่งกลับออบเจ็กต์อาร์เรย์ที่เกี่ยวข้อง ตัวอย่างเช่น:
var jsonData = '{ชื่อ:จอห์น อายุ:30 เมือง:นิวยอร์ก}';var jsonArray = JSON.parse(jsonData);console.log(jsonArray);ในโค้ดด้านบน jsonData คือสตริงในรูปแบบ json ซึ่งถูกแปลงเป็นอ็อบเจ็กต์อาร์เรย์ผ่านฟังก์ชัน JSON.parse() และสุดท้ายจะส่งออกในคอนโซล
2. วิธีการประมวลผลข้อมูล json ที่มีวัตถุ json หลายรายการและแปลงเป็นอาร์เรย์ หากข้อมูล json ที่จะประมวลผลมีออบเจ็กต์ json หลายรายการ คุณสามารถใส่ออบเจ็กต์ json เหล่านี้ในอาร์เรย์ก่อน จากนั้นใช้ฟังก์ชัน JSON.parse() เพื่อแปลงอาร์เรย์ทั้งหมดให้เป็นอาร์เรย์ javascript ตัวอย่างเช่น:
var jsonData = '[{ชื่อ:จอห์น อายุ:30 เมือง:นิวยอร์ก} {ชื่อ:เจน อายุ:25 เมือง:ลอนดอน}]';var jsonArray = JSON.parse(jsonData);console.log( jsonArray);ในโค้ดข้างต้น jsonData คือสตริงที่มีอาร์เรย์ json ของอ็อบเจ็กต์ json สองตัว ซึ่งจะถูกแปลงเป็นอ็อบเจ็กต์อาร์เรย์ javascript ผ่านฟังก์ชัน JSON.parse() และเอาต์พุตในคอนโซล
3. วิธีจัดการกับอาร์เรย์ที่ซ้อนกันในอาร์เรย์ json และแปลงเป็นอาร์เรย์จาวาสคริปต์ หากมีอาร์เรย์ที่ซ้อนกันในอาร์เรย์ json คุณสามารถใช้การประมวลผลแบบเรียกซ้ำได้ ขั้นแรกให้แปลงแต่ละองค์ประกอบในอาร์เรย์ที่ซ้อนกันเป็นอาร์เรย์จาวาสคริปต์ ก่อนที่จะเพิ่มอาร์เรย์ที่ซ้อนกันทั้งหมดเป็นองค์ประกอบเดียวในอาร์เรย์หลัก ตัวอย่างเช่น:
var jsonData = '[{ชื่อ:John, งานอดิเรก:[การอ่าน, ว่ายน้ำ, วิ่ง]}, {ชื่อ:Jane, งานอดิเรก:[การวาดภาพ, การวาดภาพ]}]';var jsonArray = JSON.parse(jsonData);//การประมวลผล อาร์เรย์ที่ซ้อนกันสำหรับ (var i = 0; i < jsonArray.length; i++) { var hobbiesArray = jsonArray[i].hobbies; javascriptArray = []; for(var j = 0; j < hobbiesArray.length; j++) { javascriptArray.push(hobbiesArray[j]); } jsonArray[i].hobbies = javascriptArray;}console.log(jsonArray);ในโค้ดด้านบน jsonData คือสตริงที่มีอาร์เรย์ json ของอ็อบเจ็กต์ json สองตัว ซึ่งแต่ละอ็อบเจ็กต์มีอาร์เรย์ที่ซ้อนกันชื่อ hobbies แปลงอาร์เรย์ที่ซ้อนกันเป็นอาร์เรย์จาวาสคริปต์ผ่านการประมวลผลแบบเรียกซ้ำและส่งออกอาร์เรย์ทั้งหมดในคอนโซล
หวังว่าบทความนี้จะช่วยคุณได้! ความเชี่ยวชาญในการแปลงข้อมูล JSON เป็นทักษะที่สำคัญในการพัฒนาส่วนหน้า ฉันหวังว่าคุณจะสามารถนำวิธีการที่อธิบายไว้ในบทความนี้ไปใช้ในโครงการจริงได้อย่างยืดหยุ่น