Home > Web Front-end > JS Tutorial > Introduction to using JavaScript Array Flatten and recursion_javascript skills

Introduction to using JavaScript Array Flatten and recursion_javascript skills

WBOY
Release: 2016-05-16 18:00:07
Original
1499 people have browsed it

How to use JavaScript to convert an Array like [1,2,3,[4,5, [6,7]], [[[8]]]] into [1,2,3,4,5, 6,7 ,8] What about? The legendary Array Flatten.

To deal with this kind of problem, we usually need recursion to let the program loop according to an algorithm. A book says, "Recursion is a powerful programming technique." Well, it doesn't just belong to JavaScript. Recursion can be difficult, or it can be relatively simple (it is still relatively difficult in general). To deal with the above problem, it should be more suitable to use recursion. A worker has implemented this before, which is a simple example of recursive use:

Copy the code The code is as follows:

flatten: function(ac){
var array = [];
var group = this.arr;
if(ac) group = ac;
for (var i = 0; i < group.length; i ){
if(group[i] instanceof Array){
array = array.concat(this.flatten(group[i]));
}else{
array = array.concat(group[i]);
}
}
return array;
}

in if(group[i] instanceof Array ), call the function itself and perform recursion by passing parameters. Just when I was refactoring Array.js, I felt that since it is a framework, it would be too wasteful to not use so many abstract things. Therefore, it is better to call the static function that has been abstracted instead of doing it all over again. There's a for loop here, which means we're going to need each. The result? Four words, difficult to implement. Because we always have to create an array, and finally return this new array, we have to extract a new function to adjust it. Doesn’t this defeat the original intention?

I took a look online and finally settled on the prototype. His implementation method is to abstract a function that handles recursive increments, and then use this function to do recursion. How to say it? I want to say, this is called a framework. The following is a function that handles recursion:
Copy code The code is as follows:

function inject(memo , iterator, context) {
this.each(function(value, index) {
memo = iterator.call(context, memo, value, index);
});
return memo;
}

The final implementation of this flatten function is like this, this code is so beautiful:
Copy code The code is as follows:

function flatten() {
return this.inject([], function(array, value) {
if (Object.isArray( value))
return array.concat(value.flatten());
array.push(value);
return array;
});
}

Of course, another abstract function is needed to handle the for loop, which is our each function. By the way, bring out this each function in flatten, learn how jQuery does it, and add native support; of course, you can also handle pure objects, not just arrays:
Copy code The code is as follows:

each: function (callback, bind) {
var isObject = arale.typeOf(this.obj) === 'object',
i = 0,
key;

if (isObject) {
var obj = this.obj;
for (key in obj) {
if (callback.call(bind, key, obj[key]) === false) {
break;
}
}
} else {
var arr = this.obj;
if (Array.prototype.forEach) {

// Will continue to execute when the user returns false;
// The native one is very embarrassing, should I leave it or leave it? marked TODO;
return [].forEach.call(arr, callback, bind);
};
for (var value = arr[0], length = arr.length; i < length && callback.call(bind , i, value) !== false; value = arr[ i]) {};
}
}

I’ve been playing a lot with Javascript recently. I took a look at the recent articles and the articles posted on the team's internal blog. They are all written in JS. Embarrassing. Seems like a big change. Need to balance it out.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template