js實現(xiàn)嵌套數(shù)組重排序
本文實例為大家分享了js實現(xiàn)嵌套數(shù)組重排序的具體代碼,供大家參考,具體內(nèi)容如下
總共遇到兩個問題:
1、JS中for循環(huán)輸出同一變量值的問題
js事件處理器在線程空閑事件不會運行,導(dǎo)致最后運行的時候輸出的都是i最后的值。
解決方法:在循環(huán)中聲明 this.content1 = {}
2、排序算法在序號到10以后出錯
解決方法:沒注意string和int,原數(shù)據(jù)為string
原數(shù)據(jù):

目標(biāo):將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>以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
獲取陰歷(農(nóng)歷)和當(dāng)前日期的js代碼
這篇文章主要為大家詳細(xì)介紹了獲取陰歷(農(nóng)歷)日期的js代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-02-02
從0到1學(xué)習(xí)JavaScript編寫貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript編寫貪吃蛇游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-07-07
Bootstrap select下拉聯(lián)動(jQuery cxselect)
這篇文章主要為大家詳細(xì)介紹了Bootstrap select下拉聯(lián)動,JQuery插件之cxselect,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01
詳解javascript中對數(shù)據(jù)格式化的思考
本篇文章主要介紹了詳解javascript中對數(shù)據(jù)文本格式化的思考 ,具有一定的參考價值,有興趣的可以了解一下。2017-01-01
APP中javascript+css3實現(xiàn)下拉刷新效果
本文給大家分享的是如何在APP中使用javascript結(jié)合CSS3實現(xiàn)下拉刷新特效的代碼,非常的簡單實用,有需要的小伙伴可以參考下。2016-01-01
JavaScript實現(xiàn)2種常見的抽獎效果實例代碼
抽獎系統(tǒng)是一種常見的功能,可以用于各種活動和網(wǎng)站,這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)2種常見的抽獎效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01

