วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: เข้าสู่การเรียนรู้
คำแนะนำที่เกี่ยวข้อง: บทช่วยสอน JavaScript
1.งานสำหรับระดับนี้: ฝึกกำหนดอ็อบเจ็กต์ JSON ใน JavaScript
ข้อกำหนดเฉพาะมีดังนี้:
กำหนดวัตถุ JSON JSONObject ซึ่งมีสามคุณลักษณะ: key1, key2 และ key3 ซึ่งมีค่าเป็นพารามิเตอร์ a, b และ c ตามลำดับ
ลบแอตทริบิวต์ชื่อ key3
หลังจากการลบเสร็จสิ้น แอ็ตทริบิวต์ที่เหลือทั้งหมดจะส่งคืนสตริงที่สร้างโดยการเชื่อมค่าของแต่ละแอททริบิวต์โดยคั่นด้วย , ไว้ตรงกลาง
เนื่องจาก JSON ใช้ในการส่งข้อมูลจึงต้องมีการจัดเก็บข้อมูลก่อนจึงต้องใช้รูปแบบข้อมูลที่ แน่นอน รูปแบบข้อมูลสำหรับ JSON ได้แก่ ออบเจ็กต์ JSON, อาร์เรย์ JSON และสตริง JSON
วัตถุ JSON (โดยทั่วไปเรียกว่า JSON) เป็นรูปแบบการแลกเปลี่ยน文本数据ที่ใช้ในการจัดเก็บและส่งข้อมูล ตัวอย่างมีดังต่อไปนี้:
{"name":Jerry", "age":15} นี่คือออบเจ็กต์ json แบบธรรมดา กฎของมันคือ:
键/值对;JSON ขึ้นอยู่กับไวยากรณ์ JavaScript ดังนั้นจึงมีแนวคิดของออบเจ็กต์ใน JSON เช่นกัน แต่มีความแตกต่างเล็กน้อยจากออบเจ็กต์ใน JavaScript
var myObject = {
รหัส:1,
ชื่อ:"ปีเตอร์ บรูซ",
"ชื่อ": "บรูซ",
จอแสดงผล: ฟังก์ชั่น () {
console.log(this.name);
}} {"id":1,"name":Peter Bruce","ชื่อ": "Bruce"} (1) ชื่อแอตทริบิวต์ (คีย์) ของวัตถุ JSON จะต้องอยู่ในเครื่องหมายคำพูดคู่ ในขณะที่วัตถุ JavaScript นั้นกำหนดเองได้ ยกเว้นชื่อแอตทริบิวต์ที่มีการเว้นวรรคและชื่อแอตทริบิวต์ที่มีเครื่องหมายยัติภังค์อยู่ตรงกลางจะต้องอยู่ในเครื่องหมายคำพูดคู่
(2) ไม่สามารถกำหนดวิธีการในวัตถุ JSON ได้ แต่สามารถกำหนดได้ใน JavaScript对象
(3) ออบเจ็กต์ JSON สามารถใช้งานได้หลายภาษา ในขณะที่ออบเจ็กต์ JavaScript เท่านั้นที่ JS รู้จักเท่านั้น
ปิดล้อมด้วย {} ภายในเป็นคู่คีย์-ค่าที่ประกอบด้วยชื่อแอตทริบิวต์และค่าแอตทริบิวต์หลายรายการ คู่คีย์-ค่าจะถูกคั่นด้วย และชื่อแอตทริบิวต์และค่าแอตทริบิวต์ ถูกคั่นด้วย : คุณลักษณะ ค่าสามารถเป็นประเภทข้อมูลใดก็ได้ต่อไปนี้: หมายเลข, สตริง, อาร์เรย์ JSON, อ็อบเจ็กต์ JSON, null ตัวอย่างเช่น:
{"a":1,"b":2.12,"c":true,"d":string","e":null}; สถานการณ์ที่ค่าแอตทริบิวต์เป็นอาร์เรย์ JSON หรืออ็อบเจ็กต์ JSON จะมีความซับซ้อนมากขึ้นเล็กน้อย
ภาษาใดๆ ที่รองรับ JSON สามารถใช้ออบเจ็กต์ JSON ในที่นี้เราจะแนะนำเฉพาะวิธีใช้ออบเจ็กต์ JSON ใน JavaScript เท่านั้น
var jsonObject = {"name": "js":2}; . หรือ [] :console.log(jsonObject.name); //อ่านแอตทริบิวต์และเอาต์พุต jsconsole.log(jsonObject["name"]); //อ่านคุณสมบัติและเอาต์พุต jsjsonObject.name = "javascript"; //เขียนแอตทริบิวต์ กำหนดค่าให้กับแอตทริบิวต์ name และใช้ javascript
var jsonObject = {"name": "js", "number":2};
ลบ jsonObject.name;
//ลบแอตทริบิวต์ name var jsonObject = {"name": "js","number":2};for(att in jsonObject) {
console.log(jsonObject[อัตต์]);
//Output js, 2} ฟังก์ชันลำดับ mainJs(a,b,c) {
//กรุณาเขียนโค้ดที่นี่ /******** Begin **********/
var JSONObject = {"key1":a,"key2":b,"key3":c};
ลบ JSONObject.key3;
กลับ+,"+b;
/********** สิ้นสุด ************/ 2. งานระดับนี้: กำหนดและจัดการค่าในคู่คีย์-ค่า JSON
ข้อกำหนดเฉพาะมีดังนี้:
ตัวอย่างเช่น:
{"country": "China" "population": 1.3billion แอตทริบิวต์ ","bigCity":[ "Peking", "Shanghai", "ShenZhen", "HongKong"]}
bigCity มีหลายค่าซึ่งวางอยู่ในอาร์เรย์
ในตัวอย่างข้างต้น แต่ละองค์ประกอบของอาร์เรย์จะเป็นสตริง ที่จริงแล้ว แต่ละองค์ประกอบของอาร์เรย์สามารถเป็นวัตถุ json อื่นได้ ตัวอย่างเช่น:
{"class":เกรด 3 ชั้นเรียน 1","studentNumber":70,"score":[
{"name": "หลี่หมิง" "คะแนน":128},
{"name": "จางฮวา", "คะแนน":134},
{"name": "ShenLu" "score":112}]} ค่าของแอตทริบิวต์คะแนนด้านบนคืออาร์เรย์ และแต่ละองค์ประกอบของอาร์เรย์นี้คืออ็อบเจ็กต์ json
var myJson = {"country": "จีน" "ประชากร": 1.3 พันล้าน "เมืองใหญ่": ["ปักกิ่ง" "เซี่ยงไฮ้" "เซินเจิ้น" "ฮ่องกง" "] }console.log(myJson.bigCity[1]);
//พิมพ์ ShanghaimyJson.bigCity[0] = "GuangZhou";
//องค์ประกอบแรกถูกกำหนดเป็นค่า var myJson = {"country": "จีน" "ประชากร": 1.3 พันล้าน "เมืองใหญ่":["ปักกิ่ง" "เซี่ยงไฮ้" "เซินเจิ้น", "ฮ่องกง"]}สำหรับ(var i = 0;i < myJson.bigCity.length;i++) {
console.log(myJson.bigCity[i]);//Output Peking, Shanghai, ShenZhen, HongKong} [วิธีแรกถูกเขียนในภายหลัง และวิธีที่สองด้านล่างถูกใช้ในตอนเริ่มต้น เพราะในเวลานั้น ถ้าฉันทำไม่ได้ ฉันแค่อยากส่งออกมันโดยตรง]
var myJson = {
"หมวดหมู่": "คอมพิวเตอร์",
"รายละเอียด"การเขียนโปรแกรม",
"ภาษา":[
"js", "java", "php", "หลาม", "c"
]}ฟังก์ชัน mainJs(a) {
ก = parseInt(ก);
//กรุณาเขียนโค้ดที่นี่ /******** Begin **********/
วาร์ ข = "";
สำหรับ(var i=0;i<a;i++){
b = b+myJson.ภาษา[i]+",";
-
กลับ b.slice (0,-1);
/********** สิ้นสุด ********/} var myJson = {
"หมวดหมู่": "คอมพิวเตอร์",
"รายละเอียด"การเขียนโปรแกรม",
"ภาษา":[
"js", "java", "php", "หลาม", "c"
]}ฟังก์ชัน mainJs(a) {
ก = parseInt(ก);
//กรุณาเขียนโค้ดที่นี่ /******** Begin **********/
ถ้า(ก==1){
กลับ myJson.ภาษา[0];
-
ถ้า(ก==2){
กลับ myJson.ภาษา[0]+","+myJson.ภาษา[1];
-
ถ้า(ก==3){
กลับ myJson.ภาษา[0]+","+myJson.ภาษา[1]+","+myJson.ภาษา[2];
-
ถ้า(ก==4){
กลับ myJson.ภาษา[0]+,”+myJson.ภาษา[1]+,”+myJson.ภาษา[2]+,”+myJson.ภาษา[3];
-
ถ้า(ก==5){
กลับ myJson.ภาษา[0]+","+myJson.ภาษา[1]+","+myJson.ภาษา[2]+","+myJson.ภาษา[3]+","+myJson.ภาษา[4 ];
-
/********** สิ้นสุด ************/} 3. งาน: ฝึกแปลงสตริง JSON และออบเจ็กต์ JavaScript ให้เป็นกันและกัน
ข้อกำหนดเฉพาะมีดังนี้
ไปยังส่วนหน้า JSON สามารถใช้เพื่อถ่ายโอนข้อมูลไปและกลับจากพื้นหลังได้ แต่สิ่งที่ถ่ายโอนจริงคือสตริง JSON และวัตถุ JSON ไม่สามารถถ่ายโอนได้โดยตรง
สตริง JSON เป็นสตริงที่สร้างขึ้นโดยการใส่ ' ไว้ที่ทั้งสองด้านของออบเจ็กต์ JSON เช่น:
var JSONObject = {"k1":v1", "k2": v2"};
//วัตถุ JSON var JSONString1 = '{"k1":v1","k2": "v2"}';
// JSONSring1 เหนือสตริง JSON คือสตริง JSON ซึ่งสามารถส่งผ่านโดยตรงจากส่วนหน้าไปยังส่วนหลังหรือส่วนหลังไปยังส่วนหน้า
เมื่อ JavaScript ได้รับสตริง JSON ที่ส่งจากพื้นหลัง จะเปลี่ยนให้เป็นวัตถุ JSON เพื่อการประมวลผลที่ง่ายดายได้อย่างไร
เมธอด JSON.parse(a,b) จะแปลงสตริง JSON a เป็นอ็อบเจ็กต์ JavaScript b คือพารามิเตอร์ฟังก์ชันทางเลือก
var JSONString1 = '{"k1":v1","k2":v2"}';console.log(JSON.parse(JSONString1));
//Output Object {k1: "v1", k2: "v2"} พารามิเตอร์ฟังก์ชัน b ทำหน้าที่กับคุณสมบัติทั้งหมดของวัตถุตามลำดับ从里到外และอันสุดท้ายทำหน้าที่กับวัตถุนั้นเอง:
// แต่ละคุณสมบัติของ วัตถุ เพิ่ม 1 ให้กับค่า var text = '{ "key1":1, "key2":2, "key3":2.2}';var obj = JSON.parse(text, function (key, value) {
if(key === '')//เมื่อพบวัตถุนั้น ให้คืนค่าโดยไม่ต้องบวก 1;
return value+1;//เพิ่ม 1 ให้กับค่าแอตทริบิวต์});console.log(obj);
//Output Object {key1: 2, key2: 3, key3: 3.2} ดังที่แสดงไว้ข้างต้น ฟังก์ชันมีพารามิเตอร์สองตัว โดยที่ key แสดงถึงชื่อของแอตทริบิวต์ และ value แสดงถึงค่าของแอตทริบิวต์ เมื่อพบวัตถุนั้นเอง คีย์ ค่าคือ '' ซึ่งเป็นสตริงว่าง
JSON.stringify(a,b,c) , a คือออบเจ็กต์ JSON ที่จะแปลง b และ c เป็นพารามิเตอร์ทางเลือก
var JSONObject = {"k1":v1","k2": "v2"};
JSON.stringify(JSONObject);
//แปลงออบเจ็กต์ JSON เป็นสตริง JSON เมื่อพารามิเตอร์ b เป็นฟังก์ชัน ฟังก์ชันจะประมวลผลแต่ละแอตทริบิวต์ของออบเจ็กต์ JSON ตามลำดับจากภายในสู่ภายนอก ซึ่งประมวลผลแล้วคือออบเจ็กต์ JSON เอง ลงในสตริง JSON ：
// เพิ่ม 1 ให้กับค่าแอตทริบิวต์ทั้งหมดของวัตถุแล้วแปลงเป็นสตริง var JSONObject = {"k1":1,"k2":2.2};var JSONString = JSON.stringify( JSONObject,ฟังก์ชัน(k,v){
if(k === '')//วัตถุ JSON เองได้รับการประมวลผล return v;
กลับ v+1;//เพิ่ม 1 เป็นค่าของแอตทริบิวต์ทั้งหมด});console.log(JSONString);
//Output {"k1":2,"k2":3.2} พารามิเตอร์ b อาจเป็นอาร์เรย์ก็ได้ อาร์เรย์จะเก็บชื่อของแอตทริบิวต์และใช้เพื่อระบุแอตทริบิวต์ที่จะแปลงเท่านั้น:
//แปลงแอตทริบิวต์เฉพาะใน วัตถุ var JSONObject = {"k1":1,"k2":2.2,"k3":3};var JSONString = JSON.stringify(JSONObject,["k1", "k2"]);console.log(JSONString) ;
//Output {"k1":1,"k2":2.2} ต่อไปนี้เป็นคำแนะนำสั้นๆ เกี่ยวกับ c:
var str = ["name"Tom","age":16];var obj1 = JSON.stringify( STR) ;
var obj2 = JSON.stringify(str,null,4);console.log(obj1);
//เอาท์พุต {"ชื่อ"Tom","age":16}console.log(obj2);
//เอาท์พุท//{
// "ชื่อ": "ทอม",
// "อายุ": 16
-พารามิเตอร์ c: เพิ่มการเยื้อง ช่องว่าง และการขึ้นบรรทัดใหม่ให้กับข้อความ หาก c เป็นตัวเลข ข้อความค่าที่ส่งคืนจะถูกเยื้องตามจำนวนช่องว่างที่ระบุในแต่ละระดับ หาก c มากกว่า 10 ข้อความจะถูกเยื้องด้วยช่องว่าง 10 ช่อง
var JSONString = '{"key1":value1","key2":value2"}';function mainJs(a) {
//กรุณาเขียนโค้ดที่นี่ /******** Begin **********/
var JSONObject = JSON.parse(JSONString);
JSONObject["key1"] = ก;
JSONObject.key1 = ก;
กลับ JSON.stringify (JSONObject);
/********** สิ้นสุด ************/} คำแนะนำที่เกี่ยวข้อง: บทช่วยสอนการเรียนรู้ JavaScript
ข้างต้นคือเนื้อหาโดยละเอียดของ JSON (การแบ่งปันสรุป) สำหรับการเรียนรู้และทำความเข้าใจ JavaScript หากต้องการข้อมูลเพิ่มเติม โปรดอ่านบทความ php ที่เกี่ยวข้องอื่นๆ บนเว็บไซต์ภาษาจีน!
