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