js最全的數組的降維5種辦法(小結)
更新時間：2020年04月28日 09:22:34 作者：淡水河橋
這篇文章主要介紹了js最全的數組的降維5種辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
業(yè)務開發(fā)中，二維數組、多維數組轉為一維數組這種需求是少不了的，有些多維數組里面可能嵌套會更深，數組降維就是來解決此問題的
1、數組字符串化
let arr = [[222, 333, 444], [55, 66, 77], {a: 1} ]
arr += '';
arr = arr.split(',');
console.log(arr); // ["222", "333", "444", "55", "66", "77", "[object Object]"]
所有的元素會轉換為字符串，且元素為對象類型會被轉換為 "[object Object]" ，對于同一種類型數字或字符串還是可以的。
2、遞歸
function reduceDimension(arr){
let ret = [];
let toArr = function(arr){
arr.forEach(function(item){
item instanceof Array ? toArr(item) : ret.push(item);
});
}
toArr(arr);
return ret;
}
3、Array.prototype.flat()
var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] var arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]] var arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6] //使用 Infinity 作為深度，展開任意深度的嵌套數組 arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6]
4、
// 不使用遞歸，使用 stack 無限反嵌套多層嵌套數組
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flatten(input) {
const stack = [...input];
const res = [];
while (stack.length) {
// 使用 pop 從 stack 中取出并移除值
const next = stack.pop();
if (Array.isArray(next)) {
// 使用 push 送回內層數組中的元素，不會改動原始輸入 original input
stack.push(...next);
} else {
res.push(next);
}
}
// 使用 reverse 恢復原數組的順序
return res.reverse();
}
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
5、
// 使用 reduce、concat 和遞歸無限反嵌套多層嵌套的數組
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flattenDeep(arr1) {
return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
}
flattenDeep(arr1);
// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
到此這篇關于js最全的數組的降維5種辦法(小結)的文章就介紹到這了,更多相關js 數組降維內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
firefox沒有outerHTML用以下方法解決2009-06-06
這篇文章給大家詳細介紹了electron 如何獲取位置坐標信息,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-02-02
瀏覽器環(huán)境下JavaScript腳本加載與執(zhí)行探析之defer與async特性
defer和async特性相信是很多JavaScript開發(fā)者"熟悉而又不熟悉"的兩個特性，從字面上來看，二者的功能很好理解，分別是"延遲腳本"和"異步腳本"的作用2016-01-01
這篇文章主要介紹了在js中如何準確的判斷一個變量的類型，文中代碼非常詳細，幫助大家更好的學習，有興趣的朋友可以了解下2020-06-06
本文主要介紹了ES6 Promise.race的用法詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-09-09
uni-app是一個使用 Vue.js 開發(fā)所有前端應用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個平臺,這篇文章主要給大家介紹了關于利用uni-app生成微信小程序的踩坑記錄,需要的朋友可以參考下2022-04-04
呵呵，又弄成了三部曲，這是最后一部分，關于鼠標和瀏覽器本身顯示上的一些屬性。2010-06-06
javascript實現的textarea運行框效果代碼 不用指定id批量指定
今天在寫一個網頁的時候用到了N多嵌套在textarea標簽里的代碼，定義雙擊運行其內的代碼段。但是每次創(chuàng)建一個這樣的可運行的實例都要給textarea元素自定義一個id值和寫入雙擊事件，好不麻煩。2009-12-12
JavaScript箭頭函數與普通函數的區(qū)別示例詳解
這篇文章主要為大家介紹了JavaScript箭頭函數與普通函數的區(qū)別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
任意一個名稱都是有意義的，先從字面意思來理解。async 是“異步”的簡寫，而 await 可以認為是 async wait 的簡寫。所以應該很好理解 async 用于申明一個 function 是異步的，而 await 用于等待一個異步方法執(zhí)行完成2022-12-12