vue 如何將二維數組轉化為一維數組
更新時間：2022年04月24日 14:52:18 作者：推開世界的門
這篇文章主要介紹了vue 如何將二維數組轉化為一維數組，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
將二維數組轉化為一維數組
需求
數組嵌套數據，導致循環(huán)不方便，想著將二維數組合并成一維數據，方便數據的操作
具體實現
利用reduce方法
reduce：不改變原數組，返回一個新的數組。就是遍歷數組元素，從頭開始，依次往下，第一個參數是上一次的返回值，第二個參數是下一個數組元素，首次的時候第一個和第二個參數分別是 array[0], array[1] ；
let flat=[[1,2,3],[4,5,6],[6,7,8]].reduce( (prev,next)=> {
? ? return prev.concat(next);//循環(huán)將數組進行拼接
});
console.log(flat);
將多維數組轉一維數組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 ]以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了vue3鼠標拖拽滑動效果實現demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
VUE3中h()函數和createVNode()函數的使用解讀
這篇文章主要介紹了VUE3中h()函數和createVNode()函數的使用解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
如果你也和我一樣，按照正常的流程下載并且配置了stylus，但是依舊報錯，也許這篇文章就是你的菜，一起來看看吧2022-08-08
這篇文章主要為大家詳細介紹了Vue使用video標簽實現視頻播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue filter介紹及詳細使用,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
大家在vue中，經常會用到數據請求問題，常用的有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應用程序的4種方法（翻譯）
這篇文章主要介紹了使用Webpack提升Vue.js應用程序的4種方法（翻譯），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了Vue.set 全局操作,結合簡單實例形式分析了Vue.set 全局操作相關使用技巧與注意事項,需要的朋友可以參考下2019-09-09