JavaScript中的数据结构

在我们前后端分离的项目开发时，后端传递过来的往往是这样的数据：

{
    "data":[
        {
            "id":13193,
            "url":null,
            "br":0,
            "size":0,
            "md5":null,
            "code":404,
            "expi":1200,
            "type":null,
            "encodeType":null
        }],
    "code":200
}

我们拿到之后该怎么读取呢？[ ]就是数组，{ }则是JavaScript的对象，所以这就涉及到了JavaScript这两类型数据的操作方式：

JSON

JSON本来是用来表示 JavaScript 对象的一种数据文本格式，但由于它轻量级、易于解析/操作的一些特点，渐渐的被很多语言支持，也就成了一种标准。

为什么使用JSON

在JSON之前，我们通常在网络传输中使用的格式是XML(ajax可以接受xml格式的数据)。在我们的印象之中，XML具有很好的可读性，并且格式统一，解析起来也相对比较简单，为什么摒弃掉XML而逐渐的使用起JSON呢？

主要原因在于：JSON比XML更小、更快、更易解析。

• JavaScript原生支持JSON（就是js的对象），解析速度相较XML会更快；
• XML解析成DOM对象的时候，浏览器之间会产生差异；
• JSON有很多强大的库能够帮助我们更快更简单的完成工作。

XML与JSON实例比较

使用XML表示中国部分省市的数据如下：

<?xml version="1.0" encoding="UTF-8" ?>
<country>
    <name>中国</name>
    <citys>
        <city>北京</city>
        <city>成都</city>
    </citys>
</country>

使用JSON中国部分省市数据如下：

{
    "name": "中国",
    "citys": [
        {
            "city": "北京"
        },
        {
            "city": "成都"
        }
    ]
}

JSON格式的数据可以直接使用点号来访问JSON对象的属性，从而避免了xml繁琐的DOM API：

所以，对于AJAX应用程序员来说，JSON比XML更快更易使用。

JSON格式的名字部分

看一个我们平时定义的JavaScript对象，与JSON对比：

 data:{
          query:"",
          musicList:[],
          musicUrl:"",
          musicCover:"",
          musicComment:[],
          isPlaying:false,
          musicMv:"",
          isShow:false
        }

JSON中的属性全部加了双引号，因为其明确定义过key值必须带双引号，否则就不是一个json数据。

至于json为何定义是双引号而不是单引号，那是因为json是一门通用的文本格式，在诸多语言里自己实现的时候支持的不同，有的单引号，有的双引号，有的可以不加符号。但是有一点却是共性，那就是双引号能在绝大多数平台一定能得到兼容。

Array

JSON的获取方式是使用点号，JavaScript也为数组定义了一套操作的API，此处我们只介绍开发中最常用的几种操作：

1.元素增删改

var arr = [1,2,3,4,5];
//新增
arr.push(6);
//删除,从index=5开始,删除一个元素
arr.splice(5,1);
//修改
arr[0] = 9;

2.数组遍历

var arr = [1,2,3,4,5];
// v具体的值 i下标 r数组
arr.forEach(function(v,i,r){
    console.log(v,i,r);
})

3.数组过滤

可以按照一定的条件是数组只留下满足条件的值，此处实现一个最常用的去重方法：

var arr = ['a','b','a','b'];
arr = arr.filter(function(item,index,r){
    //indexOf()会在数组中查找是否存在item，如果存在则返回下标(从0位置开始查找)
    //此处的判断逻辑：如果在当前位置(index)之前找到item，boolean为false
    //filter中为false的元素不会加入数组中
    return r.indexOf(item,0) === index;
})

此处要注意使用数组来接受返回的值。