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