JavaScript数组映射改变元素的顺序，当我使用Number()

Question

我正在向服务器发出GET请求，并且在响应中我正在获得对象数组。

axios.get(`${HOST}/operations/post-flight-graph-data?orgId=${orgId}&ecoId=${ecoId}`)
.then(res => {
// order numbers
const orderNumbers = res.data.map(data => data.order_No);
// battery percentage before flight
const chargingBeforePercentage = res.data.map(data => {
return {
x: data.order_No,
y: parseFloat((data.charging?.before_Per) || 0)
}
});
// battery percentage after flight
const chargingAfterPercentage = res.data.map(data => {
return {
x: data.order_No,
y: parseFloat((data.charging?.after_Per) || 0)
}
});
console.log('res.data', res.data)
console.log({ orderNumbers })
console.log({ chargingBeforePercentage })
console.log({ chargingAfterPercentage})
})
.catch(err => console.log(err));

从服务器返回的数据

[
{
"charging": {
"before_Per": "51",
"after_Per": "51"
},
"order_No": "1"
},
{
"charging": {
"before_Per": "51",
"after_Per": "51"
},
"order_No": "7"
},
{
"charging": {
"before_Per": "99",
"after_Per": "86"
},
"order_No": "1"
},
{
"charging": {
"before_Per": "51",
"after_Per": "51"
},
"order_No": "9"
},
{
"charging": {
"after_Per": "51"
},
"order_No": "10"
},
{
"charging": {
"before_Per": "100",
"after_Per": "51"
},
"order_No": "11"
},
{
"charging": {
"before_Per": "100",
"after_Per": "51"
},
"order_No": "12"
},
{
"charging": {
"before_Per": "51",
"after_Per": "51"
},
"order_No": "14"
},
{
"charging": {
"before_Per": "83",
"after_Per": "51"
},
"order_No": "15"
},
{
"charging": {
"after_Per": "51",
"before_Per": "51"
},
"order_No": "13"
},
{
"charging": {
"before_Per": "100",
"after_Per": "69"
},
"order_No": "8"
},
{
"charging": {
"before_Per": "100",
"after_Per": "51"
},
"order_No": "18"
},
{
"charging": {
"after_Per": "51"
},
"order_No": "20"
},
{
"charging": {
"before_Per": "100",
"after_Per": "51"
},
"order_No": "17"
},
{
"charging": {
"after_Per": "51"
},
"order_No": "19"
}
]

console上的orderNumbers

[
"1",
"7",
"1",
"9",
"10",
"11",
"12",
"14",
"15",
"13",
"8",
"18",
"20",
"17",
"19"
]

charingbeforepercentage on console

[
{
"x": "1",
"y": 51
},
{
"x": "7",
"y": 51
},
{
"x": "1",
"y": 99
},
{
"x": "9",
"y": 51
},
{
"x": "10",
"y": 0
},
{
"x": "11",
"y": 100
},
{
"x": "12",
"y": 100
},
{
"x": "14",
"y": 51
},
{
"x": "15",
"y": 83
},
{
"x": "13",
"y": 51
},
{
"x": "8",
"y": 100
},
{
"x": "18",
"y": 100
},
{
"x": "20",
"y": 0
},
{
"x": "17",
"y": 100
},
{
"x": "19",
"y": 0
}
]

可以看到，如果chargingBeforePercentage的orderNumbers和x属性为字符串，则元素。但是，对于我的操作，我需要把它们转换成整数。因此，我使用Number()将字符串转换为整数。

我将data.order_No转换为Number(data.order_No)，然后改变输出顺序。

GET(`operations/post-flight-graph-data?orgId=${orgId}&ecoId=${ecoId}`)
.then(res => {
// order numbers
const orderNumbers = res.data.map(data => Number(data.order_No));
// battery percentage before flight
const chargingBeforePercentage = res.data.map(data => {
return {
x: Number(data.order_No),
y: parseFloat((data.charging?.before_Per) || 0)
}
});
// battery percentage after flight
const chargingAfterPercentage = res.data.map(data => {
return {
x: Number(data.order_No),
y: parseFloat((data.charging?.after_Per) || 0)
}
});
console.log('res.data', res.data)
console.log({ orderNumbers })
console.log({ chargingBeforePercentage })
console.log({ chargingAfterPercentage})
})
.catch(err => console.log(err));

Number(data.order_No)后的orderNumbers

[
1,
7,
1,
9,
10,
11,
12,
14,
15,
13,
8,
18,
20,
17,
19
]

charingbeforepercentage afterNumber(data.order_No)

[
{
"x": 1,
"y": 51
},
{
"x": 1,
"y": 99
},
{
"x": 7,
"y": 51
},
{
"x": 9,
"y": 51
},
{
"x": 10,
"y": 0
},
{
"x": 11,
"y": 100
},
{
"x": 12,
"y": 100
},
{
"x": 14,
"y": 51
},
{
"x": 15,
"y": 83
},
{
"x": 13,
"y": 51
},
{
"x": 8,
"y": 100
},
{
"x": 18,
"y": 100
},
{
"x": 20,
"y": 0
},
{
"x": 17,
"y": 100
},
{
"x": 19,
"y": 0
}
]

您可以注意到chargingBeforePercentage中的变化。

使用Number()

前

chargingBeforePercentage[0].x = '1'
chargingBeforePercentage[1].x = '7'
chargingBeforePercentage[2].x = '1'

使用Number()

后

chargingBeforePercentage[0].x = 1
chargingBeforePercentage[1].x = 1
chargingBeforePercentage[2].x = 7

为什么会发生这种情况?

Answer 1

在这段代码中可以看到，map并没有改变顺序。

let myData = [{
"charging": {
"before_Per": "51",
"after_Per": "51"
},
"order_No": "1"
},
{
"charging": {
"before_Per": "51",
"after_Per": "51"
},
"order_No": "7"
},
{
"charging": {
"before_Per": "99",
"after_Per": "86"
},
"order_No": "1"
},
{
"charging": {
"before_Per": "51",
"after_Per": "51"
},
"order_No": "9"
},
{
"charging": {
"after_Per": "51"
},
"order_No": "10"
},
{
"charging": {
"before_Per": "100",
"after_Per": "51"
},
"order_No": "11"
},
{
"charging": {
"before_Per": "100",
"after_Per": "51"
},
"order_No": "12"
},
{
"charging": {
"before_Per": "51",
"after_Per": "51"
},
"order_No": "14"
},
{
"charging": {
"before_Per": "83",
"after_Per": "51"
},
"order_No": "15"
},
{
"charging": {
"after_Per": "51",
"before_Per": "51"
},
"order_No": "13"
},
{
"charging": {
"before_Per": "100",
"after_Per": "69"
},
"order_No": "8"
},
{
"charging": {
"before_Per": "100",
"after_Per": "51"
},
"order_No": "18"
},
{
"charging": {
"after_Per": "51"
},
"order_No": "20"
},
{
"charging": {
"before_Per": "100",
"after_Per": "51"
},
"order_No": "17"
},
{
"charging": {
"after_Per": "51"
},
"order_No": "19"
}
]
const orderNumbers = myData.map(data => data.order_No);
// battery percentage before flight
const chargingBeforePercentage = myData.map(data => {
return {
x: parseInt(data.order_No),
y: parseFloat((data.charging?.before_Per) || 0)
}
});
// battery percentage after flight
const chargingAfterPercentage = myData.map(data => {
return {
x: parseInt(data.order_No),
y: parseFloat((data.charging?.after_Per) || 0)
}
});
//console.log('res.data', myData)
console.log(
orderNumbers
)
console.log({
chargingBeforePercentage
})
console.log({
chargingAfterPercentage
})