本文详解在JavaScript中处理嵌套数组重排序时遇到的两个典型问题：一是for循环中变量值被后续迭代覆盖，通过在循环内重新声明对象解决；二是字符串类型的blockNO导致排序错误，需确保数据类型为整数。结合Vue.js代码示例，提供完整解决方案。
JS嵌套数组排序问题概述
本文分享一个使用JavaScript实现嵌套数组重排序的具体代码示例，供读者参考。
在实现过程中，主要遇到了两个关键问题：
解决for循环变量捕获问题
第一个问题是JavaScript中for循环输出同一变量值的现象。
由于JS事件处理器在线程空闲时才会执行，导致最终输出时，所有循环项都保留了变量i的最终值。
解决该问题的方法是在循环内部重新声明对象，例如执行 this.content1 = {}，以确保每次迭代拥有独立的对象引用。
修复字符串类型排序错误
第二个问题是排序算法在序号达到10之后出现错误。
原因在于未区分字符串和整数类型，原始数据中的blockNO为字符串类型，导致按字典序排序而非数值排序。
以下是原始数据的结构示意：
目标是合并table、text、image到统一的content字段中，并依据blockNO进行正确排序。
完整代码实现
具体实现代码如下：
<script>
export default {
data() {
return {
data: [],
content1: {}
}
},
created() {
this.test()
},
methods: {
async test() {
const { data: res } = await this.$http.get('test1')
for (let i = 0; i < res.length; i++) {
this.data1 = {}
this.data1.name = res[i].name
this.data1.blockNO = res[i].blockNO
this.data1.class = res[i].class
this.data1.id = res[i].id
this.data1.children = []
this.data1.content = []
if (res[i].text) {
for (let j = 0; j < res[i].text.length; j++) {
this.content1 = {}
this.content1.blockNO = res[i].text[j].blockNO
this.content1.type = 'text'
this.content1.detail = res[i].text[j].text
this.data1.content.push(this.content1)
}
}
if (res[i].table) {
for (let j = 0; j < res[i].table.length; j++) {
this.content1 = {}
this.content1.blockNO = res[i].table[j].blockNO
this.content1.type = 'table'
this.content1.detail = res[i].table[j].table
this.data1.content.push(this.content1)
}
}
if (res[i].image) {
for (let j = 0; j < res[i].image.length; j++) {
this.content1 = {}
this.content1.blockNO = res[i].image[j].blockNO
this.content1.type = 'image'
this.content1.detail = res[i].image[j].image
this.data1.content.push(this.content1)
}
}
for (let j = 1; j < this.data1.content.length; j++) {
for (let i = 0; i < this.data1.content.length - j; i++) {
if (
parseInt(this.data1.content[i].blockNO) >
parseInt(this.data1.content[i + 1].blockNO)
) {
let tempnum = this.data1.content[i + 1]
this.data1.content[i + 1] = this.data1.content[i]
this.data1.content[i] = tempnum
}
}
}
this.data.push(this.data1)
}
console.log(this.data)
}
}
}
</script>以上就是本文的全部内容，希望对大家的学习有所帮助，也欢迎大家继续支持本站。