用JS来操作数组，平常遇到的问题

1.当后端传过来的数据是JSON字符串的时候，我们不能直接去遍历，因为这样会拿到每个字符，所以要先转义

1.1. 我们想要的是JSON对象，也就是下面这种

 var arr = [{
        name: "zhangsan",
        sex: "女"
    }, {
        name: "lisi",
        sex: "男"
    }];

1.2. 但是我们可能会拿到JSON字符串，通过JSON.stringify 把JSON对象转成字符串

 var arr = [{
        name: "zhangsan",
        sex: "女"
    }, {
        name: "lisi",
        sex: "男"
    }];
    var arr1 = JSON.stringify(arr);
    console.log(arr1);

这时候，我们去循环这个arr1的话，就会得到JSON字符串的长度，57

1.3. 所以我们要用JSON.parse转义成对象，这时候数组的长度为2。

var arr = [{
        name: "zhangsan",
        sex: "女"
    }, {
        name: "lisi",
        sex: "男"
    }];
    var arr1 = JSON.stringify(arr);
    console.log(arr1);
    console.log(arr1.length);
    var arr2 = JSON.parse(arr1);
    console.log(arr2);
    console.log(arr2.length);

2.饼图需要的数组中的value和name是小写的，但是后端传给我们的数组中的value和name是大写的，这时候无法渲染出饼图，怎么办？

map：返回包含结果的数组

var arr = [{
        NAME: "zhangsan",
        SEX: "女"
    }, {
        NAME: "lisi",
        SEX: "男"
    }];
    var arr1 = arr.map(x => {
        return {
            name: x.NAME,
            sex: x.SEX
        }
    });
    console.log(arr1);

3.柱状图需要两个数组，一个是X轴数组，一个是series数组，但是后端只能给我们提供一个数组，我们怎么去拆分呢？

3.1. 后端给我们的数据如下：

 var arr = [{
        NAME: "zhangsan",
        SEX: "女"
    }, {
        NAME: "lisi",
        SEX: "男"
    }];

3.2. 比如NAME对应的是X轴需要的data数据，SEX对应的是series需要的data数据，我们可以用mapAPI来返回我们想要的结果，我们可以把上面的这个数组，拆成两个数组

 var arr = [{
        NAME: "zhangsan",
        SEX: "女"
    }, {
        NAME: "lisi",
        SEX: "男"
    }];
    var arr1 = arr.map(x => {
        return x.NAME
    })
    console.log(arr1);
    var arr2 = arr.map(x => {
        return x.SEX
    })
    console.log(arr2);

3.3. 柱状图的Y轴的高度要根据series数组的最大值判断，所以我们要找出数组中的最大值

 function max(arr){
        var num = arr[0];
        for(var i=0;i<arr.length;i++){
            if(num < arr[i]){
                num = arr[i]
            }
        }
        return num;
    }

在Y轴中，设置最大值和分为7行

max:max(arr),
interval：max(arr)/7

 

本文地址：https://blog.csdn.net/weixin_42995083/article/details/107285447