解數(shù)組去重和數(shù)組扁平化的方法有哪些

這篇文章主要介紹“解數(shù)組去重和數(shù)組扁平化的方法有哪些”，在日常操作中，相信很多人在解數(shù)組去重和數(shù)組扁平化的方法有哪些問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”解數(shù)組去重和數(shù)組扁平化的方法有哪些”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

數(shù)組去重

數(shù)組去重在面試中是一道基礎(chǔ)題，但仍然可以在其中挖掘許多js知識(shí)。

ES6 最常用Set 去重

Set對(duì)象是值的集合，你可以按照插入的順序迭代它的元素。 Set中的元素只會(huì)出現(xiàn)一次，即 Set 中的元素是唯一的。

function unique(arr) {     return Array.from(new Set(arr)) } let arr = [1, 1, 'true', 'true', true, true, 15, 15]; console.log(unique(arr))// [ 1, 'true', true, 15 ]  let unique2 = arr => [...new Set(arr)]  console.log(unique2(arr));// [ 1, 'true', true, 15 ]

雙重for循環(huán)

外層循環(huán)元素，內(nèi)層循環(huán)時(shí)比較值。

function unique(arr) {     for (var i = 0; i < arr.length; i++) {         for (var j = i + 1; j < arr.length; j++) {             if (arr[i] == arr[j]) {         //第一個(gè)等同于第二個(gè)，splice方法刪除第二個(gè)                 arr.splice(j, 1);                 j--;             }         }     }     return arr; } let arr = [1, 1, 'true', 'true', true, true, 15, 15]; console.log(unique(arr))// [ 1, 'true', true, 15 ]

indexOf或includes去重

當(dāng)數(shù)組內(nèi)沒(méi)有該元素時(shí)，indexOf返回-1，則把它push進(jìn)新數(shù)組。

function unique(arr) {     var array = [];     for (var i = 0; i < arr.length; i++) {         if (array .indexOf(arr[i]) === -1) {             array .push(arr[i])         }     }     return array; }

includes() 方法用于判斷字符串是否包含指定的子字符串。如果找到匹配的字符串則返回 true，否則返回 false。

function unique(arr) {     var array = [];     for (var i = 0; i < arr.length; i++) {         if (!array.includes( arr[i]) ) {             array .push(arr[i])         }     }     return array; }

filter去重

原始數(shù)組中元素的索引等于當(dāng)前索引值時(shí)返回，否則返回當(dāng)前元素

function unique(arr) {     var res = arr.filter(function(item, index, array) {         return array.indexOf(item) === index     })     return res }

數(shù)組扁平化

數(shù)組扁平化是指將一個(gè)多維數(shù)組變?yōu)橐痪S數(shù)組。

flat方法

flat()方法創(chuàng)建一個(gè)新數(shù)組，其中所有子數(shù)組元素都以遞歸方式連接到該數(shù)組中，直到達(dá)到指定的深度為止

const arr1 = [1, 2, [3, 4, [5, 6]]]; arr1.flat(2); // [1, 2, 3, 4, 5, 6]  const arr2 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; arr2.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

ES6 拓展運(yùn)算符

es6的擴(kuò)展運(yùn)算符能將二維數(shù)組變?yōu)橐痪S，若arr中含有數(shù)組則使用一次擴(kuò)展運(yùn)算符，直至沒(méi)有為止。

function flatten(arr) {     while (arr.some(item => Array.isArray(item))) {         arr = [].concat(...arr);     }     return arr; }

toString方法+split方法

調(diào)用數(shù)組的toString方法，將數(shù)組變?yōu)樽址缓笤儆胹plit分割還原為數(shù)組。split分割后形成的數(shù)組的每一項(xiàng)值為字符串，所以需要用一個(gè)map方法遍歷數(shù)組將其每一項(xiàng)轉(zhuǎn)換為數(shù)值型。

function flatten(arr) {     console.log(arr.toString());// 1,2,3,4,5,6     console.log(arr.toString().split(',')); //[ '1', '2', '3', '4', '5', '6' ]     return arr.toString().split(',').map(function(item) {         return Number(item);     }) }  let ary = [1, [2, [3, [4, 5]]], 6]; console.log(flatten(ary)); // [ 1, 2, 3, 4, 5, 6 ]

使用join方法可以實(shí)現(xiàn)和toString方法類(lèi)似的效果。

遞歸

遞歸的遍歷每一項(xiàng)，當(dāng)為數(shù)組時(shí)則繼續(xù)，不為數(shù)組則concat。

function flatten(arr) {     var result = [];     for (var i = 0, len = arr.length; i < len; i++) {         if (Array.isArray(arr[i])) {             result = result.concat(flatten(arr[i]))         }         else {             result.push(arr[i])         }     }     return result; }

reduce方法實(shí)現(xiàn)

reduce方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值(從左到右)開(kāi)始縮減，最終計(jì)算為一個(gè)值。

function flatten(arr) {       return arr.reduce((result, item)=> {         return result.concat(Array.isArray(item) ? flatten(item) : item);     }, []); } let ary = [1, [2, [3, [4, 5]]], 6]; console.log(flatten(ary)); // [ 1, 2, 3, 4, 5, 6 ]

到此，關(guān)于“解數(shù)組去重和數(shù)組扁平化的方法有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！