“大家脑海中的json和js”

最新推荐文章于 2024-08-13 16:33:17 发布

Benjamin℡

最新推荐文章于 2024-08-13 16:33:17 发布

阅读量79

点赞数

分类专栏： Java Script 文章标签： json javascript

本文链接：https://blog.csdn.net/m0_48983233/article/details/120405001

版权

Java Script 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了JSON的概念、语法规则和数据类型，强调了其与JavaScript的关系。JSON作为数据交换格式，具备轻量级、自我描述性等特点，广泛应用于跨平台数据交互。同时，文章通过示例讲解了如何在JavaScript中进行JSON对象与JS对象的转换，并展示了遍历JSON对象和数组的不同方法，最后讨论了jQuery对象与JS对象的区别以及数据类型的判断。

摘要由CSDN通过智能技术生成

1、什么是json?

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHPJSP，.NET）编程语言都支持JSON。
JSON 具有自我描述性，更易理解

2、json语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中
数据由逗号分隔
大括号 {} 保存对象
中括号 [] 保存数组，数组可以包含多个对象

3、json的键和值数据类型

键(key)：必须是字符串

值(value):

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在中括号中）
对象（在大括号中）
null

4、json语法规则

json对象

        JSON 对象使用在大括号({})中书写。
        对象可以包含多个 key/value（键/值）对。
        key 必须是字符串，value 可以是合法的 JSON 数据类型
        key 和 value 中使用冒号(:)分割。
        每个 key/value 对使用逗号(,)分割。

var obj = {"name" : "Benjamin" , 
            "age" : 24, 
            "time" : null, 
            "work" : true,
            "workdays" : ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
            "obj" : {"name" : "Benjamin2"}};

json数组：

         JSON 数组在中括号中书写。
        JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
        JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。

var array = ["Benjamin", 24, true, null,                     
            {"周一" : "Monday", "周二" : "Tuesday", "周三" : "Wednesday", "周四" :"Thursday", "周五" : "Friday"}, 
            ["20210921", "中秋节"]];

5、json与js相互转换

json自带的方法：
// 将json格式的字符串转换为json格式的js对象
JSON.parse(text[, reviver]);
// 将json格式的js对象转换为json格式的字符串
JSON.stringify(value[, replacer[, space]]);

6、json和js你真的了解吗？

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，JSON格式的数据，主要是为了跨平台交流数据用的。
但JSON和JavaScript确实存在渊源，可以说这种数据格式是从JavaScript对象中演变出来的，它是JavaScript的一个子集。JSON本身的意思就是JavaScript对象表示法（JavaScript Object Notation），它用严格的JavaScript对象表示法来表示结构化的数据。它是一种严格的js对象的格式，JSON的属性名必须有双引号，如果值是字符串，也必须是双引号；
JSON只是一种数据格式（或者叫数据形式），数据格式其实就是一种规范，格式、形式、规范是不能用来存诸数据的。

<script>
    var jsObj1 = {}; // 这只是js对象
    var jsObj2 = {name : "Benjamin", time : "20210921"};// 这是js对象，不是json格式JavaScript对象
    var jsObj3 = {'name' : "Benjamin", 'time' : "20210921"};// 这是js对象，不是json格式JavaScript对象
    var jsonObj1 = {"name" : "Benjamin", "time" : "20210921"};// 这是json格式的JavaScript对象
    var jsonObjStr = '{"name" : "Benjamin", "time" : "20210921"}';// json格式的字符串
    var jsonArray = [{"name": "Benjamin"}, {"time" : "20210921"}];// json格式的数组
    var jsonArrayStr = '[{"name": "Benjamin"}, {"time" : "20210921"}]';// json格式数组的字符串
</script>

7、从json获取数据

// 1、json对象.键名
var jsObj3 = {'name' : "Benjamin", 'time' : "20210921"};
jsObj3 .name;
//2、 josn对象["key"] // key的字符串格式，遍历的时候需要用到这种获取方式
jsObj3 ["name"];
//3、josn数组[index]
var jsonArray = [{"name": "Benjamin"}, {"time" : "20210921"}];
jsonArray[0];

8、jquery对象与js对象区别？(后面会用到)

在 jQuery 事件中：
- this 表示的是当前事件发生的目标元素（DOM对象）
- $(this) 表示将该元素封装为一个 jQuery 对象
例如
$( "p" ).bind() 中的 this 就是一个 p 元素，它是DOM对象，拥有的属性和方法都是DOM对象的属性和方法。
$(this)则是将这个p元素封装为一个jQuery对象，从而可以使用jQuery定义的一些方法来访问DOM对象。
$(this).text()方法属于jQuery对象，作用是取得元素的文本内容，与之对应的DOM对象属性是 this.textContent
同样，$(this).html() 是取得元素内的HTML内容，对应的是 this.innerHTML。
而 this.nodeName 则没有对应的jQuery方法了。

9、判断数据类型(typeof)或者对象类型(instanceof)。用()

a、typeof 运算符返回一个用来表示表达式的数据类型

语法：typeof 属性或者typeof()

typeof返回结果:"number"、"string"、"boolean"、"object"、"function" 和 "undefined"

b、instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

语法：object instanceof constructor

instanceof返回结果：Array、Object等等自定义函数

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性

注意：String对象和Date对象是Object对象不是String对象或者Date对象

10、遍历

<button id="button1">for in 遍历js对象</button><br>
    <button id="button2">for in遍历json格式的js对象</button><br>
    <button id="button3">for in 遍历json格式数组</button><br>
    <button id="button4">each遍历js对象</button><br>
    <button id="button5">each遍历json格式的js对象</button><br>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

a.for in 遍历js对象

 /*1for in 遍历js对象*/
        $("#button1").on("click",()=>{
            var jsObj2 = {name : "Benjamin", time : "20210921"};
            // 此处key是对象的key
            for (let key in jsObj2){
                console.log(key + "的类型：" + typeof key)
                console.log( key + "是不是string：" + (typeof key=='string') && key.constructor==String );
                // 表明String对象和Date对象都属于Object类型, 不属于String
                console.log( key + "是不是Object对象：" + (key.constructor instanceof Object)) ;
                console.log( key + "是不是String对象：" + (key.constructor instanceof String)) ;
                // 会报错undefined,因为js对象中没有键key
                //console.log(jsObj2.key);
                // 此处的key是string类型，需要用下列获取方式
                console.log(jsObj2[key]);
            }
        });

b.for in遍历json格式的js对象

/*2for in遍历json格式的js对象*/
        $("#button2").on("click",()=>{
            // 这是json格式的JavaScript对象
            var jsonObj4 = {"name" : "Benjamin", "time" : "20210921"};
            // 此处key是对象的key
            for (let key in jsObj2){
                console.log(key + "的类型：" + typeof key)
                console.log( key + "是不是string：" + (typeof key=='string') && key.constructor==String );
                // 表明String对象和Date对象都属于Object类型, 不属于String
                console.log( key + "是不是Object对象：" + (key.constructor instanceof Object)) ;
                console.log( key + "是不是String对象：" + (key.constructor instanceof String)) ;
                // 会报错undefined,因为js对象中没有键key
                //console.log(jsObj2.key);
                // 此处的key是string类型，需要用下列获取方式
                console.log(jsObj2[key]);
            }
        });

c.for in 遍历json格式数组

/*3for in 遍历json格式数组*/
        $("#button3").on("click",()=>{
            // json格式的数组
            var jsonArray = [{"name": "Benjamin"}, [{"time" : "20210921"}]];
            // 此处index是数组组索引号，是字符串不是number
            for (let index in jsonArray){
                console.log(index + "的类型：" + typeof index)
                console.log( index + "是不是number：" + ((typeof index =='number') && index.constructor==Number));
                console.log( index + "是不是Number对象：" + (index.constructor instanceof Number)) ;

                console.log( index + "是不是string：" + ((typeof index =='string') && index.constructor==String) );
                // string字符串对象是Object对象，不是String对象
                console.log( index + "是不是Object对象：" + (index.constructor instanceof Object)) ;
                // 此处的index是number类型，数组需要用下列获取方式
                console.log(jsonArray[index]);
            }
        });

d:each遍历js对象

/*each遍历js对象*/
        $("#button4").click(()=>{
            // 这是js对象，不是json格式JavaScript对象
            var jsObj2 = {name : "Benjamin", time : "20210921"};
            $.each(jsObj2,(key, value)=>{
                console.log(key + "的类型：" + typeof key)
                console.log( key + "是不是string：" + (typeof key=='string') && key.constructor==String );
                // 表明String对象和Date对象都属于Object类型, 不属于String
                console.log( key + "是不是Object对象：" + (key.constructor instanceof Object)) ;
                console.log( key + "是不是String对象：" + (key.constructor instanceof String)) ;
                console.log("value:" + value);
                // 会报错undefined,因为js对象中没有键key
                //console.log(jsObj2.key);
                // 此处的key是string类型，需要用下列获取方式
                console.log(jsObj2[key]);
            })
        });

e.each遍历json格式的js对象

/*5each遍历json格式的js对象*/
        $("#button5").click(()=>{
            //[{"name": "Benjamin"}, [{"time" : "20210921"}]]要是数组，value就是数组里面的索引对应的。
            // 对象.each();会把对象当做数组操作。
            // 这是json格式的JavaScript对象
            var jsonObj4 = {"name" : "Benjamin", "time" : "20210921"};
            // 这种each遍历方式。index是索引不是对象key,是number类型，不是字符串。value就是对象
            $(jsonObj4).each((index, value)=>{
                console.log(index + "的类型：" + typeof index);
                console.log(index + "是不是string：" + ((typeof index == 'string') && (index.constructor == Number)));
                console.log(index + "是不是string：" + ((typeof index == 'string') && (index.constructor == Number)));
                console.log(index + "是不是String：" + (index.constructor instanceof String));

                console.log(index + "是不是number：" + ((typeof index == 'number') && (index.constructor == Number)));
                console.log(index + "是不是Number：" + (index.constructor instanceof Number));
                console.log(index + "是不是Object：" + (index.constructor instanceof Object));
                console.log("value值：" + value)
                console.log("name值：" + value.name)

            });

        });

对象.each((index, value)=>{});会把对象当做数组处理。

Benjamin℡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
“大家脑海中的json和js”

1、什么是json?JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation） JSON 是轻量级的文本数据交换格式 JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHPJSP，.NET）编程语言都支持JSON。 JSON 具有自我描述性，更易理解2、json语法规则 JSON 语法是 Jav...
复制链接

扫一扫

专栏目录