วิธีแปลงข้อมูล JSON ให้เป็นอาร์เรย์ในโปรเจ็กต์ JavaScript ส่วนหน้า

เครื่องมือแก้ไข Downcodes จะแสดงให้คุณเห็นหลายวิธีในการแปลงข้อมูล JSON เป็นอาร์เรย์ใน JavaScript ส่วนหน้า ในการพัฒนาส่วนหน้า มักจำเป็นต้องแปลงข้อมูล JSON ที่ได้รับจากเซิร์ฟเวอร์ให้เป็นอาร์เรย์ JavaScript เพื่อการประมวลผล บทความนี้จะแนะนำรายละเอียดวิธีการที่ใช้กันทั่วไปสามวิธี: JSON.parse(), Object.keys() และ Object.entries() และใช้โค้ดตัวอย่างเพื่ออธิบายวิธีใช้วิธีการเหล่านี้เพื่อแปลงข้อมูล JSON เป็นอาร์เรย์อย่างมีประสิทธิภาพ และวิธี เพื่อใช้วิธีการอาร์เรย์สำหรับการประมวลผลข้อมูลในภายหลัง นอกจากนี้ บทความนี้ยังมีคำถามที่พบบ่อยที่เกี่ยวข้องเพื่อช่วยให้คุณเข้าใจและใช้วิธีการเหล่านี้ได้ดียิ่งขึ้น

ในโปรเจ็กต์ JavaScript ส่วนหน้า การแปลงข้อมูล JSON เป็นอาร์เรย์เป็นการดำเนินการทั่วไปและมีคุณค่า ซึ่งสามารถทำได้โดยใช้วิธี JSON.parse() โดยใช้วิธี Object.keys() และใช้ประโยชน์จากวิธี ES6 Object.entries() วิธีการเหล่านี้สามารถแปลง JSON เป็นรูปแบบอาร์เรย์ได้อย่างง่ายดายและมีประสิทธิภาพ เพื่ออำนวยความสะดวกในการประมวลผลและการดำเนินการข้อมูลในภายหลัง การใช้เมธอด JSON.parse() เป็นวิธีที่ตรงที่สุดและใช้กันทั่วไปมากที่สุด Meng Xuewu อธิบายอย่างละเอียด ด้วย JSON.parse() เราสามารถแยกวิเคราะห์สตริงที่จัดรูปแบบ JSON ลงในอ็อบเจ็กต์หรืออาร์เรย์ JavaScript เป็นวิธีสำคัญในการประมวลผลข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์และทำให้เกิดการแปลงโครงสร้างข้อมูลที่ซับซ้อน

1. JSON.PARSE() วิธีการ

วิธีการ JSON.parse() สามารถแยกวิเคราะห์สตริงที่จัดรูปแบบ JSON ลงในวัตถุหรืออาร์เรย์ JavaScript นี่เป็นสิ่งสำคัญอย่างยิ่งสำหรับการพัฒนาส่วนหน้า เนื่องจากข้อมูลที่ได้รับจากเซิร์ฟเวอร์มักจะอยู่ในรูปของสตริง JSON และส่วนหน้าจำเป็นต้องแปลงข้อมูลนี้เป็นออบเจ็กต์หรืออาร์เรย์ที่ JavaScript สามารถใช้งานได้ ขั้นแรก เพียงเรียก JSON.parse() และส่งสตริง JSON เป็นอาร์กิวเมนต์เพื่อรับอาร์เรย์หรืออ็อบเจ็กต์ JavaScript

ขั้นตอนเฉพาะรวมถึงการรับสตริงที่จัดรูปแบบ JSON จากเซิร์ฟเวอร์ จากนั้นแยกวิเคราะห์โดยใช้ JSON.parse() ตัวอย่างเช่น หากคุณมีการแสดงสตริง JSON ของรายชื่อผู้ใช้ คุณสามารถส่งสตริงนี้ไปที่ JSON.parse() ซึ่งส่งผลให้มีอาร์เรย์ JavaScript โดยที่แต่ละองค์ประกอบอาร์เรย์เป็นอ็อบเจ็กต์ User

const jsonString = '[{ชื่อ: จอห์น โด อายุ: 30}, {ชื่อ: เจน โด อายุ: 25}]';

const jsonArray = JSON.parse(jsonString);

console.log(jsonArray);

// เอาท์พุต: [ { ชื่อ: 'John Doe', อายุ: 30 }, { ชื่อ: 'Jane Doe', อายุ: 25 } ]

2. OBJECT.KEYS() วิธีการ

เมธอด Object.keys() มีประโยชน์มากเมื่อคุณมีออบเจ็กต์ JSON และต้องการแปลงคีย์หรือค่าของออบเจ็กต์ให้เป็นอาร์เรย์ เมธอดนี้ส่งคืนอาร์เรย์ที่มีชื่อของคุณสมบัติที่นับได้ทั้งหมดของอ็อบเจ็กต์ที่กำหนด

การดำเนินการโดยละเอียดคือการใช้ Object.keys() ก่อนเพื่อรับคีย์ทั้งหมดของออบเจ็กต์ จากนั้นรับค่าที่เกี่ยวข้องโดยการแมปคีย์เหล่านี้ และสุดท้ายจึงสร้างอาร์เรย์ใหม่ เทคนิคนี้มีประโยชน์สำหรับการแปลงข้อมูลออบเจ็กต์ JSON เป็นรูปแบบอาร์เรย์ เพื่อให้สามารถจัดการโดยใช้วิธีการต่างๆ ของอาร์เรย์ได้

const userObject = { 1: John Doe, 2: Jane Doe };

const keyArray = Object.keys (userObject);

console.log(คีย์อาร์เรย์);

// เอาท์พุต: ['1', '2']

constvalueArray = keyArray.map(คีย์ => userObject[คีย์]);

console.log(valuesArray);

// เอาท์พุต: ['John Doe', 'Jane Doe']

3. OBJECT.ENTRIES() วิธีการ

ES6 แนะนำเมธอด Object.entries() ซึ่งเป็นอีกวิธีง่ายๆ ในการแปลงอ็อบเจ็กต์ JSON ให้เป็นอาร์เรย์ โดยจะส่งกลับอาร์เรย์ แต่ละองค์ประกอบในอาร์เรย์เป็นอีกอาร์เรย์หนึ่งที่มีสององค์ประกอบ องค์ประกอบแรกคือคีย์ของออบเจ็กต์ และองค์ประกอบที่สองคือค่าที่สอดคล้องกัน

คุณสามารถรับอาร์เรย์สองมิติได้โดยตรงโดยใช้เมธอด Object.entries() ซึ่งเหมาะมากสำหรับสถานการณ์ที่ต้องการการจัดการคีย์และค่าพร้อมกัน

const userObject = { 1: John Doe, 2: Jane Doe };

const entryArray = Object.entries (userObject);

console.log(รายการอาร์เรย์);

// เอาท์พุต: [ ['1', 'John Doe'], ['2', 'Jane Doe'] ]

4. ใช้วิธีการอาร์เรย์เพื่อประมวลผลข้อมูลที่แปลงแล้ว

เมื่อข้อมูล JSON ถูกแปลงเป็นอาร์เรย์ ข้อมูลจะถูกประมวลผลเพิ่มเติมโดยใช้วิธีการที่หลากหลายที่มีให้โดยอาร์เรย์ JavaScript ตัวอย่างเช่น ใช้ฟังก์ชันลำดับที่สูงกว่า เช่น map(), filter() และ lower() เพื่อสำรวจ กรอง และสะสมอาร์เรย์

วิธีดำเนินการต่างๆ ของอาร์เรย์สามารถใช้ตรรกะการประมวลผลข้อมูลที่ซับซ้อนได้ สามารถใช้เมธอด map() เพื่อแปลงแต่ละองค์ประกอบของอาเรย์ได้ เมธอด filter() สามารถกรององค์ประกอบในอาเรย์ที่ตรงตามเงื่อนไขตามเงื่อนไขได้ และเมธอดลด () สามารถประมวลผลองค์ประกอบในอาเรย์แบบสะสมได้ อาร์เรย์เพื่อให้ทราบถึงการเปลี่ยนแปลงจากอาร์เรย์ไปเป็นการแปลงค่าเดียว

const jsonArray = [{'id': 1, 'คะแนน': 90}, {'id': 2, 'คะแนน': 80}, {'id': 3, 'คะแนน': 85}];

// ใช้ map() เพื่อเพิ่มคะแนน

const เพิ่มคะแนน = jsonArray.map(ผู้ใช้ => ({ ...ผู้ใช้, คะแนน: user.score + 10 }));

console.log(คะแนนที่เพิ่มขึ้น);

// เอาท์พุต: [{id: 1, คะแนน: 100}, {id: 2, คะแนน: 90}, {id: 3, คะแนน: 95}]

// ใช้ filter() เพื่อกรองผู้ใช้ที่มีคะแนนเกิน 85 ออก

const highScores = addedScores.filter (ผู้ใช้ => user.score > 85);

console.log(คะแนนสูง);

// เอาท์พุต: [{id: 1, คะแนน: 100}, {id: 3, คะแนน: 95}]

// ใช้คำสั่งลด() เพื่อคำนวณคะแนนรวม

const TotalScore = addedScores.reduce((ทั้งหมด, ผู้ใช้) => รวม + user.score, 0);

console.log(คะแนนรวม);

// เอาท์พุต: 285

ด้วยวิธีการข้างต้น ตั้งแต่ JSON.parse() ไปจนถึงการประมวลผลวิธีอาเรย์ คุณสามารถบรรลุการประมวลผลเชิงลึกตั้งแต่ข้อมูล JSON ไปจนถึงอาเรย์ และอาเรย์ ทำให้เกิดกระบวนการประมวลผลข้อมูลที่มีประสิทธิภาพ นี่ไม่ใช่แค่ปัญหาด้านเทคนิคสำหรับการพัฒนาส่วนหน้าเท่านั้น แต่ยังเป็นโซลูชันที่สามารถปรับปรุงความยืดหยุ่นและประสิทธิภาพของการดำเนินงานข้อมูลได้อีกด้วย

คำถามที่พบบ่อยที่เกี่ยวข้อง:

ถาม: จะแปลงข้อมูล JSON ในโปรเจ็กต์ JavaScript ส่วนหน้าเป็นอาร์เรย์ได้อย่างไร

ตอบ: ในโปรเจ็กต์ JavaScript ส่วนหน้า คุณสามารถใช้เมธอด JSON.parse() เพื่อแปลงข้อมูล JSON ให้เป็นอาร์เรย์ได้ วิธีนี้จะแยกวิเคราะห์สตริง JSON ลงในอ็อบเจ็กต์หรืออาร์เรย์ JavaScript ซึ่งคุณสามารถใช้เป็นอาร์เรย์สำหรับการดำเนินการเพิ่มเติมได้ ตัวอย่างเช่น คุณสามารถใช้โค้ดต่อไปนี้เพื่อแปลงข้อมูล JSON เป็นอาร์เรย์:

const jsonStr = '[1, 2, 3, 4, 5]'; // สตริงข้อมูล JSON const jsonArray = JSON.parse(jsonStr); // แปลงข้อมูล JSON เป็น array console.log(jsonArray); ผลลัพธ์ที่ได้คือ: [1, 2, 3, 4, 5]

ถาม: จะเข้าถึงองค์ประกอบของอาร์เรย์ JSON ที่แปลงแล้วใน JavaScript ได้อย่างไร

ตอบ: ใน JavaScript องค์ประกอบของอาร์เรย์ JSON ที่แปลงแล้วสามารถเข้าถึงได้โดยใช้ดัชนี ดัชนีเริ่มต้นจาก 0 ซึ่งแสดงถึงองค์ประกอบแรกในอาร์เรย์ ตัวอย่างเช่น สมมติว่าคุณมีอาร์เรย์ JSON ที่แปลงแล้วดังนี้:

const jsonArray = [1, 2, 3, 4, 5];

คุณสามารถเข้าถึงองค์ประกอบในตำแหน่งเฉพาะในอาร์เรย์ได้โดยใช้ไวยากรณ์ต่อไปนี้:

console.log(jsonArray[0]); // ผลลัพธ์ที่ได้คือ: 1console.log(jsonArray[2]); // ผลลัพธ์ที่ได้คือ: 3console.log(jsonArray[4]); // ผลลัพธ์ที่ได้คือ : 5

ถาม: วิธีจัดการกับการแปลงอาร์เรย์ที่ซ้อนกันใน JSON

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

const jsonData = '{ชื่อ: John, อายุ: 30, ความสนใจ: [การเข้ารหัส, การอ่าน, เพลง]}'; const jsonObject = JSON.parse(jsonData); // แยกวิเคราะห์ข้อมูล JSON ลงในฟังก์ชันออบเจ็กต์ JavaScript ConvertNestedArray(obj) { for (ให้คีย์ใน obj) { if (Array.isArray(obj[key])) { obj[key] = Array.from(obj[key]); // แปลงอาร์เรย์ที่ซ้อนกันเป็นอาร์เรย์สามัญ} else if (typeof obj[key] === 'object') { ConvertNestedArray(obj[key]); // ประมวลผลวัตถุที่ซ้อนกันแบบเรียกซ้ำ} }}convertNestedArray(jsonObject); // แปลงอาร์เรย์ที่ซ้อนกัน array console.log(jsonObject.interests); //ผลลัพธ์ที่ได้คือ: [การเข้ารหัส การอ่าน เพลง]

ฉันหวังว่าบทความนี้จะช่วยให้คุณเข้าใจและใช้วิธีการเหล่านี้ได้ดีขึ้น และปรับปรุงประสิทธิภาพการพัฒนาส่วนหน้าของคุณ! หากคุณมีคำถามใด ๆ โปรดฝากข้อความไว้ในพื้นที่แสดงความคิดเห็น