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

2022-08-07

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