菜单 搜索
首页 前端知识 qml 文件中 JSON的使用

qml 文件中 JSON的使用

2024-05-03 19:05:03 前端知识 前端哥 351 896 我要收藏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 1. Json对象的生成
    • 1.1 从字符串解析，借助函数 JSON.parse(text[, reviver])
    • 1.2 直接通过赋值的方式
  • 2、Json对象的字符串化
    • 2.1 只传入*value*
    • 2.2 replacer 使用
    • 2.3 space 使用
  • 3 Json子对象的操作
    • 3.1 访问子对象,获取子对象的值
      • 3.1.1使用下标的方式,即使用"[]"操作符
      • 3.1.2使用"."操作符访问
    • 3.2.修改已有子对象的值
      • 3.2.1使用下标的方式,即使用"[]"操作符
      • 3.2.2使用"."操作符方式
    • 3.3.新增子对象
      • 3.3.1使用下标的方式,即使用"[]"操作符
      • 3.3.2使用"."操作符方式
    • 3.4.删除已有子对象
      • 3.4.1给要删除的对象赋值为 undefined ,操作方式和修改已有子对象的值方法一致.详见三.2
      • 3.4.2使用 delete 直接删除要删除的对象即可,具体操作是在访问对象的语句前加 delete.
      • 3.4.3json数组内对象的删除
  • 总结

前言

qml 文件代码中少不了使用JSON对象来处理各种字符串或者Json对象，本文简单总结下JSON的常用功能

1. Json对象的生成

1.1 从字符串解析，借助函数 JSON.parse(text[, reviver])

JSON.parse(text, [reviver])

JSON.parse解析时遵循从上到下，从里到外依次解析

para1 : text 为需要解析的字符串
para2 : reviver 为可选的函数参数,回调函数，可以对JSON字符串的每一项进行操作

    function test_parse()
    {
        var jsonStr= "{\"k1\":\"v1\",\"k2\":\"v2\",\"o2\":{\"ok1\":\"ov1\"},\"ak1\":[\"av1\",\"av2\"]}"
        var json = JSON.parse(jsonStr)
        console.log(json)
    }

输出：qml: [object Object]

	function test_parse2()
    {
        var jsonStr="{\"k1\":\"v1\",\"k2\":\"v2\",\"o2\":{\"ok1\":\"ov1\"},\"ak1\":[\"av1\",\"av2\"]}";
        var json=JSON.parse(jsonStr,printJson);
        console.log(json)
    }

    function printJson(k,v){
            console.log("k: "+k);
            console.log("v: "+v);
    }

输出：qml: [object Object]
不清楚为什么没有执行 printJson ？？？

1.2 直接通过赋值的方式

 	function test_json()
    {
        var json={"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"ak1":["av1","av2","aqv3"]}
        console.log(json)
    }

qml: [object Object]

2、Json对象的字符串化

JSON.stringify(value, [replacer], [space])

para1 ：value 需要进行转换的json对象,
para2 ：replacer 可以传入函数也可以传入数组
para3 ：space 格式化输出参数,可以为数字,也可以为其他字符.

2.1 只传入value

var json ={"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
var jsonStr=JSON.stringify(json)
console.log(jsonStr)

//输出如下:
/*
qml: {"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
*/

2.2 replacer 使用

函数接收json子对象的key和value,返回值会对json子对象的值进行修改;返回 undefined时,会略过对应子对象的字符串化.PS 原json对象不会被修改

varvar json ={"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
//返回 undefined 会忽略对应子对象的字符串化,PS 'return'等同于 'return undefined'
//返回其他值 会在字符串化时替换掉对应子对象的值
jsonStr=JSON.stringify(json,function(k,v){
            if(k==="k2"){//忽略对 k2子对象的字符串化
                return undefined
								//return //和return undefined等价
						}
						if(k==="ok1"){//替换初始化的值
                return "change value"
						}
            return v
        })
console.log(jsonStr)
jsonStr=JSON.stringify(json)//原 json不会被改变
console.log(jsonStr)

//输出如下:
/*
qml: {"k1":"v1","o1":{"ok1":"change value"},"a1":["av1","av2"]}
qml: {"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
*/

2.3 space 使用

本质是在每个对象前换行,并根据space填入格式化字符;为数字时,格式化字符为space指定数量的" ",其他字符时,则直接填入指定字符.
填入的格式化字符是相对于上一级而言的,相对上一级的上一级,会插入两遍格式化字符

```cpp
var json ={"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
var jsonStr=JSON.stringify(json,null,1)
console.log("1 space:\n",jsonStr)
jsonStr=JSON.stringify(json,null,4)
console.log("4 space:\n",jsonStr)
jsonStr=JSON.stringify(json,null,'\t')
console.log("\\t:\n",jsonStr)
jsonStr=JSON.stringify(json,null,"format")
console.log("some str:\n",jsonStr)

//输出如下:

/*
qml: 1 space:
 {
 "k1": "v1",
 "k2": "v2",
 "o1": {
  "ok1": "ov1"
 },
 "a1": [
  "av1",
  "av2"
 ]
}
qml: 4 space:
 {
    "k1": "v1",
    "k2": "v2",
    "o1": {
        "ok1": "ov1"
    },
    "a1": [
        "av1",
        "av2"
    ]
}
qml: \t:
 {
	"k1": "v1",
	"k2": "v2",
	"o1": {
		"ok1": "ov1"
	},
	"a1": [
		"av1",
		"av2"
	]
}
qml: some str:
 {
format"k1": "v1",
format"k2": "v2",
format"o1": {
formatformat"ok1": "ov1"
format},
format"a1": [
formatformat"av1",
formatformat"av2"
format]
}
*/

3 Json子对象的操作

3.1 访问子对象,获取子对象的值

3.1.1使用下标的方式,即使用"[]"操作符

直接在"[]"内输入子对象的key值即可,一般对象key值为字符串,数组内则为数组索引

var json ={"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
console.log("k2 :",json["k2"]);
console.log("o1 :",json["o1"]);//直接返回 对象 {"ok1":"ov1"}
console.log("ok1 :",json["o1"]["ok1"]);
console.log("a1 :",json["a1"]);//直接返回 数组 ["av1","av2"]
console.log("av1 :",json["a1"][0]);

//输出如下:

/*
qml: k2 : v2
qml: o1 : [object Object]
qml: ok1 : ov2
qml: a1 : [av1,av2]
qml: av1 : av1
*/

3.1.2使用"."操作符访问

直接在"[]"内输入子对象的key值即可,一般对象key值为字符串,数组内则为数组索引

var json ={"k1":"v1","k2":"v2","o1":{"ok1":"ov2"},"a1":["av1","av2"]}
console.log("k2 :",json.k2);
console.log("o1 :",json.o1);//直接返回 对象 {"ok1":"ov1"}
console.log("ok1 :",json.o1.ok1);
console.log("a1 :",json.a1);//直接返回 数组 ["av1","av2"]
console.log("av1 :",json.a1[0]);//数组内元素不能直接以".0"方式访问

//输出如下:

/*
qml: k2 : v2
qml: o1 : [object Object]
qml: ok1 : ov2
qml: a1 : [av1,av2]
qml: av1 : av1
*/

3.2.修改已有子对象的值

修改子对象的值，和获取的方式一致，只是把对象作为左值就可

3.2.1使用下标的方式,即使用"[]"操作符

直接在"[]"内输入子对象的key值即可,一般对象key值为字符串,数组内则为数组索引，然后直接等号赋值即可

var json ={"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
json["k2"]="new v2";
console.log("change k2 :",JSON.stringify(json));
json["o1"]["ok1"]="new ov1";
console.log("change ok1 :",JSON.stringify(json));
json["o1"]="new o1"
console.log("change o1 :",JSON.stringify(json));
json["a1"][0]="new av1"
console.log("change av1 :",JSON.stringify(json));
json["a1"]="new a1"
console.log("change a1 :",JSON.stringify(json));

//输出如下:

/*
qml: change k2 : {"k1":"v1","k2":"new v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
qml: change ok1 : {"k1":"v1","k2":"new v2","o1":{"ok1":"new ov1"},"a1":["av1","av2"]}
qml: change o1 : {"k1":"v1","k2":"new v2","o1":"new o1","a1":["av1","av2"]}
qml: change av1 : {"k1":"v1","k2":"new v2","o1":"new o1","a1":["new av1","av2"]}
qml: change a1 : {"k1":"v1","k2":"new v2","o1":"new o1","a1":"new a1"}
*/

3.2.2使用"."操作符方式

直接在"[]"内输入子对象的key值即可,一般对象key值为字符串,数组内则为数组索引

var json ={"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
json.k2="new v2";
console.log("change k2 :",JSON.stringify(json));
json.o1.ok1="new ov1";
console.log("change ok1 :",JSON.stringify(json));
json.o1="new o1"
console.log("change o1 :",JSON.stringify(json));
json.a1[0]="new av1"//数组内元素不能直接以".0"方式访问
console.log("change av1 :",JSON.stringify(json));
json.a1="new a1"
console.log("change a1 :",JSON.stringify(json));

//输出如下:

/*
qml: change k2 : {"k1":"v1","k2":"new v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
qml: change ok1 : {"k1":"v1","k2":"new v2","o1":{"ok1":"new ov1"},"a1":["av1","av2"]}
qml: change o1 : {"k1":"v1","k2":"new v2","o1":"new o1","a1":["av1","av2"]}
qml: change av1 : {"k1":"v1","k2":"new v2","o1":"new o1","a1":["new av1","av2"]}
qml: change a1 : {"k1":"v1","k2":"new v2","o1":"new o1","a1":"new a1"}
*/

3.3.新增子对象

新增子对象的值，和修改的方式一致,只是赋值的的对象原本不存在

3.3.1使用下标的方式,即使用"[]"操作符

直接在"[]"内输入子对象的key值即可,一般对象key值为字符串,数组内则为数组索引，然后直接等号赋值即可

var json ={"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
json["k3"]="v3";
console.log("add k3 :",JSON.stringify(json));
json["o2"]={"ok1":"ov1"};
console.log("add o2 :",JSON.stringify(json));
json["a2"]=["av1","av2"]
console.log("add a1 :",JSON.stringify(json));
json["a1"][2]="av3"
console.log("add av3 :",JSON.stringify(json));

//输出如下:

/*
qml: add k3 : {"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"],"k3":"v3"}
qml: add o2 : {"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"],"k3":"v3","o2":{"ok1":"ov1"}}
qml: add a1 : {"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"],"k3":"v3","o2":{"ok1":"ov1"},"a2":["av1","av2"]}
qml: add av3 : {"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2","av3"],"k3":"v3","o2":{"ok1":"ov1"},"a2":["av1","av2"]}
*/

3.3.2使用"."操作符方式

直接在"[]"内输入子对象的key值即可,一般对象key值为字符串,数组内则为数组索引

var json ={"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
json.k3="v3";
console.log("add k3 :",JSON.stringify(json));
json.o2={"ok1":"ov1"};
console.log("add o2 :",JSON.stringify(json));
json.a2=["av1","av2"]
console.log("add a1 :",JSON.stringify(json));
json.a1[2]="av3"
console.log("add av3 :",JSON.stringify(json));

//输出如下:

/*
qml: add k3 : {"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"],"k3":"v3"}
qml: add o2 : {"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"],"k3":"v3","o2":{"ok1":"ov1"}}
qml: add a1 : {"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"],"k3":"v3","o2":{"ok1":"ov1"},"a2":["av1","av2"]}
qml: add av3 : {"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2","av3"],"k3":"v3","o2":{"ok1":"ov1"},"a2":["av1","av2"]}
*/

3.4.删除已有子对象

删除子对象的值，有两种方式

3.4.1给要删除的对象赋值为 undefined ,操作方式和修改已有子对象的值方法一致.详见三.2

//删除示例,只举一个,操作方式和修改已有子对象的值方法一致.详见三.2
var json ={"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
json.k1=undefined
console.log(JSON.stringify(json))

//输出如下:

/*
qml: {"k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
*/

3.4.2使用 delete 直接删除要删除的对象即可,具体操作是在访问对象的语句前加 delete.

//删除示例,只举一个,其他只要把delete 后的替换成其他访问对象语法就好
var json ={"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
delete json.k1
console.log(JSON.stringify(json))

//输出如下:

/*
qml: {"k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
*/

3.4.3json数组内对象的删除

json数组内对象的删除其实和其他删除方式一致,但要多出一个步骤,总的来说json数组内的对象的删除和qml单独一个数组的删除方式是一致的

var json ={"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
json.a1[0]=undefined;
console.log(JSON.stringify(json))
json.a1.splice(0,1)//0指开始索引,1指删除数量
console.log(JSON.stringify(json))

//输出如下:

/*
qml: {"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":[null,"av2"]}
qml: {"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av2"]}
*/

//直接调用splice也可以

var json ={"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av1","av2"]}
json.a1.splice(0,1)
console.log(JSON.stringify(json))

//输出如下:

/*
qml: {"k1":"v1","k2":"v2","o1":{"ok1":"ov1"},"a1":["av2"]}
*/

总结

常用的方法基本就这些。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/6871.html
标签
pyqtqml
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！