JS实现嵌套数组重排序:解决循环变量与字符串排序问题
作者:雾松时间:2026-10-24 22:23:59浏览:129
本文详解在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>以上就是本文的全部内容,希望对大家的学习有所帮助,也欢迎大家继续支持本站。
作者最新文章
Vue项目中怎么集成JS颜色选择器组件
2026-11-05 13:28:32
Nuxt 3 快速上手:项目初始化与目录结构详解
2026-11-03 19:16:51
怎么在 Vue 或 React 项目中正确集成 viewer.js
2026-11-02 09:17:48
Vue3+Vue-Router+Vite实现动态路由的完整流程与代码示例
2026-11-01 03:30:58
el-tree限制选中个数的实例
2026-11-01 03:09:07
