In Vue, the interface returns the following data:
data: {charging pile: [0, 0, 78], infrared camera: [0, 0, 0], flame detector: [0, 1, 0], smoke sensor: [0, 1, 1], current limit protector: [0, 0, 1]},
The first value in the array should be placed in data1, the second in data2, and the third in data3. What should I do?
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,
},
];
}
});
},
one,
The value of each property can be assigned to a different variable using destructuring assignment. For example, the following code assigns the first element of the "charging station" array to the variable data1, the second element to the variable data2, and the third element to the variable data3:
const { 充电桩: [data1, data2, data3], 红外摄像头: [...], 火焰探测器: [...], 烟雾传感器: [...], 限流保护器: [...] } = data;
Here, we use the syntax of object destructuring assignment, enclosing the attribute name in curly braces, and the new variable name after the colon. If the attribute name and variable name are the same, the colon can be omitted.
Note that since "charging pile" is a Chinese string, we need to use a colon and wrap it in quotes so that Vue won't parse it as a computed property.
If you are not sure about each property name, you can use Object.keys() to get all property names of an object, then use Array.reduce() or forEach() to loop through them and destructure them into variables.
Object.keys(data).forEach(key => {
const [data1, data2, data3] = data[key];
console.log(key, data1, data2, data3);
});
two,
When used in the ECharts histogram, the Array.map() function can be used to map the original data into a new array, which only contains the value of each attribute. For example, the following code maps raw data to an array containing the first element of each property:
const data1 = Object.keys(data).map(key => data[key][0]);
Here, we use Object.keys() to get all the property names of an object and use Array.map() to loop through them. For each property, we get its corresponding array and add its first element to a new array. This will return a new array containing only the first element of each property.
You can use the same method to map the second and third elements into two other arrays:
const data2 = Object.keys(data).map(key => data[key][1]);
const data3 = Object.keys(data).map(key => data[key][2]);
three,
The two methods do the same thing, they both extract data from the object and store it in three different arrays. However, they are implemented slightly differently.
Method 1 uses two loops to traverse the attributes and attribute values of the object, and the second loop uses Array.map() to traverse each element of the value corresponding to the attribute and add each element to the corresponding array . The advantage of this approach is that it is flexible and can do whatever is necessary while processing each element, such as adding a specific prefix or suffix. However, this approach requires explicitly checking the index of each element so that it is properly added to the corresponding array.
Method 2 uses a single loop to traverse the properties of the object and deconstructs the value corresponding to each property into three variables. The advantage of this method is that it is relatively concise and can complete the whole process in one line of code. However, this method requires that the value corresponding to each attribute must be an array, and the order of elements in the array needs to be known in advance. This method fails if the order of elements in the array changes.
Therefore, the choice between these two methods depends on your specific situation and personal preference. If you need to perform more operations on each element and need more flexibility, use method one. If you want to keep your code clean and have a good idea of the order of the array elements, use method two.
这两种方法有什么不同，方法一： 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);
});4. About Object.keys
Object.keys() is a built-in function that returns an array of property names (keys) for all enumerable properties of an object. It can be used to enumerate the properties of the object itself, and will not enumerate the properties on the object's prototype chain.
For example, if you have an object with the following properties:
const obj = {
name: 'Tom',
age: 25,
gender: 'male'
};
Then using Object.keys() will return an array of property names:
const keys = Object.keys(obj); // ['name', 'age', 'gender']
You can use that array in a loop to do the same thing for each property, for example:
keys.forEach(key => {
console.log(key + ': ' + obj[key]);
});
This will output:
name: Tom
age: 25
gender: male
Note that the array of property names returned by Object.keys() is not necessarily in the same order as the properties are defined in the object.