vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組
更新時(shí)間：2022年04月24日 14:52:18 作者：推開(kāi)世界的門(mén)
這篇文章主要介紹了vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
將二維數(shù)組轉(zhuǎn)化為一維數(shù)組
需求
數(shù)組嵌套數(shù)據(jù)，導(dǎo)致循環(huán)不方便，想著將二維數(shù)組合并成一維數(shù)據(jù)，方便數(shù)據(jù)的操作
具體實(shí)現(xiàn)
利用reduce方法
reduce：不改變?cè)瓟?shù)組，返回一個(gè)新的數(shù)組。就是遍歷數(shù)組元素，從頭開(kāi)始，依次往下，第一個(gè)參數(shù)是上一次的返回值，第二個(gè)參數(shù)是下一個(gè)數(shù)組元素，首次的時(shí)候第一個(gè)和第二個(gè)參數(shù)分別是 array[0], array[1] ；
let flat=[[1,2,3],[4,5,6],[6,7,8]].reduce( (prev,next)=> {
? ? return prev.concat(next);//循環(huán)將數(shù)組進(jìn)行拼接
});
console.log(flat);
將多維數(shù)組轉(zhuǎn)一維數(shù)組6種方法
ES6 flat方法
var arr=[1,[[[2,3],4]],5]; arr.flat(Infinity)//[1, 2, 3, 4, 5]
遞歸
var arr=[1,[[[2,3],4]],5];
var newArr=[];
function Arr(arr){
? ? arr.map(item=>{
? ? ? ? if(Array.isArray(item)){
? ? ? ? ? ? ?Arr(item)
? ? ? ? }else{
? ? ? ? ? ? newArr.push(item)
? ? ? ? }
? ? })
? ? return newArr
}
console.log(Arr(arr));//[ 1, 2, 3, 4, 5 ]reduce +concat + 遞歸
var arr=[[[[2,3],4]],5];
function concatArr(arr){
? var newArr=arr.reduce((pre,next)=>{
? ? ? ?return pre.concat(Array.isArray(next)?concatArr(next):next)
? },[])
? return newArr;
}
console.log(concatArr(arr));//[ 2, 3, 4, 5 ]join+split
var arr=[[1,2],3,[4,[5]]];
var arr1=arr.join().split(',');
console.log(arr1);//["1", "2", "3", "4", "5"]toString+split
var arr=[[1,2],3,[4,[5]]];
var arr1=arr.toString().split(',');
console.log(arr1);//["1", "2", "3", "4", "5"]eval
var arr=[[1,2],3,[4,[5]]];
var arr1=eval('[' + arr + ']');
console.log(arr1);//[ 1, 2, 3, 4, 5 ]以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3鼠標(biāo)拖拽滑動(dòng)效果實(shí)現(xiàn)demo
這篇文章主要為大家介紹了vue3鼠標(biāo)拖拽滑動(dòng)效果實(shí)現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀
這篇文章主要介紹了VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
如果你也和我一樣，按照正常的流程下載并且配置了stylus，但是依舊報(bào)錯(cuò)，也許這篇文章就是你的菜，一起來(lái)看看吧2022-08-08
Vue使用video標(biāo)簽實(shí)現(xiàn)視頻播放
這篇文章主要為大家詳細(xì)介紹了Vue使用video標(biāo)簽實(shí)現(xiàn)視頻播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue filter介紹及詳細(xì)使用,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
關(guān)于vue中的ajax請(qǐng)求和axios包問(wèn)題
大家在vue中，經(jīng)常會(huì)用到數(shù)據(jù)請(qǐng)求問(wèn)題，常用的有vue-resourse、axios ，今天小編給大家介紹下axios的post請(qǐng)求 ，感興趣的朋友跟隨腳本之家小編一起看看吧2018-04-04
本篇文章主要介紹了詳解vue2路由vue-router配置（懶加載），實(shí)例分析了vue-router懶加載的技巧，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-04-04
vue3插槽:el-table表頭插入tooltip及更換表格背景色方式
這篇文章主要介紹了vue3插槽:el-table表頭插入tooltip及更換表格背景色方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
使用Webpack提升Vue.js應(yīng)用程序的4種方法（翻譯）
這篇文章主要介紹了使用Webpack提升Vue.js應(yīng)用程序的4種方法（翻譯），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了Vue.set 全局操作,結(jié)合簡(jiǎn)單實(shí)例形式分析了Vue.set 全局操作相關(guān)使用技巧與注意事項(xiàng),需要的朋友可以參考下2019-09-09