js實(shí)現(xiàn)嵌套數(shù)組重排序
本文實(shí)例為大家分享了js實(shí)現(xiàn)嵌套數(shù)組重排序的具體代碼,供大家參考,具體內(nèi)容如下
總共遇到兩個(gè)問題:
1、JS中for循環(huán)輸出同一變量值的問題
js事件處理器在線程空閑事件不會(huì)運(yùn)行,導(dǎo)致最后運(yùn)行的時(shí)候輸出的都是i最后的值。
解決方法:在循環(huán)中聲明 this.content1 = {}
2、排序算法在序號(hào)到10以后出錯(cuò)
解決方法:沒注意string和int,原數(shù)據(jù)為string
原數(shù)據(jù):
目標(biāo):將table、text、image合并到一個(gè)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)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
獲取陰歷(農(nóng)歷)和當(dāng)前日期的js代碼
這篇文章主要為大家詳細(xì)介紹了獲取陰歷(農(nóng)歷)日期的js代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02從0到1學(xué)習(xí)JavaScript編寫貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript編寫貪吃蛇游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07原生JS實(shí)現(xiàn)列表內(nèi)容自動(dòng)向上滾動(dòng)效果
這篇文章主要介紹了原生JS實(shí)現(xiàn)列表內(nèi)容自動(dòng)向上滾動(dòng)效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05JavaScript實(shí)現(xiàn)時(shí)間范圍效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)時(shí)間范圍效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05Bootstrap select下拉聯(lián)動(dòng)(jQuery cxselect)
這篇文章主要為大家詳細(xì)介紹了Bootstrap select下拉聯(lián)動(dòng),JQuery插件之cxselect,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01詳解javascript中對(duì)數(shù)據(jù)格式化的思考
本篇文章主要介紹了詳解javascript中對(duì)數(shù)據(jù)文本格式化的思考 ,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01APP中javascript+css3實(shí)現(xiàn)下拉刷新效果
本文給大家分享的是如何在APP中使用javascript結(jié)合CSS3實(shí)現(xiàn)下拉刷新特效的代碼,非常的簡單實(shí)用,有需要的小伙伴可以參考下。2016-01-01JavaScript實(shí)現(xiàn)2種常見的抽獎(jiǎng)效果實(shí)例代碼
抽獎(jiǎng)系統(tǒng)是一種常見的功能,可以用于各種活動(dòng)和網(wǎng)站,這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)2種常見的抽獎(jiǎng)效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01ES6中Class類的靜態(tài)方法實(shí)例小結(jié)
這篇文章主要介紹了ES6中Class類的靜態(tài)方法,結(jié)合實(shí)例形式簡單總結(jié)分析了ES6中class類中靜態(tài)方法的使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-10-10js實(shí)現(xiàn)下載(文件流式)方法詳解與完整實(shí)例源碼
這篇文章主要介紹了js實(shí)現(xiàn)下載(文件流式)的方法,需要的朋友可以參考下2022-12-12