zoukankan      html  css  js  c++  java
  • Javascript JSON语法基础

    Javascript JSON语法基础

    什么是JSON?

    JSON: JavaScript Object Notation(JavaScript 对象表示法),JSON 是存储和交换文本信息的语法,独立于语言。类似 XML。JSON 比 XML 更小、更快,更易解析,具有自我描述性,更易理解的特点。

    JSON就是一串字符串,只不过元素会使用特定的符号标注 ##。

    • {} 双括号表示对象
    • [] 中括号表示数组
    • "" 双引号内是属性或值
    • :表示后者是前者的值(这个值可以是字符串、数字、也可以是另一个数组或对象)

    {"name": "Dcloud"}可以理解为是一个包含name为Dcloud的对象;
    [{"name": "mui"},{"name": "html5+"}]就表示包含两个对象的数组。

    通过JavaScript,您可以创建一个对象数组,并像这样进行赋值:

    var employees = [
        { "firstName":"John" , "lastName":"Doe" }, 
        { "firstName":"Anna" , "lastName":"Smith" }, 
        { "firstName":"Peter" , "lastName": "Jones" }
    ];
    

    可以像这样访问 JavaScript 对象数组中的第一项:

    • employees[0].lastName;
    • 返回的内容是:
    • Doe
    • 可以像这样修改数据:
    • employees[0].firstName = "Jonatan";

    JSON.stringify和JSON.parse

    这里需要特别说明的是两个非常有用的方法:JSON.stringify和JSON.parse。我们可以通过JSON.stringify将json对象转成json字符串,方便用alert,console.log打印出来,可以方便的查看json对象内容。反之我们可以通过JSON.parse将json字符串转成json对象以便可以方便对json对象取值。例:

    // 场景1
    var data = {
        name: 'zhaomenghuan',
        age: 22
    }
    console.log(typeof data); // "object"
    console.log(JSON.stringify(data)) // "{"name":"zhaomenghuan","age":22}"
    
    // 场景2
    var str = '{"name":"zhaomenghuan","age":22}';
    console.log(typeof str)  // "string"
    console.log(JSON.parse(str).name) // "zhaomenghuan"
    

    上面的例子列举了两种应用场景,大家根据自己的情况合适的选取正确的方法。

    运算符[ ] 和 .

    [ ]可以用 ###于数组和对象取值,数组中按下标取值。

    var array=["one","two","three","four"];
    array[0];
    

    对象属性取值时,当我们不知道属性名或属性名本身包含点(.)的键,应当使用[ ]。

    for(var key in obj){
       console.log(key + ":" + obj[key]);
    }
    var obj={
      id:"obj",
      "self.ref":ref
    }
    console.log(obj["self.ref"]);
    

    .运算符的左边为一个对象,右边为属性名。如:obj.id

    可以动态访问属性:

    var key="property";
    console.log(key);
    
    var obj={
      property:"hello word"
    }
    
    console.log(obj[key]);
    

    数组的map方法:

    var array=[1,2,3,4,5];
    array.map(function(item){
      return item*2;
    });
    

    数组map方法可以接受一个匿名函数,数组中每个元素都会调用这个匿名函数,并且讲返回结果放在一个数组中。

    获取数据更新UI

    mui中的each()方法既是一个类方法,同时也是一个对象方法,两个方法适用场景不同;换言之,你可以使用mui.each()去遍历数组或json对象,也可以使用mui(selector).each()去遍历DOM结构。

    mui.each( obj , handler )

    • obj :
    • Type: Array||JSONObj

    需遍历的对象或数组;若为对象,仅遍历对象根节点下的key

    • handler :
    • Type: Function( Integer||String index,Anything element)

    为每个元素执行的回调函数;其中,index表示当前元素的下标或key,element表示当前匹配元素

    张磊,技术菜鸟一枚,在web开发中一直苦苦挣扎,追求上岸! 联系QQ:1908002007 有技术问题可以随时联系,闲聊也是可以的!欢迎打扰!
  • 相关阅读:
    PHP
    PHP
    密码修改机制
    PHP
    PHP
    PHP
    PHP
    Java并发编程:进程和线程的由来(转)
    Java获取文件大小的正确方法(转)
    J2EE开发中常用的缓存策略
  • 原文地址:https://www.cnblogs.com/zhnaglei/p/6596122.html
Copyright © 2011-2022 走看看