Rumah > hujung hadapan web > tutorial js > JSON untuk pembelajaran dan pemahaman JavaScript (perkongsian ringkasan)

JSON untuk pembelajaran dan pemahaman JavaScript (perkongsian ringkasan)

WBOY
Lepaskan: 2022-03-23 14:01:00
ke hadapan
1846 orang telah melayarinya

Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript terutamanya memperkenalkan isu berkaitan JSON, termasuk objek JSON, tatasusunan JSON dan rentetan JSON, dsb. Saya harap ia dapat membantu semua orang.

JSON untuk pembelajaran dan pemahaman JavaScript (perkongsian ringkasan)

Cadangan berkaitan: Tutorial javascript

1. Objek JSON

Penerangan tugasan

Tugas untuk tahap ini: Berlatih mentakrifkan objek JSON dalam JavaScript.

Keperluan khusus adalah seperti berikut:

  • Tentukan objek JSON JSONObject, yang mempunyai tiga atribut: key1, key2 dan key3 parameter a, b dan c;

  • Padamkan atribut bernama key3; nilai setiap Rentetan atribut yang dibentuk dengan menggabungkan nilai, dipisahkan oleh

  • Memandangkan JSON digunakan untuk menghantar data, ia mesti menyimpan data terlebih dahulu memerlukan format data tertentu,

    Format data JSON yang biasa digunakan termasuk objek JSON, tatasusunan JSON dan rentetan JSON.

Apakah objek JSON? Objek JSON (biasanya dipanggil JSON) ialah format pertukaran

yang digunakan untuk menyimpan dan menghantar data. Contohnya adalah seperti berikut:

Ini adalah objek json yang mudah, peraturannya ialah: 文本数据

{"name":"Jerry", "age":15}
Salin selepas log masuk
data wujud dalam bentuk

; > data Pisahkan mereka dengan koma;

    kurungan kerinting menunjukkan menyimpan objek;
  • 键/值对
  • Perbezaan antara objek JSON dan objek Javascript
  • JSON adalah berdasarkan sintaks JavaScript, jadi terdapat juga konsep objek dalam JSON, tetapi terdapat beberapa perbezaan kecil daripada objek dalam JavaScript.
  • Tentukan objek JavaScript:

  1. Tentukan objek JSON:
var myObject = {
    id:1,
    name:"Peter Bruce",
    "first name":"Bruce",
    display:function() {
                console.log(this.name);
            }}
Salin selepas log masuk
  1. Tiga perbezaan:
{"id":1,"name":"Peter Bruce","first name":"Bruce"}
Salin selepas log masuk
(1)
    Nama atribut (kunci)
  1. objek mesti disertakan dalam petikan berganda , manakala objek JavaScript adalah percuma kecuali nama atribut dengan ruang dan nama atribut dengan tanda sempang - di tengah mesti disertakan dalam petikan berganda; (2) tidak boleh masuk Kaedah
  2. ditakrifkan dalam objek JSON, tetapi dalam
; (3)
Objek JSON boleh dikendalikan oleh banyak bahasa, manakala objek JavaScript hanya boleh dikenali oleh JS sendiri

. JSON
Kaedah mentakrifkan objek JSON adalah seperti berikut: JavaScript对象
disertakan dengan , yang mengandungi beberapa atribut nama dan nilai atribut. Pasangan nilai kunci yang dibentuk dipisahkan oleh , dan nama atribut dan nilai atribut dipisahkan oleh

Nilai atribut boleh menjadi mana-mana jenis data berikut: nombor, rentetan, tatasusunan JSON, objek JSON , null. Contohnya:
  1. Situasi di mana nilai atribut ialah tatasusunan JSON atau objek JSON adalah lebih rumit sedikit, yang akan diperkenalkan dalam peringkat berikut. Menggunakan objek JSON dalam JavaScript
Semua bahasa ​​yang menyokong JSON boleh menggunakan objek JSON Di sini kami hanya memperkenalkan cara menggunakan objek JSON dalam JavaScript.

{}:

Tentukan objek JSON dalam JavaScript:
 {"a":1,"b":2.12,"c":true,"d":"string","e":null};
Salin selepas log masuk

Untuk mengendalikan atribut, gunakan

atau
    :
var jsonObject = {"name":"js","number":2};
Salin selepas log masuk
Untuk memadamkan atribut, gunakan padam:
  • .[]
console.log(jsonObject.name);
//读属性,输出jsconsole.log(jsonObject["name"]);
//读属性,输出jsjsonObject.name = "javascript";
//写属性,给name属性赋值javascript
Salin selepas log masuk
Untuk melintasi atribut, gunakan untuk gelung -in:
  • Fail kod
var jsonObject = {"name":"js","number":2};
delete jsonObject.name;
//删除name属性
Salin selepas log masuk
    2. Tatasusunan JSON
  • Perihalan tugas
Tugas dalam tahap ini: Tentukan dan manipulasi nilai dalam pasangan nilai kunci JSON.
var jsonObject = {"name":"js","number":2};for(att in jsonObject) {
  console.log(jsonObject[att]);
  //依次输出js、2}
Salin selepas log masuk

Keperluan khusus adalah seperti berikut:
function mainJs(a,b,c) {
	//请在此处编写代码
	/********** Begin **********/
    var JSONObject = {"key1":a,"key2":b,"key3":c};
    delete JSONObject.key3;
    return a+","+b;
	/********** End **********/}
Salin selepas log masuk

Diketahui bahawa nilai atribut ketiga myJson ialah tatasusunan, parameter a ialah nombor, dan ia diperlukan untuk menambah elemen pertama dalam tatasusunan (Elemen ini adalah semua jenis rentetan) Sambungkan mereka bersama-sama, pisahkan elemen dengan,, dan kembalikan rentetan yang disambungkan

Sebagai contoh, apabila a ialah 2 , anda perlu mengembalikan js, java.

Nilai (nilai) yang sepadan dengan atribut JSON ialah tatasusunan

Nilai (nilai) dalam pasangan nilai kunci JSON boleh menjadi tatasusunan
  • Contohnya:
Atribut bigCity mempunyai berbilang nilai, yang diletakkan dalam tatasusunan.

Dalam contoh di atas, setiap elemen tatasusunan ialah rentetan. Malah, setiap elemen tatasusunan
    juga boleh menjadi objek json yang lain
  • . Contohnya:

Nilai atribut skor di atas ialah tatasusunan, dan setiap elemen tatasusunan ini ialah objek json.

{"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong"]}
Salin selepas log masuk
Sesetengah operasi pada tatasusunan

Elemen membaca dan menulis:

{"class":"高三一班","studentNumber":70,"score":[
    {"name":"LiMing","score":128},
    {"name":"ZhangHua","score":134},
    {"name":"ShenLu","score":112}]}
Salin selepas log masuk

Merentasi:
  1. Fail kod
var myJson = {"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong"]}console.log(myJson.bigCity[1]);
//打印出ShanghaimyJson.bigCity[0] = "GuangZhou";
//第一个元素被赋值为GuangZhou
Salin selepas log masuk
[Kaedah pertama ditulis kemudian saya menggunakan kaedah kedua di bawah kerana saya tidak boleh melakukannya pada masa itu untuk mengeluarkannya secara langsung】
  1. 3. Rentetan JSON
Perihalan tugas
var myJson = {"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong"]}for(var i = 0;i < myJson.bigCity.length;i++) {
    console.log(myJson.bigCity[i]);//依次输出Peking,Shanghai,ShenZhen,HongKong}
Salin selepas log masuk

Tugas tahap ini: mengamalkan rentetan JSON dan Penukaran JavaScript objek kepada dan dari satu sama lain.

var myJson = {
    "category":"computer",
    "detail":"programming",
    "language":[
    "js","java","php","python","c"
    ]}function mainJs(a) {
    a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
    var b = "";
    for(var i=0;i<a;i++){
        b = b+myJson.language[i]+",";
    }
    return b.slice(0,-1);
	/********** End **********/}
Salin selepas log masuk
Keperluan khusus adalah seperti berikut:
var myJson = {
    "category":"computer",
    "detail":"programming",
    "language":[
    "js","java","php","python","c"
    ]}function mainJs(a) {
    a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
    if(a==1){
        return myJson.language[0];
    }
    if(a==2){
        return myJson.language[0]+","+myJson.language[1];
    }
    if(a==3){
        return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2];
    }
    if(a==4){
        return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2]+","+myJson.language[3];
    }
    if(a==5){
        return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2]+","+myJson.language[3]+","+myJson.language[4];
    }
	/********** End **********/}
Salin selepas log masuk
  1. 先将JSON字符串JSONString转换为JavaScript对象JSONObject;
  2. 然后将JSONObject的key1属性的值设置为mainJs()函数的参数a;
  3. 最后将JSONObject转换为JSON字符串,并返回该字符串

在前端和后台之间传递数据可以使用JSON,但是实际上传递的是JSON字符串,而JSON对象是不可以直接进行传递的。

JSON字符串

JSON字符串就是在JSON对象两边套上'形成的字符串,如:

var JSONObject  = {"k1":"v1","k2":"v2"};
//JSON对象var JSONString1 = '{"k1":"v1","k2":"v2"}';
//JSON字符串
Salin selepas log masuk

上面的JSONSring1就是JSON字符串,可以直接从前端传到后台或者后台传到前端。

当JavaScript收到从后台传来的JSON字符串后,怎么把它变成JSON对象方便处理呢?

JSON字符串到JavaScript对象

JSON.parse(a,b)方法将JSON字符串a转换为JavaScript对象。b是一个可选的函数参数。

var JSONString1 = '{"k1":"v1","k2":"v2"}';console.log(JSON.parse(JSONString1));
//输出Object {k1: "v1", k2: "v2"}
Salin selepas log masuk

函数参数b按从里到外的顺序作用在对象的所有属性上,最后一个作用的是对象本身:

//对象的每一个属性的值加1var text = '{ "key1":1, "key2":2, "key3":2.2}';var obj = JSON.parse(text, function (key, value) {
    if(key === '')//当遇到对象本身时,不进行加1操作
        return value;
    return value+1;//对属性值加1});console.log(obj);
    //输出Object {key1: 2, key2: 3, key3: 3.2}
Salin selepas log masuk

如上面所示,函数的参数有两个,其中key表示属性的名字,value表示属性的值,当遇到对象本身时,key的值为'',即空字符串。

JSON对象转换为JSON字符串

JSON.stringify(a,b,c)a是待转换的JSON对象,b和c为可选参数。

var JSONObject = {"k1":"v1","k2":"v2"};
JSON.stringify(JSONObject);
//JSON对象转换为JSON字符串
Salin selepas log masuk

参数b为函数时,该函数按照从里到外的顺序处理JSON对象的每一个属性,最后一个处理的是JSON对象本身,处理完后再转为JSON字符串:

//对象的所有属性值加1,再转为字符串var JSONObject = {"k1":1,"k2":2.2};var JSONString = JSON.stringify(JSONObject,function(k,v){
    if(k === '')//处理到了JSON对象本身
        return v;
    return v+1;//所有的属性的值加1});console.log(JSONString);
    //输出{"k1":2,"k2":3.2}
Salin selepas log masuk

参数b还可以是数组,数组存储的是属性的名字,用来指定只转换哪些属性:

//转换对象中特定的属性
var JSONObject = {"k1":1,"k2":2.2,"k3":3};var JSONString = JSON.stringify(JSONObject,["k1","k2"]);console.log(JSONString);
//输出{"k1":1,"k2":2.2}
Salin selepas log masuk

这里简单介绍一下c:

var str = ["name":"Tom","age":16];var obj1 = JSON.stringify(str);
var obj2 = JSON.stringify(str,null,4);console.log(obj1);  
//输出{"name":"Tom","age":16}console.log(obj2); 
//输出
//{
//    "name": "Tom",
//    "age": 16
//}
Salin selepas log masuk

参数c:文本添加缩进、空格和换行符,如果 c 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 c 大于 10,则文本缩进 10 个空格。

代码文件

var JSONString = '{"key1":"value1","key2":"value2"}';function mainJs(a) {
	//请在此处编写代码
	/********** Begin **********/
    var JSONObject = JSON.parse(JSONString);
    JSONObject["key1"] = a;
    JSONObject.key1 = a;
    return JSON.stringify(JSONObject);
	/********** End **********/}
Salin selepas log masuk

相关推荐:javascript学习教程

Atas ialah kandungan terperinci JSON untuk pembelajaran dan pemahaman JavaScript (perkongsian ringkasan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:csdn.net
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan