likes
comments
collection
share

JavaScript和json

作者站长头像
站长
· 阅读数 68

JSON

​ XML曾经一度成为互联网上传输数据的事实标准。第一代Web服务很大程度上是以XML为基础的，以服务器间通信为主要特征。可是，XML也并非没有批评者。有的人认为XML过于冗余和啰唆。为解决这些问题，也出现了几种方案。不过Web已经朝着它的新方向进发了。​ 2006年，Douglas Crockford在国际互联网工程任务组（IETF，The Internet Engineering Task Force）制定了JavaScript对象简谱（JSON，JavaScript Object Notation）标准，即RFC 4627。但实际上，JSON早在2001年就开始使用了。JSON是JavaScript的严格子集，利用JavaScript中的几种模式来表示结构化数据。Crockford将JSON作为替代XML的一个方案提出，因为JSON可以直接传给eval()而不需要创建DOM。​ 理解JSON最关键的一点是要把它当成一种数据格式，而不是编程语言。JSON不属于JavaScript，它们只是拥有相同的语法而已。JSON也不是只能在JavaScript中使用，它是一种通用数据格式。很多语言都有解析和序列化JSON的内置能力。

JavaScript和json

​ 理论上用户端传输数据到服务器和服务器传输数据到用户端采用json格式，json格式就是字符串。服务器和用户端拿到json可以把json转换为JavaScript格式来执行，也可以把自己的JavaScript转换成json格式来传输

语法

JavaScript和json

​ JSON语法支持三种类型的值，分别是简单值，对象，数组

  • 简单值：字符串、数值、布尔值和null可以在JSON中出现，就像在JavaScript中一样。特殊值undefined不可以。
  • 对象：第一种复杂数据类型，对象表示有序键/值对。每个值可以是简单值，也可以是复杂类型。
  • 数组：第二种复杂数据类型，数组表示可以通过数值索引访问的值的有序列表。数组的值可以是任意类型，包括简单值、对象，甚至其他数组。

注意：

JavaScript和json

​ JSON没有变量、函数或对象实例的概念。JSON的所有记号都只为表示结构化数据，虽然它借用了JavaScript的语法，但是千万不要把它跟JavaScript语言混淆。

解析和序列化

  • Javascript转JSON字符串

    let person = {
    name: "小明",
    address: [
        "China",
        "BeiJing"
    ],
    age: 18,
    birthday: "2008,9,11"
};

let json =JSON.stringify(person);//申明json用来保存JavaScript转换成的json字符串

    ​ console.log(json);

    {"name":"小明","address":["China","BeiJing"],"age":18,"birthday":"2008,9,11"}

    ​ console.log(typeof json);=>string

    在给小明加个女朋友

    let person = {
    name: "小明",       //姓名：小明
    address: [          //地址
        "China",        //中国
        "BeiJing"       //北京
    ],
    age: 18,            //年龄
    birthday: "2008,9,11",//生日
    girlfriend: undefined//女朋友：未定义
};

    ​ 注意：小明还没有女朋友，这里给的是undefined，然后再转换成 JSON 格式

    {"name":"小明","address":["China","BeiJing"],"age":18,"birthday":"2008,9,11"}

    会发现：啥女朋友，连个女朋友的栏位都没有了，切记：在JavaScript中，属性值是undefined，转换成JSON格式会失效，如果必须给undefined这个值，那么必须用字符串的undefined

  • JOSN字符串转JavaScript
let person = {
    name: "小明",       //姓名：小明
    address: [          //地址
        "China",        //中国
        "BeiJing"       //北京
    ],
    age: 18,            //年龄
    birthday: "2008,9,11",//生日
    girlfriend: "undefined"//女朋友：未定义
};

let json = JSON.stringify(person);
console.log(json);
let js = JSON.parse(json);
console.log(js);

这里的json

{"name":"小明","address":["China","BeiJing"],"age":18,"birthday":"2008,9,11","girlfriend":"undefined"}

json转换为JavaScript

{
  name: '小明',
  address: [ 'China', 'BeiJing' ],
  age: 18,
  birthday: '2008,9,11',
  girlfriend: 'undefined'
}

变成一个对象，字符串的undefined刚才说过，想要undefined就先用字符串，后续通过一些操作转换为，正真的undefined值

转换undefined

​ 如果传输的数据用的是json格式，json最终都是转换成JavaScript来运行的，如果想在数据中有undefined这个值，那么必须用字符串的undefined。

{"name":"小明","address":["China","BeiJing"],"age":18,"birthday":"2008,9,11","girlfriend":"undefined"}

​ 这条json数据转换成JavaScript格式的代码来运行，就会发现属性值里面的undefined是一个字符串，与期望的undefined类型的undefined值不符合。

{
  name: '小明',
  address: [ 'China', 'BeiJing' ],
  age: 18,
  birthday: '2008,9,11',
  girlfriend: 'undefined'
}

​ 稍微复杂化一点json数据转换成的JavaScript代码，例如是这样的

let obj = {
    name: "小明",       //姓名：小明
    address: [          //地址
        "China",        //中国
        "BeiJing"       //北京
    ],
    age: 18,            //年龄
    birthday: "2008,9,11",//生日
    girlfriend: "undefined",//女朋友：未定义
    obj: {
        a: 'undefined',
        b: {
            a: "undefined",
            c: {
                a: 'undefined',
                d: {
                    a: 'undefined',
                    b: 12471234,
                    c: function () {
                        console.log(777);
                    }
                }
            }
        }
    }
};

这么复杂的数据，如果手动一条一条修改内部的字符串的undefined显得很不科学，可以手动写一个函数来转换

function conversion(obj) {
    let target = {};//创建一个空对象

    let keys = Object.keys(obj);//对象属性名的数组

    for (const key of keys) {//遍历这个数组

        //给空对象添加属性名和属性值
        target[key] = obj[key];

        //判断这里如果是字符串的undefined，那么就转换为undefined类型的undefined
        if (obj[key] === 'undefined') target[key] = undefined;//--关闭注释就改变原对象  obj[key]=undefined

        //如果判断属性值是一个对象，那么传入这个属性值对象
        if (typeof obj[key] === "object") conversion(obj[key]);
    }

    //返回这个空对象
    return target;
}

这里是不改变原对象，如果原对象还有其他用，怕造成不必要的麻烦，如果想改变原对象只要打开一条注释就可以。

​ 这里可以测试，把刚才的小明传入

let myobj = conversion(obj);

​ json数据中想传undefined，可以改成字符串后面交给JavaScript处理，JavaScript想把数据转换成json格式要小心内部的undefined，也可以通过上面的例子，做一个相反的函数，先把JavaScript中的undefined转换成字符串的undefined，也就是把上面的字符串的undefined改成undefined值，转换函数只是把判断改变一下，如果是undefined值就转换成字符串

let obj = {
    name: "小明",       //姓名：小明
    address: [          //地址
        "China",        //中国
        "BeiJing"       //北京
    ],
    age: 18,            //年龄
    birthday: "2008,9,11",//生日
    girlfriend: undefined,//女朋友：未定义
    obj: {
        a: undefined,
        b: {
            a: undefined,
            c: {
                a: undefined,
                d: {
                    a: undefined,
                    b: 12471234,
                    c: function () {
                        console.log(777);
                    }
                }
            }
        }
    }
};

function conversion(obj) {
    let target = {};//创建一个空对象

    let keys = Object.keys(obj);//对象属性名的数组

    for (const key of keys) {//遍历这个数组

        //给空对象添加属性名和属性值
        target[key] = obj[key];

        //判断这里如果是undefined，那么就转换为字符串类型的undefined
        if (obj[key] === undefined) target[key] = 'undefined';

        //如果判断属性值是一个对象，那么传入这个属性值对象
        if (typeof obj[key] === "object") conversion(obj[key]);
    }

    //返回这个空对象
    return target;
}

let myobj = conversion(obj);
console.log(myobj)

如果觉得两个函数麻烦，可以把这函数的判断修改，如果是字符串的undefined那么就转换成undefined值，反之亦然，也就是一个 if-else 就可以解决的事情，但是用一个函数，如果反复转换，迟早把自己搞懵逼，不如用两个函数，用函数名字好区别自己是要干什么

转载自:https://segmentfault.com/a/1190000042183527
评论
请登录