在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]);
});
这将输出：文章来源：https://www.toymoban.com/news/detail-416629.html
name: Tom
age: 25
gender: male
请注意，Object.keys()返回的属性名数组的顺序与属性在对象中定义的顺序不一定相同。文章来源地址https://www.toymoban.com/news/detail-416629.html
到了这里，关于vue关于echarts后端返回格式取值方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
