vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組
更新時間：2022年04月24日 14:52:18 作者：推開世界的門
這篇文章主要介紹了vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
將二維數(shù)組轉(zhuǎn)化為一維數(shù)組
需求
數(shù)組嵌套數(shù)據(jù)，導致循環(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ù)組進行拼接
});
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)文章
這篇文章主要介紹了vue如何還原data中數(shù)據(jù)-重置問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能
這篇文章主要介紹了vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
Vue3后臺管理系統(tǒng)之創(chuàng)建和配置項目
后臺管理系統(tǒng)是我們?nèi)粘ｉ_發(fā)學習經(jīng)常遇到的一個項目,下面這篇文章主要給大家介紹了關(guān)于Vue3后臺管理系統(tǒng)之創(chuàng)建和配置項目的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細介紹了Vue3中使用富文本編輯器的相關(guān)知識,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以參考一下2023-10-10
使用VueRouter的addRoutes方法實現(xiàn)動態(tài)添加用戶的權(quán)限路由
這篇文章主要介紹了使用VueRouter的addRoutes方法實現(xiàn)動態(tài)添加用戶的權(quán)限路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要介紹了詳解vue中this.$emit()的返回值是什么，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了VueJs打包之后遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要給大家介紹了關(guān)于Vue+element-ui添加自定義右鍵菜單的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要和大家一起學習vue.js的計算屬性，分享一些計算屬性練習代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
vue?el-table中使用el-select選中后無效的解決
這篇文章主要介紹了vue?el-table中使用el-select選中后無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08