js最全的數(shù)組的降維5種辦法(小結(jié))
業(yè)務(wù)開發(fā)中,二維數(shù)組、多維數(shù)組轉(zhuǎn)為一維數(shù)組這種需求是少不了的,有些多維數(shù)組里面可能嵌套會更深,數(shù)組降維就是來解決此問題的
1、數(shù)組字符串化
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]"]
所有的元素會轉(zhuǎn)換為字符串,且元素為對象類型會被轉(zhuǎn)換為 "[object Object]" ,對于同一種類型數(shù)字或字符串還是可以的。
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 作為深度,展開任意深度的嵌套數(shù)組 arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6]
4、
// 不使用遞歸,使用 stack 無限反嵌套多層嵌套數(shù)組
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 送回內(nèi)層數(shù)組中的元素,不會改動原始輸入 original input
stack.push(...next);
} else {
res.push(next);
}
}
// 使用 reverse 恢復(fù)原數(shù)組的順序
return res.reverse();
}
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
5、
// 使用 reduce、concat 和遞歸無限反嵌套多層嵌套的數(shù)組
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]
到此這篇關(guān)于js最全的數(shù)組的降維5種辦法(小結(jié))的文章就介紹到這了,更多相關(guān)js 數(shù)組降維內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Firefox outerHTML實(shí)現(xiàn)代碼
firefox沒有outerHTML用以下方法解決2009-06-06
electron獲取位置坐標(biāo)信息的方法小結(jié)
這篇文章給大家詳細(xì)介紹了electron 如何獲取位置坐標(biāo)信息,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
瀏覽器環(huán)境下JavaScript腳本加載與執(zhí)行探析之defer與async特性
defer和async特性相信是很多JavaScript開發(fā)者"熟悉而又不熟悉"的兩個特性,從字面上來看,二者的功能很好理解,分別是"延遲腳本"和"異步腳本"的作用2016-01-01
javascript實(shí)現(xiàn)的textarea運(yùn)行框效果代碼 不用指定id批量指定
今天在寫一個網(wǎng)頁的時候用到了N多嵌套在textarea標(biāo)簽里的代碼,定義雙擊運(yùn)行其內(nèi)的代碼段。但是每次創(chuàng)建一個這樣的可運(yùn)行的實(shí)例都要給textarea元素自定義一個id值和寫入雙擊事件,好不麻煩。2009-12-12
JavaScript箭頭函數(shù)與普通函數(shù)的區(qū)別示例詳解
這篇文章主要為大家介紹了JavaScript箭頭函數(shù)與普通函數(shù)的區(qū)別示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10

