JavaScript JSON:คู่มือ

JSON ย่อมาจาก JavaScript Object Notation คือวิธีการจัดเก็บข้อมูล ในออบเจ็กต์ JSON ค่าจะถูกจับคู่กับป้ายกำกับที่เรียกว่าคีย์ ออบเจ็กต์ JSON สามารถจัดเก็บข้อมูลประเภทใดก็ได้ รวมถึงสตริง จำนวนเต็ม และค่า JSON อื่นๆ

JSON เป็นรูปแบบไฟล์มาตรฐานที่ให้คุณจัดเก็บและแบ่งปันข้อมูล ภาษาการเขียนโปรแกรม เช่น JavaScript, Python และ PHP รองรับการจัดการและอ่านข้อมูล JSON

ในคู่มือนี้ เราจะมาศึกษาวิธีการใช้ JavaScript JSON เราจะสำรวจพื้นฐานของรูปแบบ JSON และวิธีที่วัตถุ JSON เปรียบเทียบกับวัตถุ JavaScript

JSON คืออะไร

JSON เป็นวิธีการจัดเก็บและแบ่งปันข้อมูล มันขึ้นอยู่กับไวยากรณ์ของวัตถุ JavaScript ความแตกต่างก็คือ JSON นั้นอิงตามข้อความทั้งหมด ในขณะที่อ็อบเจกต์ไม่ใช่วัตถุ JSON ย่อมาจาก JavaScript Object Notation

แม้ว่า JSON จะอิงตามหลักการจากภาษาการเขียนโปรแกรม JavaScript แต่ก็ใช้ในภาษาอื่นๆ มากมาย เช่น PHP, Java และ Ruby

คุณสามารถเก็บข้อมูล JSON เป็นไฟล์หรือเป็นค่าในโปรแกรมได้ ตัวอย่างเช่น โปรแกรมอาจมีไฟล์ชื่อ mtg_cards.json ซึ่งเก็บรายชื่อการ์ด Magic the Gathering เราสามารถเก็บข้อมูลนั้นไว้ในตัวแปร JavaScript ชื่อ mtg_cards .

นี่คือโครงสร้างสำหรับชิ้นส่วนของข้อมูลที่จัดเก็บไว้ใน JSON:

{
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact"
	"mana": "0"
}

JSON จัดเก็บข้อมูลโดยใช้โครงสร้างที่เรียกว่าคู่คีย์-ค่า คู่คีย์-ค่าคือชิ้นส่วนของข้อมูลที่ใช้โครงสร้างต่อไปนี้:“คีย์”:“ค่า”

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

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

JSON มักเป็น API ในการส่งข้อมูล ตัวอย่างเช่น สมมติว่าคุณใช้ Airtable หรือ Fitbit API คุณจะต้องส่งข้อมูลและอ่านข้อมูลในรูปแบบข้อมูล JSON

วิธีเข้าถึงข้อมูล JavaScript JSON

ในการเข้าถึงข้อมูล JSON ใน JavaScript คุณสามารถใช้วงเล็บเหลี่ยมหรือเครื่องหมายจุด เครื่องหมายวงเล็บเหลี่ยมคล้ายกับวิธีดึงค่าจากอาร์เรย์ JavaScript แทนที่จะระบุตำแหน่งดัชนี คุณระบุชื่อของคีย์ที่มีค่าที่คุณต้องการดึงข้อมูล

พิจารณาออบเจกต์ของเราจากก่อนหน้านี้ ซึ่งขณะนี้จัดรูปแบบเป็นออบเจ็กต์ JSON:

var black_lotus = {
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact",
	"mana": "0"
}

ในตัวอย่างนี้ เราได้กำหนดวัตถุ JSON ให้กับตัวแปร black_lotus . สมมติว่าคุณต้องการค้นหาประเภทการ์ดสำหรับ Black Lotus นี่คือการ์ดต้องห้ามในเกมการ์ดซื้อขาย Magic the Gathering .

วงเล็บเหลี่ยม

เมื่อใช้เครื่องหมายวงเล็บเหลี่ยม เราจะค้นหาประเภทการ์ดของการ์ด Black Lotus ได้

ในการใช้สัญกรณ์นี้ เราต้องระบุชื่อของอ็อบเจ็กต์ที่เราต้องการดึงค่าออกมา จากนั้น เราระบุชื่อของคีย์ที่เกี่ยวข้องกับค่านั้น คุณต้องใส่ชื่อคีย์ในเครื่องหมายคำพูดและวงเล็บเหลี่ยม

รหัสต่อไปนี้ดึงข้อมูลประเภทการ์ดของ Black Lotus:

console.log(black_lotus["card_type"])

รหัสของเราส่งคืน:Mono Artifact . เราได้ใส่เครื่องหมายอัญประกาศชื่อคีย์ของเราสองครั้ง โดยล้อมรอบด้วยวงเล็บเหลี่ยม จากนั้นเราก็ต่อท้ายตัวแปร black_lotus ซึ่งช่วยให้เราเข้าถึงข้อมูลที่จัดเก็บในชื่อ card_type .

เครื่องหมายจุด

เครื่องหมายจุดเป็นที่ที่คุณเข้าถึงวัตถุโดยการระบุชื่อวัตถุ ตามด้วยจุด จากนั้นคุณระบุชื่อของคีย์ที่มีค่าที่คุณต้องการเข้าถึง

ในการเข้าถึงประเภทการ์ดของ Black Lotus โดยใช้เครื่องหมายจุด คุณสามารถใช้รหัสนี้:

console.log(black_lotus.card_type)

รหัสของเราส่งคืน:“Mono Artifact”

เราได้ระบุชื่อของวัตถุของเรา (“black_lotus ”) ตามด้วยคีย์ที่มีค่าที่เราต้องการเข้าถึง (“card_type ”).

การแปลง JSON

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

JSON นั้นง่ายต่อการจัดการในเทคโนโลยีเช่น JavaScript เป็นเรื่องยากมากที่จะดึงค่าทั้งหมดออกจากสตริงธรรมดา

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

ในการแปลงวัตถุเป็นสตริง JSON คุณสามารถใช้ฟังก์ชัน JSON.stringify() สมมติว่าเราต้องการแปลงวัตถุ Black Lotus จากก่อนหน้านี้เป็นสตริง เราสามารถทำได้โดยใช้รหัสนี้:

var black_lotus = {
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact",
	"mana": "0"
}

var string_black_lotus = JSON.stringify(black_lotus)

console.log(string_black_lotus)

รหัสของเราส่งคืนข้อความ JSON ต่อไปนี้:

“{“card_name”:”Black Lotus”,”status”:”banned”,”card_type”:”Mono Artifact”,”mana”:”0″}”

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

var black_lotus_object = JSON.parse(string_black_lotus)

console.log(black_lotus_object)

รหัสนี้ส่งคืน:

{
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact",
	"mana": "0"
}

อย่างที่คุณเห็น ตอนนี้ข้อมูลของเรากลายเป็นวัตถุแล้ว

JSON เทียบกับออบเจ็กต์ JavaScript

สัญกรณ์ JSON อิงตามออบเจ็กต์ JavaScript

เนื่องจาก JSON ได้รับการออกแบบมาให้รองรับในภาษาการเขียนโปรแกรมหลายภาษา จึงไม่เหมือนกับวัตถุ JavaScript ทุกประการ ตัวอย่างเช่น รองรับ JSON ใน PHP และ Python ภาษาการเขียนโปรแกรมแต่ละภาษาที่รองรับ JSON มีการนำไปใช้งานที่ไม่ซ้ำกัน

ในขณะที่คีย์ในออบเจ็กต์ JavaScript ไม่ได้จัดเก็บในเครื่องหมายคำพูด คีย์ในข้อมูล JSON จะต้องเก็บไว้ในเครื่องหมายคำพูด

หากคุณดูในไฟล์ JSON คุณจะเห็นคีย์ทั้งหมดอยู่ในเครื่องหมายคำพูด หากคุณดูที่ออบเจ็กต์ JavaScript คุณจะเห็นคีย์ต่างๆ อาจไม่อยู่ในเครื่องหมายคำพูด

ทั้งวัตถุ JSON และ JavaScript เก็บข้อมูลในโครงสร้างคีย์-ค่า

บทสรุป

JavaScript รองรับการจัดเก็บข้อมูลใน JSON JSON ย่อมาจาก JavaScript Object Notation คือวิธีการจัดเก็บข้อมูลที่เกี่ยวข้องในวัตถุเดียว แต่ละค่าในอ็อบเจ็กต์มีเลเบลของตัวเองหรือที่เรียกว่าคีย์

ตอนนี้คุณมีความรู้ที่จำเป็นในการใช้ JSON ใน JavaScript อย่างมืออาชีพแล้ว!

คุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ JavaScript หรือไม่? ดูคู่มือ How to Learn JavaScript ของเรา คุณจะพบเคล็ดลับยอดนิยมเกี่ยวกับวิธีการเรียนรู้ JavaScript และรายการแหล่งข้อมูลการเรียนรู้สำหรับนักพัฒนาระดับเริ่มต้นและระดับกลาง