在vue中,接口返回如下数据:

data: {充电桩: [0, 0, 78], 红外摄像头: [0, 0, 0], 火焰探测器: [0, 1, 0], 烟雾传感器: [0, 1, 1], 限流保护器: [0, 0, 1]},

其中数组里第一个值应该放在data1,第二个放在data2,第三个放在data3,应该怎么做?

  garageHistogram() {
      //柱状图查询
      let param = {
        carrierId: this.project,
        indexCode: this.paramsForm.indexCode,
        start: this.paramsForm.startTime,
        end: this.paramsForm.endTime,
        granularity: this.paramsForm.granularity,
      };
      this.chartLoading = true;
      this.API.garageHistogram(param).then((res) => {
        this.chartLoading = false;
        if (res.code == 200) {
          let xAxis = [];
          let data1 = [];
          let data2 = [];
          let data3 = [];
          for (let i in res.data) {
            xAxis.push(i);
          }

          //取值部分
          xAxis.forEach((item, index) => {
            res.data[item].map((item_, index_) => {
              if (index_ == 0) {
                data1.push(item_);
              }
              if (index_ == 1) {
                data2.push(item_);
              }
              if (index_ == 2) {
                data3.push(item_);
              }
            });          
          });

          // Object.keys(res.data).forEach(key => {
          //   [data1, data2, data3] = res.data[key];
          //   console.log(key, data1, data2, data3);
          // });



          this.barChartOpt.nameList = xAxis;
          this.barChartOpt.data = [
            {
              name: "报警",
              list: data1,
            },
            {
              name: "故障",
              list: data2,
            },
            {
              name: "离线",
              list: data3,
            },
          ];
        }
      });
    },

 一、

可以使用解构赋值(destructuring assignment)将每个属性的值分配给不同的变量。例如,以下代码将“充电桩”数组的第一个元素分配给变量data1,第二个元素分配给变量data2,第三个元素分配给变量data3:

const { 充电桩: [data1, data2, data3], 红外摄像头: [...], 火焰探测器: [...], 烟雾传感器: [...], 限流保护器: [...] } = data;

这里,我们使用了对象解构赋值的语法,用花括号括起属性名,冒号后面是新的变量名,如果属性名和变量名相同,可以省略冒号。

注意,由于“充电桩”是一个中文字符串,所以我们需要使用冒号并将其包装在引号中,以便Vue不会把它解析为一个计算属性。

如果不确定每个属性名,可以使用Object.keys()获取对象的所有属性名,然后使用Array.reduce()或forEach()循环遍历它们并将它们解构到变量中。

Object.keys(data).forEach(key => {
  const [data1, data2, data3] = data[key];
  console.log(key, data1, data2, data3);
});

二、

在ECharts柱状图中使用时,可以使用Array.map()函数将原始数据映射为一个新数组,该数组仅包含每个属性的值。例如,以下代码将原始数据映射为一个数组,该数组包含每个属性的第一个元素:

const data1 = Object.keys(data).map(key => data[key][0]);

这里,我们使用Object.keys()获取对象的所有属性名,并使用Array.map()循环遍历它们。对于每个属性,我们获取其对应的数组,并将其第一个元素添加到一个新数组中。这将返回一个只包含每个属性的第一个元素的新数组。

您可以使用相同的方法,将第二个和第三个元素映射到另外两个数组中:

const data2 = Object.keys(data).map(key => data[key][1]);
const data3 = Object.keys(data).map(key => data[key][2]);

三、

这两种方法的作用是相同的,它们都可以从对象中提取数据并将其分别存储在三个不同的数组中。但是,它们的实现方式略有不同。

方法一使用了两个循环来遍历对象的属性和属性值,其中第二个循环使用了Array.map()来遍历属性对应的值的每个元素,并将每个元素添加到相应的数组中。这种方法的优点是它比较灵活,可以在处理每个元素时执行任何必要的操作,例如添加特定的前缀或后缀。但是,这种方法需要显式地检查每个元素的索引,以便将其正确地添加到相应的数组中。

方法二使用了单个循环来遍历对象的属性,并将每个属性对应的值解构为三个变量。这种方法的优点是它比较简洁,可以在一行代码中完成整个过程。但是,这种方法需要每个属性对应的值必须是一个数组,而且需要事先知道数组中元素的顺序。如果数组中的元素顺序发生变化,该方法就会失效。

因此,这两种方法的选择取决于您的具体情况和个人偏好。如果您需要对每个元素执行更多的操作,并且需要更大的灵活性,请使用方法一。如果您希望保持代码简洁,并且对数组元素的顺序有充分的了解,请使用方法二。

这两种方法有什么不同,方法一:  xAxis.forEach((item, index) => {
            res.data[item].map((item_, index_) => {
              if (index_ == 0) {
                data1.push(item_);
              }
              if (index_ == 1) {
                data2.push(item_);
              }
              if (index_ == 2) {
                data3.push(item_);
              }
            });          
          });
方法二: Object.keys(res.data).forEach(key => {
   [data1, data2, data3] = res.data[key];
  console.log(key, data1, data2, data3);
});

四、关于Object.keys

Object.keys()是一个内置函数,它返回一个对象的所有可枚举属性的属性名(键)组成的数组。可以用于枚举对象自身的属性,不会枚举对象原型链上的属性。

例如,如果有一个包含如下属性的对象:

const obj = {
  name: 'Tom',
  age: 25,
  gender: 'male'
};

那么使用Object.keys()将返回一个由属性名组成的数组:

const keys = Object.keys(obj); // ['name', 'age', 'gender']

您可以在循环中使用该数组,以便对每个属性执行相同的操作,例如:

keys.forEach(key => {
  console.log(key + ': ' + obj[key]);
});

这将输出:

name: Tom
age: 25
gender: male

请注意,Object.keys()返回的属性名数组的顺序与属性在对象中定义的顺序不一定相同。

Logo

前往低代码交流专区

更多推荐