欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-09 18:07:44
1.当后端传过来的数据是JSON字符串的时候,我们不能直接去遍历,因为这样会拿到每个字符,所以要先转义1.1. 我们想要的是JSON对象,也就是下面这种 var arr = [{ name: "zhangsan", sex: "女" }, { name: "lisi", sex: "男" }];1.2. 但是我们可能会拿到JSON字符串,通过JSON.stringify把JSON对象转成字符串 var ar....

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);

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

这时候,我们去循环这个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);

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

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