js實現(xiàn)一維數(shù)組轉(zhuǎn)化為二維數(shù)組兩種簡單方法
問題
用 js 實現(xiàn)一維數(shù)組轉(zhuǎn)化為二維數(shù)組
分析
1. for 循環(huán) + slice 方法
使用 JavaScript 的循環(huán)和 slice 方法來將數(shù)組 [160, 20, 179, 10, -170, -20] 轉(zhuǎn)化為 [[160, 20], [179, 10], [-170, -20]]。以下是一個示例代碼:
const arr = [160, 20, 179, 10, -170, -20];
const result = [];
for (let i = 0; i < arr.length; i += 2) {
result.push(arr.slice(i, i + 2));
}
console.log(result); // 輸出轉(zhuǎn)化后的數(shù)組
在上述代碼中,通過循環(huán)遍歷原始數(shù)組,每次取兩個元素并使用 slice 方法將其組成一個新的子數(shù)組,然后將子數(shù)組添加到結(jié)果數(shù)組中。
最后,通過 console.log 輸出轉(zhuǎn)化后的數(shù)組 result。
2. flatMap 方法
用 flatMap 方法來簡化將數(shù)組 [160, 20, 179, 10, -170, -20] 轉(zhuǎn)換為 [[160, 20], [179, 10], [-170, -20]] 的過程。以下是使用 flatMap 的示例代碼:
const arr = [160, 20, 179, 10, -170, -20];
const result = arr.flatMap((value, index, array) => {
if (index % 2 === 0) {
return [array.slice(index, index + 2)];
}
return [];
});
console.log(result); // 輸出轉(zhuǎn)化后的數(shù)組
在上述代碼中,我們使用 flatMap 方法來遍歷原始數(shù)組 arr。在回調(diào)函數(shù)中,我們檢查當(dāng)前元素的索引是否為偶數(shù),如果是,則使用 slice 方法將當(dāng)前元素和下一個元素組成一個子數(shù)組,并返回該子數(shù)組。如果索引為奇數(shù),則返回一個空數(shù)組。
最后,通過 console.log 輸出轉(zhuǎn)化后的數(shù)組 result。
這里順便說下,如何將多維數(shù)組轉(zhuǎn)換成一維數(shù)組?
const arr3 = [1,[2,3],[4,[5,[6]],7]]; const res3 = arr3.flat(Infinity) 這里的Infinity是flat方法默認(rèn)參數(shù),默認(rèn)轉(zhuǎn)換為一維數(shù)組 console.log(res3);
輸出

可以看到,使用flat方法的默認(rèn)參數(shù)Infinity,直接把多維數(shù)組轉(zhuǎn)換成了一維數(shù)組;
其它情況
const arr3 = [1,[2,3],[4,[5,[6]],7]]; 1、flat不傳參數(shù)時,默認(rèn)去除一層數(shù)組嵌套 console.log(arr3.flat()); //控制臺輸出 [1,2,3,4,[5,[6]],7]; 2、flat傳入一個整數(shù)參數(shù)時,即拉平的層數(shù) console.log(arr3.flat(2)); //控制臺輸出 [1,2,3,4,5,[6],7]; 3、flat傳入小于等于0的整數(shù)時,將返回原數(shù)組 console.log(arr3.flat(0)); //控制臺輸出 [1,[2,3],[4,[5,[6]],7]] console.log(arr3.flat(-1)); //控制臺輸出 [1,[2,3],[4,[5,[6]],7]]
總結(jié)
到此這篇關(guān)于js實現(xiàn)一維數(shù)組轉(zhuǎn)化為二維數(shù)組兩種簡單方法的文章就介紹到這了,更多相關(guān)js一維數(shù)組轉(zhuǎn)化二維數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中EventBus實現(xiàn)對象之間通信
這篇文章主要介紹了JavaScript中EventBus實現(xiàn)對象之間通信,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
微信小程序通過websocket實時語音識別的實現(xiàn)代碼
這篇文章主要介紹了微信小程序通過websocket實時語音識別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
微信小程序template模板與component組件的區(qū)別和使用詳解
這篇文章主要介紹了微信小程序template模板與component組件的區(qū)別和使用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
javascript實現(xiàn)焦點滾動圖效果 具體方法
以下JS代碼實現(xiàn)了焦點滾動圖的效果方法,有需要的朋友可以參考一下2013-06-06
基于Web Audio API實現(xiàn)音頻可視化效果
這篇文章主要介紹了基于Web Audio API實現(xiàn)音頻可視化效果,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
Echarts?graph關(guān)系圖的使用入門級教程
近期需要使用echarts關(guān)系圖,這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于Echarts?graph關(guān)系圖使用的相關(guān)資料,文中給出了詳細(xì)的代碼介紹,需要的朋友可以參考下2024-01-01

