前端json相关知识总结

js前端开发框架
前端app混合开发框架
web前端原生开发框架

JSON: 定义一种格式化数据的方式,并不从属于js,在web中用来传输数据,可以用在多种语言中,如php java;

语法结构:

1. 数据为 键-值 对类型的:  "firstName":"John"
2. 数据由逗号分隔: "firstName":"John", "lastName":"Doe"
3.大括号保存对象 :{"firstName":"John", "lastName":"Doe"}
4. 方括号保存数组: [
{"firstName":"John", "lastName":"Doe"}, 
{"firstName":"Anna", "lastName":"Smith"}, 
{"firstName":"Peter", "lastName":"Jones"}

]

  1. 可以嵌套使用;

解析与序列化: 可以将json对象解析为javascript对象,这样获取其中的值就很方便了。
两个方法:

  1. stringify():把js对象序列化为json字符串;用法:JSON.stringify(str); 实现序列化
  2. parse();把JSON字符串解析为原生的js对象; 用法:JSON.parse(jsonstr); 解析
    例子:将一个js对象,转换为JSON格式输出,默认情况下不包含空格和缩进等字符。
    html 代码
<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <script>
            var book = {
                title: ‘Professional JavaScript’,
                year: 2005,
                edition: 3,
                authors: [‘Nicks’, ‘Merry’],
            }
            var jsonText = JSON.stringify(book)
            function lo() {
                document.getElementById(‘demo’).innerHTML = jsonText
            }
        </script>
    </head>
    <body onload=”lo()”>
        <p id=”demo”></p>
    </body>
</html>

然后将该JSON 字符串再重新转化成js对象,采用访问属性的方式,输出title值:
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <script>
            var book = {
                title: ‘Professional JavaScript’,
                year: 2005,
                edition: 3,
                authors: [‘Nicks’, ‘Merry’],
            }
            var jsonText = JSON.stringify(book)
            var jsob = JSON.parse(jsonText)
            function lo() {
                document.getElementById(‘demo’).innerHTML = jsob.title
            }
        </script>
    </head>
    <body onload=”lo()”>
        <p id=”demo”></p>
    </body>
</html>

序列化选项:
stringify()函数,有可选的参数,可以改变序列化的格式

1. 过滤结果: 可以设置第二个数组来选择对象中的部分键值对来序列化 或者 做出一些改变后再序列化,可以传入数组或者函数

      1.1 第二个参数中传入数组,这样序列化的时候只会序列化数组中出现的相关属性;
      如:
      **html 代码**
<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <script>
            var book = {
                title: ‘Professional JavaScript’,
                year: 2005,
                edition: 3,
                authors: [‘Nicks’, ‘Merry’],
            }
            var jsonText = JSON.stringify(book, [‘title’, ‘year’]) //只对title 和 year 这两个字段序列化
            function lo() {
                document.getElementById(‘demo’).innerHTML = jsonText
            }
        </script>
    </head>
    <body onload=”lo()”>
        <p id=”demo”></p>
    </body>
</html>
      1.2 第二个参数传入函数,该函数接受两个参数,key和value。//函数内部可以执行一些过滤操作
           如:

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <script>
            var book = {
                title: ‘Professional JavaScript’,
                year: 2005,
                edition: 3,
                authors: [‘Nicks’, ‘Merry’],
            }
            var jsonText = JSON.stringify(book, function(key, value) {
                //函数过滤
                switch (key) {
                    case ‘authors’:
                        return value.join(‘&’) //使用&符号链接authors中的值
                    case ‘edition’:
                        return 4 //改变eidtion的值
                    default:
                        return value //其他值不变,默认返回原值
                }
            })
            function lo() {
                document.getElementById(‘demo’).innerHTML = jsonText
            }
        </script>
    </head>
    <body onload=”lo()”>
        <p id=”demo”></p>
    </body>
</html>
1.3  字符缩进:第三个参数,用于控制字符串的缩进和空白,如果是数值的话,表示缩进的空格数量,也可以用字符串
      如:

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <script>
            var book = {
                title: ‘Professional JavaScript’,
                year: 2005,
                edition: 3,
                authors: [‘Nicks’, ‘Merry’],
            }
            var jsonText = JSON.stringify(book, null, ‘–‘)
            function lo() {
                document.getElementById(‘demo’).innerHTML = jsonText
            }
        </script>
    </head>
    <body onload=”lo()”>
        <p id=”demo”></p>
    </body>
</html>

toJSON()方法:可以为任何对象添加toJSON()方法,从而自定义序列化方式
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <script>
            var book = {
                title: ‘Professional JavaScript’,
                year: 2005,
                edition: 3,
                authors: [‘Nicks’, ‘Merry’],
                toJSON: function() {
                    //自定义序列化方法
                    return “‘” + this.title + “‘ ,'” + this.year + “‘”
                },
            }
            var jsonText = book.toJSON() //调用自定义的序列化方法
            function lo() {
                document.getElementById(‘demo’).innerHTML = jsonText
            }
        </script>
    </head>
    <body onload=”lo()”>
        <p id=”demo”></p>
    </body>
</html>

序列化实现的内部顺序:(序列化的顺序很重要!)

  1. toJSON()函数最优,如果存在且能返回正确的值,则调用该函数;否则按照默认的序列化方法;
  2. 如果提供了第二个参数,则进行过滤操作,该过滤的对象是第一步返回的值;
  3. 对第二部返回的值进行序列化;
  4. 如果提供了第三个参数,则在序列化的时候加上格式化;
赞(0)
前端开发者 » 前端json相关知识总结
64K

评论 抢沙发

评论前必须登录!