js實(shí)現(xiàn)一維數(shù)組轉(zhuǎn)化為二維數(shù)組兩種簡(jiǎn)單方法
問題
用 js 實(shí)現(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]]。以下是一個(gè)示例代碼:
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ù)組,每次取兩個(gè)元素并使用 slice 方法將其組成一個(gè)新的子數(shù)組,然后將子數(shù)組添加到結(jié)果數(shù)組中。
最后,通過 console.log 輸出轉(zhuǎn)化后的數(shù)組 result。
2. flatMap 方法
用 flatMap 方法來簡(jiǎn)化將數(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)前元素和下一個(gè)元素組成一個(gè)子數(shù)組,并返回該子數(shù)組。如果索引為奇數(shù),則返回一個(gè)空數(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ù)時(shí),默認(rèn)去除一層數(shù)組嵌套 console.log(arr3.flat()); //控制臺(tái)輸出 [1,2,3,4,[5,[6]],7]; 2、flat傳入一個(gè)整數(shù)參數(shù)時(shí),即拉平的層數(shù) console.log(arr3.flat(2)); //控制臺(tái)輸出 [1,2,3,4,5,[6],7]; 3、flat傳入小于等于0的整數(shù)時(shí),將返回原數(shù)組 console.log(arr3.flat(0)); //控制臺(tái)輸出 [1,[2,3],[4,[5,[6]],7]] console.log(arr3.flat(-1)); //控制臺(tái)輸出 [1,[2,3],[4,[5,[6]],7]]
總結(jié)
到此這篇關(guān)于js實(shí)現(xiàn)一維數(shù)組轉(zhuǎn)化為二維數(shù)組兩種簡(jiǎn)單方法的文章就介紹到這了,更多相關(guān)js一維數(shù)組轉(zhuǎn)化二維數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)簡(jiǎn)單購物小表格
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單購物小表格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09發(fā)兩個(gè)小東西,ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的
發(fā)兩個(gè)小東西,ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的...2007-04-04原生JS實(shí)現(xiàn)圖片懶加載之頁面性能優(yōu)化
在項(xiàng)目開發(fā)中,我們往往會(huì)遇到一個(gè)頁面需要加載很多圖片的情況。這篇文章主要介紹了頁面性能優(yōu)化原生JS實(shí)現(xiàn)圖片懶加載 ,需要的朋友可以參考下2019-04-04window.event.keyCode兼容IE和Firefox實(shí)現(xiàn)js代碼
window.event.keyCode兼容IE和Firefox具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以參考下哈2013-05-05js 判斷一個(gè)數(shù)字是不是2的n次方冪的實(shí)例
下面小編就為大家分享一篇js 判斷一個(gè)數(shù)字是不是2的n次方冪的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助2017-11-11微信小程序項(xiàng)目實(shí)踐之九宮格實(shí)現(xiàn)及item跳轉(zhuǎn)功能
這篇文章主要介紹了微信小程序項(xiàng)目實(shí)踐之九宮格實(shí)現(xiàn)及item跳轉(zhuǎn)功能,需要的朋友可以參考下2018-07-07一篇文章帶你詳細(xì)了解JavaScript數(shù)組
本文是小編給大家特意整理的關(guān)于JavaScript數(shù)組的知識(shí),非常實(shí)用,在面試筆試題中經(jīng)常用得到,有需要的朋友可以參考下2021-09-09