JavaScript這么實(shí)現(xiàn)數(shù)組扁平化

這篇“JavaScript這么實(shí)現(xiàn)數(shù)組扁平化”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“JavaScript這么實(shí)現(xiàn)數(shù)組扁平化”文章吧。

　　概念：用于將嵌套多層的數(shù)組“拉平”，變成一維的數(shù)組

　　方法一：通過(guò)concat將二維數(shù)組轉(zhuǎn)化為一維數(shù)組

　　原理：通過(guò)將擴(kuò)展運(yùn)算符，將數(shù)組內(nèi)部展開，并通過(guò)concat連接兩個(gè)字符串的方式返回一個(gè)新的數(shù)組

　　let a = [12, 3, 45, [6, 7, 8]]

　　console.log(a)   // [12, 3, 45, Array(3)]

　　console.log([].concat(...a))  // [12, 3, 45, 6, 7, 8]

　　方法二：使用數(shù)組方法join和字符串方法split進(jìn)行數(shù)組扁平化

　　原理：通過(guò)join方法將數(shù)組轉(zhuǎn)化為以點(diǎn)隔開的字符串，在使用split把轉(zhuǎn)化的字符串轉(zhuǎn)化成字符串?dāng)?shù)組，通過(guò)。map方法將內(nèi)部字符串轉(zhuǎn)化數(shù)字類型的

　　let a = [4, 1, 2, 3, 6, [7, 8, [3, 9, 10, [4, 6, 11]]]];

　　let b = a.join(',').split(',').map(Number)

　　console.log(b) // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, 4, 6, 11]

　　方法三：通過(guò)正則方法和JSON.stringify方法和數(shù)組方法

　　原理：首先將數(shù)組轉(zhuǎn)化為字符串 使用字符串匹配正則規(guī)則 替換所有的 '[' ']' 和方法二類似 split 主要是講字符串轉(zhuǎn)化為數(shù)組，map將字符串?dāng)?shù)組轉(zhuǎn)化為數(shù)字

　　let a = [4, 1, 2, 3, 6, [7, 8, [3, 9, 10, [4, 6, 11]]]];

　　let c = JSON.stringify(a).replace(/\[|\]/g, '').split(',').map(Number);

　　console.log(c) // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, 4, 6, 11]

　　方法四：函數(shù)遞歸

　　原理：判斷獲取的當(dāng)前值是不是數(shù)組，是數(shù)組就遞歸調(diào)用

　　let d = [];

　　let fn = arr => {

　　for (let i = 0; i < arr.length; i++) {

　　if (Array.isArray(arr[i])) {

　　fn(arr[i]);

　　} else {

　　d.push(arr[i]);

　　}

　　}

　　}

　　fn(a)

　　console.log(d) // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, 4, 6, 11]

　　方法五：通過(guò)reduce方法進(jìn)行數(shù)組扁平化

　　原理：主要是通過(guò)reduce的依次執(zhí)行，判斷當(dāng)前拿到的對(duì)象是不是數(shù)組， 是數(shù)組就進(jìn)行一次函數(shù)遞歸將內(nèi)部所有數(shù)組扁平化（與方法四類似）

　　let a = [4, 1, 2, 3, 6, [7, 8, [3, 9, 10, [4, 6, 11]]]];

　　function flatten(arr) {

　　return arr.reduce((result, item) => {

　　console.log(result, item); // 查看結(jié)果你會(huì)發(fā)現(xiàn)，把每個(gè)數(shù)組進(jìn)行拆分并取出

　　return result.concat(Array.isArray(item) ? flatten(item) : item);

　　}, []);

　　};

　　console.log(flatten(a)) // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, 4, 6, 11]

　　方法六：ES6新增方法flat()

　　let a = [4, 1, 2, 3, 6, [7, 8, [3, 9, 10, [4, 6, 11]]]];

　　let e = a.flat()   // 不傳參的時(shí)候 表示將二維數(shù)組轉(zhuǎn)一維數(shù)組

　　console.log(e)     // [4, 1, 2, 3, 6, 7, 8, Array(4)]

　　let f = a.flat(2)  // 傳入2 表示將兩層嵌套數(shù)組 轉(zhuǎn)化為一維數(shù)組

　　console.log(f)     // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, Array(3)]

　　let g = a.flat(Infinity) // Infinity 使用這個(gè)關(guān)鍵字可以將所包含的所謂數(shù)組轉(zhuǎn)化為一維數(shù)組

　　console.log(g)     // [4, 1, 2, 3, 6, 7, 8, 3, 9, 10, 4, 6, 11]

　　數(shù)組去重

　　概念：去除數(shù)組中重復(fù)重新的值

　　方法一：循環(huán)遍歷截取

　　原理:通過(guò)每次循環(huán)遍歷比較當(dāng)前值在不在數(shù)組中，在就刪除當(dāng)前值并且索引減一，弊端，會(huì)改變?cè)瓟?shù)組

　　let arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];

　　function removeDuplicatedItem(arr) {

　　for (var i = 0; i < arr.length - 1; i++) {

　　for (var j = i + 1; j < arr.length; j++) {

　　if (arr[i] === arr[j]) {

　　arr.splice(j, 1);//console.log(arr[j]);

　　j--;

　　}

　　}

　　}

　　return arr;

　　}

　　let arr2 = removeDuplicatedItem(arr);

　　console.log(arr);  // [1, 23, 3, 5, 6, 7, 9, 8]

　　console.log(arr2); // [1, 23, 3, 5, 6, 7, 9, 8]

　　方法二：借助indexOf()方法

　　原理：判斷此元素在該數(shù)組中首次出現(xiàn)的位置下標(biāo)與循環(huán)的下標(biāo)是否相等 與方法一類似

　　let arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];

　　function rep2(arr) {

　　for (var i = 0; i < arr.length; i++) {

　　// console.log(arr.indexOf(arr[i])); 可以輸出當(dāng)前元素首次出現(xiàn)的索引

　　if (arr.indexOf(arr[i]) !== i) {

　　arr.splice(i, 1);//刪除數(shù)組元素后數(shù)組長(zhǎng)度減1后面的元素前移

　　i--;//數(shù)組下標(biāo)回退

　　}

　　}

　　return arr;

　　}

　　let arr2 = rep2(arr);

　　console.log(arr);  // [1, 23, 3, 5, 6, 7, 9, 8]

　　console.log(arr2); // [1, 23, 3, 5, 6, 7, 9, 8]

　　方法三：借助新數(shù)組和indexOf()方法

　　原理：通過(guò)indexOf方判斷當(dāng)前元素在數(shù)組中的索引如果與循環(huán)的下標(biāo)相等則添加到新數(shù)組中 原數(shù)組不變

　　let  arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];

　　function rep(arr) {

　　let ret = [];

　　for (var i = 0; i < arr.length; i++) {

　　if (arr.indexOf(arr[i]) == i) {

　　ret.push(arr[i]);

　　}

　　}

　　return ret;

　　}

　　let arr2 = rep(arr);

　　console.log(arr);  // [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]

　　console.log(arr2); // [1, 23, 3, 5, 6, 7, 9, 8]

　　方法四：借助空對(duì)象

　　原理：通過(guò)對(duì)象來(lái)記錄新數(shù)組中已存儲(chǔ)過(guò)的元素 不改變?cè)瓟?shù)組 與方法三類似

　　let arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];

　　let o = {};

　　let arr2 = [];

　　for (var i = 0; i < arr.length; i++) {

　　var k = arr[i];

　　if (!o[k]) {

　　o[k] = true;

　　arr2.push(k);

　　}

　　}

　　console.log(arr);  // [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]

　　console.log(arr2); // [1, 23, 3, 5, 6, 7, 9, 8]

　　方法五：filter方法

　　原理：查找當(dāng)前元素索引出現(xiàn)的位置是否與當(dāng)前元素索引值相等，是表示true返回 ，如果當(dāng)前元素索引不等與當(dāng)前索引，說(shuō)明已經(jīng)出現(xiàn)過(guò)，出現(xiàn)過(guò)就不返回。 原數(shù)組不變

　　let arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];

　　let arr2 = arr.filter(function (element, index, array) {

　　return array.indexOf(element) === index;

　　});

　　console.log(arr);  // [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]

　　console.log(arr2); // [1, 23, 3, 5, 6, 7, 9, 8]

　　方法六：使用include方法

　　原理：與indexOf類似，判斷當(dāng)前元素是否存在，不存在就添加 不改變?cè)瓟?shù)組

　　let arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];

　　function rep() {

　　let res = [];

　　for (let i = 0; i < arr.length; i++) {

　　if (!res.includes(arr[i])) res.push(arr[i]);

　　}

　　return res;

　　}

　　console.log(arr);  // [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]

　　console.log(rep()); // [1, 23, 3, 5, 6, 7, 9, 8]

　　方法七：es6 新增數(shù)據(jù)結(jié)構(gòu) new Set()方法

　　原理：new Set() 的成員具有唯一性，不能重復(fù)

　　let arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];

　　let arr2 = new Set(arr)

　　console.log(arr);  // [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]

　　console.log(arr2)  // {1, 23, 3, 5, 6, &hellip;}

　　console.log(rep()); // [1, 23, 3, 5, 6, 7, 9, 8]

以上就是關(guān)于“JavaScript這么實(shí)現(xiàn)數(shù)組扁平化”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。