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ù):

目標:將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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實現(xiàn)跟隨鼠標立體翻轉(zhuǎn)圖片的方法
這篇文章主要介紹了JS實現(xiàn)跟隨鼠標立體翻轉(zhuǎn)圖片的方法,涉及javascript操作圖片翻轉(zhuǎn)的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05
如何使用JavaScript實現(xiàn)無縫滾動自動播放輪播圖效果
這篇文章主要介紹了如何使用JavaScript實現(xiàn)“無縫滾動 自動播放”輪播圖效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
JavaScript中push(),join() 函數(shù) 實例詳解
本文通過實例給大家介紹了JavaScript中push(),join() 的知識,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09
JavaScript實現(xiàn)簡易輪播圖最全代碼解析(ES5)
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易輪播圖最全代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09

