当我使用 Number() 时，JavaScript 数组映射更改元素的顺序
Posted
技术标签:
【中文标题】当我使用 Number() 时，JavaScript 数组映射更改元素的顺序【英文标题】：JavaScript array map change order of elements when i use Number() 【发布时间】：2021-10-30 21:19:55 【问题描述】：我正在向服务器发出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"
]
控制台上的订单号
[
"1",
"7",
"1",
"9",
"10",
"11",
"12",
"14",
"15",
"13",
"8",
"18",
"20",
"17",
"19"
]
在控制台上的chargeBeforePercentage
[
"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) 之后的订单号
[
1,
7,
1,
9,
10,
11,
12,
14,
15,
13,
8,
18,
20,
17,
19
]
chargingBeforePercentage after Number(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
为什么会这样？
【问题讨论】：
How do I ask a good question? -> 添加minimal reproducible example。 minimal reproducible example 需要一组最小的输入、实际输出和显示行为的预期输出。我们还需要生成“实际输出”的代码（我在您的脚本中没有看到任何Number(...) 调用。）
我不确定到底发生了什么，但我很确定你弄错了。您所描述的根本不可能；映射不会像那样改变顺序。我的猜测是服务器上的顺序发生了变化，而您正在查看两个单独请求的输出。因此，除非您发布显示订单已更改的控制台输出屏幕截图，否则我会将其归档在“不可重现”下
请将代码、错误消息、标记和其他文本信息作为文本发布，而不是作为文本的图片。为什么：meta.***.com/q/285551/157247
@Andreas Add a minimal reproducible example上面的代码本身就是完整的，你可以看到没有其他功能或涉及什么
@Rahul 您声称 Number() 更改了映射顺序，并且在您共享的代码示例中无处可见。除非你分享没有人知道发生了什么以及为什么。
【参考方案1】：
正如你在这个 sn-p 中看到的，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
)【讨论】：
使用 Number() 没问题。 相同行为parseInt
不管怎样，顺序应该是一样的。检查您的服务器响应。
regardless, the order should be the same. check your server response 我已经提到我在客户端得到的服务器响应
@Rahul 运行我添加的代码 sn-p。顺序保持不变。以上是关于当我使用 Number() 时，JavaScript 数组映射更改元素的顺序的主要内容，如果未能解决你的问题，请参考以下文章
javascrip中，数字转化为字符串，怎么转？例如 var s="12"+34,则s的值为多少？