JavaScript這么實現數組扁平化

這篇“JavaScript這么實現數組扁平化”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“JavaScript這么實現數組扁平化”文章吧。

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

　　方法一：通過concat將二維數組轉化為一維數組

　　原理：通過將擴展運算符，將數組內部展開，并通過concat連接兩個字符串的方式返回一個新的數組

　　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]

　　方法二：使用數組方法join和字符串方法split進行數組扁平化

　　原理：通過join方法將數組轉化為以點隔開的字符串，在使用split把轉化的字符串轉化成字符串數組，通過。map方法將內部字符串轉化數字類型的

　　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]

　　方法三：通過正則方法和JSON.stringify方法和數組方法

　　原理：首先將數組轉化為字符串 使用字符串匹配正則規則 替換所有的 '[' ']' 和方法二類似 split 主要是講字符串轉化為數組，map將字符串數組轉化為數字

　　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]

　　方法四：函數遞歸

　　原理：判斷獲取的當前值是不是數組，是數組就遞歸調用

　　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]

　　方法五：通過reduce方法進行數組扁平化

　　原理：主要是通過reduce的依次執行，判斷當前拿到的對象是不是數組， 是數組就進行一次函數遞歸將內部所有數組扁平化（與方法四類似）

　　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); // 查看結果你會發現，把每個數組進行拆分并取出

　　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()   // 不傳參的時候 表示將二維數組轉一維數組

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

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

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

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

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

　　數組去重

　　概念：去除數組中重復重新的值

　　方法一：循環遍歷截取

　　原理:通過每次循環遍歷比較當前值在不在數組中，在就刪除當前值并且索引減一，弊端，會改變原數組

　　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()方法

　　原理：判斷此元素在該數組中首次出現的位置下標與循環的下標是否相等 與方法一類似

　　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])); 可以輸出當前元素首次出現的索引

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

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

　　i--;//數組下標回退

　　}

　　}

　　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]

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

　　原理：通過indexOf方判斷當前元素在數組中的索引如果與循環的下標相等則添加到新數組中 原數組不變

　　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]

　　方法四：借助空對象

　　原理：通過對象來記錄新數組中已存儲過的元素 不改變原數組 與方法三類似

　　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方法

　　原理：查找當前元素索引出現的位置是否與當前元素索引值相等，是表示true返回 ，如果當前元素索引不等與當前索引，說明已經出現過，出現過就不返回。 原數組不變

　　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類似，判斷當前元素是否存在，不存在就添加 不改變原數組

　　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 新增數據結構 new Set()方法

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

　　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]

以上就是關于“JavaScript這么實現數組扁平化”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。