JavaScrip---Json技术学习for--in语句

最新推荐文章于 2021-02-25 09:55:58 发布
最新推荐文章于 2021-02-25 09:55:58 发布
阅读量332 收藏
点赞数
分类专栏： J2EE 文章标签： json javascript 技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37720904/article/details/71260036
版权

JSON简介

JSON: JavaScript Object Notation(JavaScript对象表示法）

JSON是存储和交换文本信息的语法，类似XML,JSON比XML更加小，更快，更易解析。

JSON 实例

这里写图片描述

这个studs对象是包含了三个学生信息记录（对象）的数组。

什么是JSON？

  1. JSON 指 的是JavaScript对象表示法 （JavaScript Object Notation）
  2. JSON 是轻量级的文本数据交换格式
  3. JSON 独立于语言*
  4. JSON 具有自我描述性，更易理解

JSON - 转换为 JavaScript对象

JSON 文本格式在语法上与创建 JavaScript对象的代码相同，所以无需解析器，JavaScript程序能够使用内建的 eval() 函数，用JSON的数据来生成原生JavaScript对象

JSON语法

JSON 语法规则

JSON 语法是JavaScript 语法的子集

  1. 数据在名称/值
  2. 数据由逗号分隔
  3. 花括号保持对象
  4. 方括号保持数组

JSON 名称/值

JSON 数据的书写格式： 名称/值

”名称/值“包括字段名称（在双引号中），后面是一个冒号，然后是值

"name":"Jack"

等价于 这条 javaScript语句

var name = "Jack"

JSON值
JSON值可以是以下几种：

  1. 数字（整数或者是浮点数）— number
  2. 字符串（引号中）
  3. 逻辑值 （true 或 false)
  4. 数组 （在方括号中 ）
  5. 对象 （ 在花括号中 )
  6. null

JSON对象
JSON对象是在花括号中书写，一个对象可以包含多个 “名称/值“

  var p3 = {
                  "name":"Bob",
                  "age":22,
                  3:"小李",
                  "getName":function(){ return this.name; }
          };

JSON数组
JSON数组是在方括号中书写，一个数组可以包含多个 对象

 var studs=[
        {"id":"A001", "name":"Jack", "address":"湖南长沙", "age":25},
        {"id":"A002", "name":"张三", "address":"湖南益阳", "age":24},
        {"id":"A003", "name":"孙权", "address":"湖北武汉", "age":20}
            ];

JSON的基本格式有两种: map(用大括号封装),list(用中括号封装)

（主要演示map,list大家都会，就相当于数组）

<script type="text/javascript">
    //方式3: 用于封装数据----Json技术 , 是一种轻量级的数据交换格式 
      //json的基本格式有两种: map(用大括号封装),list(用中括号封装)
      var p3 = {
        // map(ken,value)
        "name":"项羽",
        "age":1501,
        3:"王哥",
        "getName":function(){
            return this.name;
        },
        "toString":function(){
            return "我乃战神"+this.name+"，活了"+this.age+"年了！";
        }
      };
      //两种访问p3中成员变量的方式 
      // 第一种： p3["成员名"]---可以访问所有的
      // 第二种：p3.成员名--- 只能访问合法的变量名 
      document.write("</br>p3[成员名]访问方式："+p3[name]); // WA --- 没加引号（“”）
      document.write("</br>p3['成员名']访问方式："+p3["name"]); // ac
      document.write("</br>p3.成员名访问方式："+p3.name);       // AC
         document.write("</br>p3['成员名']访问方式："+p3["3"]); // ac
    </script>

这里写图片描述

list访问方式

 //3.2 list--array
    var strs=["aa","bb","cc"];
    document.write(str[0]);

JavaScript中的 for –in 语句学习

<!--  for-in语句  -->
<script type="text/javascript">
     /*
        for( 变量名  in 对象 ){
        ...//分别对对象中的元素(属性)进行遍历操作
         }
          */
         //数组对象

         var arr = [1,2,3,56,435,3];
         for( x in arr){//注意，对于数组，这里的x是下标即是0,1,2,3,...
              println( x+":  "+ arr[x] );
          }

          //用for...in语句操作自定义对象---见后面部分的代码演示

       </script>

和JAVA中的增强for循环很像
这里写图片描述

其实for–in 比增强for循环更加强大，他可以修改元素
js中的for…in—-相当于把java中的普通for循环和增强for循环合并成一个, 格式:

              for(变量 in 对象){
                  ....//对对象中的每个元素分别进行操作
              }

那么用for – in 来访问普通数组和 普通对象来深刻理解for – i

访问数组

<script type="text/javascript"                  
      //1) for...in访问             
             var ar = [1,4,6,8];
        for( x in ar){ 
        //注意js中x不是元素值，而是元素的序号---对于数组
            document.write("</br>"+x+","+ar[x]);
        }
        </script>

左边是序号，右边是元素
这里写图片描述

访问普通对象

<script type="text/javascript">
    //2) for...in访问普通对象
           for( x in p){ //x是对象的所有成员名称(key)
             document.write("</br>"+x);///输出:变量名与方法名
             }
            document.write("<hr>");
         for( x in p){ //x是对象的所有成员名称(key)
              document.write("</br>"+p[x]);//输出: 成员变量的值
             }
</script>

结果 上面是ket 下面是value
这里写图片描述

那么Json技术 实际开发中我们在哪些场景会用到呢？
map+list —-项目一般采用的方式

 var studs=[
    {"id":"A001", "name":"Jack", "address":"湖南长沙", "age":25},
    {"id":"A002", "name":"张三", "address":"湖南益阳", "age":24},
    {"id":"A003", "name":"孙权", "address":"湖北武汉", "age":20}
        ];

看起来挺复杂，其实挺简单的。 一个数组 里面放多个map map里面又放数据

    var studs=["map1","map2","map3"];
    var map1={
            "id":"A001", 
            "name":"Jack", 
            "address":"湖南长沙", 
            "age":25
     }

那么我们要怎么拿到里面元素呢

for(var i=0;i<studs.length;i++){
    document.write("</br>"+studs[i]["id"]+","+studs[i]["name"]+","+studs[i].address+","+studs[i].age);
}

这里写图片描述

其实这就相当于拿后台的数据了，有时候会更加复杂。比如

 var datas={"studs":[
    {"id":"A001", "name":"Jack", "address":"湖南长沙", "age":25},
    {"id":"A002", "name":"张三", "address":"湖南益阳", "age":24},
    {"id":"A003", "name":"孙权", "address":"湖北武汉", "age":20}
        ],
           "currentPage":15,
           "count":100,
           "depts":{"name":"信电院","address":"信息楼","num":2000}
         };

即 map{ key,list[ map{} ] } 结构类似这种

//第二个学生的地址
    document.write("</br>"+ datas.studs[1].address);
    document.write("</br>"+datas["studs"][1]["address"]);
//当前页码
     document.write("</br>"+datas.currentPage);
     document.write("</br>"+datas["currentPage"]);
//学院地址
      document.write("</br>"+datas["depts"]["address"]);

这里写图片描述

整片代码贴上
用js 写的println和print代码如下

function print(str){
    document.write(str);
}

function println(str){
    document.write(str+"<br/>");
}

整片学习代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>js对象---我们自己定义对象(Java中的面向对象建模)</title>
        <script type="text/javascript" src="../tools/out.js"></script>
    </head>
    <body>
       <script type="text/javascript">
       /*
         //方式1: 封装性比较差,比较底层  ---用一个空函数或Object当前对象的原型，然后给该原型手动一步步添加成员变量和方法
         function Person(){
             //alert("hello obj");
         }
         var p = new Person(); //相当于调用构造方法，创建一个新对象
         //☆给已经创建的对象添加成员变量或成员方法: 对象名.成员名=...
         p.name="Alice"; //添加成员变量
         p.age=22;
         p.show=function(){//添加成员变量
             alert("name="+p.name+",age="+p.age);
         };
         //p.show();//方法调用


         //也可以直接用Object对象来创建
         var p2 = new Object();
         p2.name="Bob";
         p2.sex="male";
         p2.age=24;
         p2.sayHello=function(){
             alert("name="+p2.name+",age="+p2.age+",sex="+p2.sex);
         };
         p2.sayHello();

         */
       </script>

       <script type="text/javascript">
            //方式2: 封装性比较好,更接近于Java中的面向对象建模
            function Person(name,age){
                this.name=name;
                this.age=age;
                this.setName=function(name){
                    this.name=name;
                };
                this.getName=function(){
                    return this.name;
                };
                this.setAge=function(age){
                    this.age=age;
                };
                this.getAge=function(){
                    return this.age;
                };
                this.toString=function(){
                    return this.name+","+this.age;
                };
            }
            var p = new Person("Alice",22);
            p.setName("Jack");
            p.setAge(24);
            println("2222: "+ p.getName()+","+p.getAge());
            println( p ); //p.toString()

       </script>

       <script type="text/javascript">
          //方式3: 用于封装数据----Json技术 , 是一种轻量级的数据交换格式 
          //json的基本格式有两种: map(用大括号封装),list(用中括号封装)
          //3.1 map
          var p3 = {
                  "name":"Bob",
                  "age":22,
                  3:"小李",
                  "getName":function(){ return this.name; }
          };
          //访问map中的数据,方式1：对象名["属性名"] -----能通吃所有,,,但不要忘掉引号
          println( p3["name"] ); //AC
          println( p3["3"] ); //AC
          println( p3["age"]);//AC
          //println( p3[age]);//WA , 原因:忘掉引号

           println( "<hr/>" );
          //访问map中的数据,方式2：对象名.属性名 ---如果属性名不符合变量名的命名规则，不行!
          println( p3.name );
          println( p3.age );
          //println( p3.3 ); //WA: 因为这里的属性名是“3”，不符合变量名的命名规则


          //3.2 list--array
          var strs=["aa","bb","cc"];
          println( strs[0] ); //访问方式: 对象名[元素序号] ---参见数组元素的访问方式


          //3.3 map+list ----项目一般采用的方式
          var studs=[
                        {"id":"A001", "name":"Jack", "address":"湖南长沙", "age":25},
                        {"id":"A002", "name":"张三", "address":"湖南益阳", "age":24},
                        {"id":"A003", "name":"孙权", "address":"湖北武汉", "age":20}
                    ];


          for(var i=0; i<studs.length;i++){
              println(studs[i].id+","+studs[i]["name"]+studs[i]["address"]+","+studs[i].age);
          }


          /*js中的for...in----相当于把java中的普通for循环和增强for循环合并成一个,  格式:
              for(变量 in 对象){
                  ....//对对象中的每个元素分别进行操作
              }
              */
        //1) for...in访问数组
        var ar = [1,4,6,8];
        for( x in ar){ //☆注意，js中x不是元素值，而是元素的序号---对于数组
            //println(x);//输出: 0 1 2 3
            println( ar[x] );
        }

        //2) for...in访问普通对象
        for( x in p){ //x是对象的所有成员名称(key)
            //println(x);//输出:变量名与方法名
            println(p[x]);//输出: 成员变量的值
        }
        //3) for...in访问json对象
        for( i in studs){//数组,i是序号
            for(key in studs[i]){//对象, key是属性名且是字符串格式(不能用studs[i].key来访问)
                print(studs[i][key]+" ");
            }
            println("");
        }


       </script>

      <script type="text/javascript">
       //3.4 map+list2 ----项目中采用的复杂方式
       var datas={"studs":[
                        {"id":"A001", "name":"Jack", "address":"湖南长沙", "age":25},
                        {"id":"A002", "name":"张三", "address":"湖南益阳", "age":24},
                        {"id":"A003", "name":"孙权", "address":"湖北武汉", "age":20}
                    ],
                   "currentPage":15,
                   "count":100,
                   "depts":{"name":"信电院","address":"信息楼","num":2000}
                 };
       //第二个学生的地址
       println( datas.studs[1].address);
       println( datas["studs"][1]["address"]);
       //当前页码
       println( datas.currentPage);
       println( datas["currentPage"]);
       //学院地址
       println( datas["depts"]["address"]);
      </script>

    </body>
</html>
海那边的小萌男
关注
专栏目录
循环遍历多层json_JS中3种风格的For循环有什么异同？
weixin_35717696的博客
01-12 308
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。在学习任何开发语言时候，for循环是必不可少的一种语法，可能所有开发人员都会使用它。它非常经典，以至于每个开发语言都至少包括一种关于循环的语法版本。不过，在JavaScript种包含了三种不同的循环语法（如果再讲究一点，也可以算作是四种）。它们的使用方式并不完全相同，举例如下：l 经典的For循环语法l ...
JSON数据遍历之for-in
最新发布
04-09 1163
object 本身就是无对象的集合，因此在用 for-in 语句遍历对象的属性时，遍历出的属性顺序与对象定义时不同。
JSON中for in的使用
weixin_30664539的博客
06-11 133
for in 一般用于你不知道该数组或者JSON中包含哪些元素,而进行遍历。例如有一个元素未知的JSON对象：var clnums = {a:1,b:2,...};for(key in clnums){ document.write(clnums[key]);} 转载于:https://www.cnblogs.com/frustrate2/archive/2012/06/11/2...
json数据格式 与 for in
weixin_30919919的博客
07-30 74
格式一： 　　var json1={ 　　　　name:'json', 　　　　age:'23' 　　}; 　　json1.name='金毛'; 格式二：　(比较安全) 属性名字里有空格或者有连字符‘-’或者有保留字例如‘for’，则必须用字符串的形式。 　　var json2={ 　　　　'name':'json', 　　　　'age':'23' 　　}; 　　json2...
三种循环的基本格式和区别
weixin_44540285的博客
09-29 1524
Java是一门很重要的编程语言，涉及的技术点也非常广泛，所以需要学习的知识也很多，不管学什么技术，都是从基础学起的，下面我就和大家分享一下这个java基础的三种循环的区别。 首先我先说一下这三种循环的基本格式： while（判断条件语句）{ 循环体语句 }； 扩展格式： 初始化语句： while（判断条件语句）{ 循环体语句； 控制条件语句； } 回顾for循环格式： for（初始化语句；判断条件语句，...
struts2-hibernate-spring-Extjs-json.rar_JSON_extjs_extjs json st
09-14
Struts2、Hibernate、Spring 和 ExtJS 是Java Web开发...对于想要深入学习这些技术的开发者来说，这份资源将会是宝贵的参考资料。通过实践和理解这些技术的整合，开发者能够构建出更高效、用户体验更好的Web应用程序。
javascript-quiz-interativo:使用纯Javascript开发的交互式问答软件
05-18
1. **javascript** - 表明项目的核心技术是JavaScript，这是一种广泛使用的编程语言，特别是在网页开发中，用于实现客户端的动态功能。 2. **quiz-app** - 指出这是一个问答应用程序，通常涉及到用户交互、计分系统...
spring-mybatis-mysql-json
09-23
在IT行业中，数据库管理和Web开发是两个至关重要的领域。...这个项目对于学习和理解这些技术的集成使用具有很高的参考价值。通过深入研究和实践，开发者可以提升在数据库管理和Web开发领域的专业技能。
JSON-SLIDER:简单的 JSON 滑块，
06-15
JSON-SLIDER是一个基于JavaScript、JSON和jQuery的小型项目，旨在提供一个简单的滑块实现，帮助初学者通过实践来学习这些技术。JavaScript是一种广泛应用于网页动态效果和交互的编程语言，而JSON（JavaScript Object...
javascript-quiz:一个用 javascript 编码的 javascript 测验
06-30
2. 控制流程：包括条件语句（if...else）、循环（for、while）、switch语句，以及函数（用于封装可重用的代码块）。 3. DOM操作：JavaScript可以查找、添加、删除和修改DOM元素，这对于创建动态网页至关重要。例如...
json 的for in循环
fuxiaomi2016的博客
01-04 2262
json的for in循环
for循环json对象取值
weixin_33989058的博客
10-14 3225
for(var time in ceshiData){console.log(ceshiData[time])} for(var time in ceshiData){console.log(time)} 转载于:https://www.cnblogs.com/yixiaoyang-/p/9786935.html
json与for in、json的对象的删除和其属性值得删除
读心悦
07-10 2289
for in 遍历：(可以获取对象里面的所有属性和值)  for(var key in document){          console.log(key+”===”+document[key]);  } key是字符串， 案例： json for in遍历 *{margin: 0;padding: 0;} #box{width: 200px;height:
js 时间格式化
小小少年eason的博客
02-25 581
function dateFormat(fmt, date) { let ret; const opt = { "Y+": date.getFullYear().toString(), // 年 "m+": (date.getMonth() + 1).toString(), // 月 "d+": date.getDate().toString(), // 日 "H+": date.getHours..
js中的for...in语法
热门推荐
三木的博客
07-27 3万+
for...in语句: 用于遍历对象属性。   用for...in遍历"数组": 循环变量x是数组的下标  ///////用for...in遍历"数组": 循环变量x是数组的下标 ////////// var arr=[22,33,44,55,66]; for(x in arr){ //Java中的x是数组元素，而js中的x是数组下标 //document.write(x+"&...
使用for in循环遍历json对象的数据
weixin_30855761的博客
08-08 512
使用for in遍历json对象数据，如果数据中的名称有为数字的话，只对正整数有效，那么先会输出为正整数的数据，后面其他的会按照原来数据中定义的顺序不变输出。 针对名称为数字的json对象数据进行测试，代码如下： <script type="text/javascript"> var json_obj_data = { "40":{"title":...
jsonobject java_JSON详细学习之JSONObject in JAVA
weixin_42169971的博客
02-12 227
需要依赖的jar包:commons-lang.jar commons-beanutils.jar commons-collections.jar commons-logging.jar ezmorph.jar json-lib-2.2.2-jdk15.jar首先简单地看一下JSONObject,JSONArray对象的创建以及Json字符串的解析：packagecom.peter.jsonob...
JSP小项目实战---客户信息管理系统
weixin_37720904的博客
07-22 1万+
项目示意图大概这样吧。我自己画的 登录界面代码 index.jsp: 完全没技术含量的，直接调用一个servlet控制的是否登录<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h
JavaScript与Ajax入门指南 - 2010版
"《2010年Ajax与JavaScript - JavaScript & Ajax for Dummies》是A.Harris在2010年出版的一本面向初学者的技术书籍，旨在帮助读者理解和掌握JavaScript和Ajax技术。该书提供了包括检查列表、图表、常见指令等在内的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值