Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "JavaScript so achieve array flattening", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "JavaScript so achieve array flattening" article.

Concept: used to flatten a nested multi-layered array into an one-dimensional array

Method 1: convert a two-dimensional array into an one-dimensional array through concat

Principle: expand the array internally by extending the operator, and return a new array by concatenating two strings through 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]

Method 2: flattening the array using the array method join and the string method split

Principle: through the join method to convert the array into a dot-separated string, in the use of split to convert the converted string into a string array, through. The map method converts an internal string to a numeric type

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]

Method 3: through regular method and JSON.stringify method and array method

Principle: first convert an array to a string and replace all'['] 'with string matching regular rules and method 2 like split is mainly about converting a string into an array and map converts a string array into a number

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]

Method 4: function recursion

Principle: determine whether the current value obtained is an array, and call it recursively if it is an array.

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); / / looking at the results, you will find that each array is split and taken out

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]

Method 6: ES6 new method flat ()

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

Let e = a.flat () / / when no parameter is passed, it means to transfer a two-dimensional array to an one-dimensional array.

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

Let f = a.flat (2) / / passing in 2 means to convert a two-layer nested array to an one-dimensional array

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

Let g = a.flat (Infinity) / / Infinity use this keyword to convert the so-called array into an one-dimensional array

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

Array deduplication

Concept: remove repeated values from the array

Method 1: loop traversal and interception

Principle: compare whether the current value is in the array by traversing each loop, delete the current value and subtract the index by one, the drawback will change the original array

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

Function removeDuplicatedItem (arr) {

For (var I = 0; I < arr.length-1; iTunes +) {

For (var j = I + 1; j < arr.length; jacks +) {

If (arr [I] = arr [j]) {

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

Jmuri-

}

}

}

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]

Method 2: with the help of indexOf () method

Principle: to judge whether the subscript of the first occurrence of this element in the array is equal to the subscript of the loop is similar to method 1.

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

Function rep2 (arr) {

For (var I = 0; I < arr.length; iTunes +) {

/ / console.log (arr.indexOf (arr [I])); you can output the index in which the current element first appears

If (arr.indexOf (arr [I])! = = I) {

Arr.splice (I, 1); / / move forward after deleting array elements after the array length minus 1

IMurray / array subscript fallback

}

}

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]

Method 3: with the help of new array and indexOf () method

Principle: the indexOf side determines that the index of the current element in the array will be added to the new array if it is equal to the subscript of the loop.

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

Function rep (arr) {

Let ret = []

For (var I = 0; I < arr.length; iTunes +) {

If (arr.indexOf (arr [I]) = = I) {

Ret.push (arr [I])

}

}

Return ret

}

Let arr2 = rep (arr)

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

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

Method 4: with the help of empty objects

Principle: recording the stored elements in a new array through an object does not change the original array similar to method 3

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

Let o = {}

Let arr2 = []

For (var I = 0; I < arr.length; iTunes +) {

Var k = arr [I]

If (! O [k]) {

O [k] = true

Arr2.push (k)

}

}

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

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

Method 5: filter method

Principle: to find whether the location of the current element index is equal to the current element index value, it means that true returns. If the current element index is not equal to the current index, it means that it has already appeared, and it will not be returned. The original array is unchanged

Let arr = [1, 23, 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, 3, 23, 5, 6, 7, 9, 9, 8, 5]

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

Method 6: use the include method

Principle: similar to indexOf, it determines whether the current element exists. If it doesn't exist, add it without changing the original array.

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

Function rep () {

Let res = []

For (let I = 0; I < arr.length; iTunes +) {

If (! res.includes (ARR [I]) res.push (ARR [I])

}

Return res

}

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

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

Method 7: es6 new data structure new Set () method

Principle: members of new Set () are unique and cannot be repeated

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

Let arr2 = new Set (arr)

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

Console.log (arr2) / / {1,23,3,5,6, … }

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

The above is about the content of this article on "JavaScript flattening arrays". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.