[Front-end development skills] Javascript for one-dimensional array grouping and function encapsulation

Preface: Today encountered a requirement, is to group a tag array, this is a general requirement, for the old driver, this is not basic operation?

Let’s have an array!

let classArr = [
    {name: 'Pikachu'.groupNo: 'Foreign Animation'},
    {name: 'which zha'.groupNo: 'Chinese Animation'},
    {name: Journey to the West.groupNo: 'Chinese Animation'},
    {name: 'Legend of Wukong'.groupNo: 'Chinese Animation'},
    {name: 'Little Hero'.groupNo: 'Chinese Animation'},
    {name: 'Little tadpole looking for his mother'.groupNo: 'Chinese Animation'},
    {name: 'Havoc in Heaven'.groupNo: 'Chinese Animation'},
    {name: 'Lucky Mouse'.groupNo: 'Foreign Animation'},
    {name: Tom cat.groupNo: 'Foreign Animation'},
    {name: 'Barbie'.groupNo: 'Foreign Animation'},
    {name: 'Barbie'.groupNo: 'Foreign Animation'},
    {name: ultraman.groupNo: 'Foreign Animation'},
    {name: Ghostblaster Blade.groupNo: 'Foreign Animation'},];Copy the code

It’s so hard to name.

Split up into groups!

For general grouping requirements, we can find rules in the array object, this should not be difficult to old drivers!

As mentioned above, we can clearly see that ground in each item is the object we classify.

Let’s do it this way:

• In the first step, we create a new object to store the result of the group

    let fixArr = {};
Copy the code

• Second, we create a functionfixFunc to handle our grouping

    fixFunc() {};
Copy the code

• Step three, we useclassArrEach item ingroundAs wefixArrFor each item inkey

The reason for doing this is that when we iterate over classArr, we can directly compare the groupNo of the item to see if it already exists.

fixFunc(itemObj) {
  if(! itemObj)return; // Exit if classArr is empty
  const n = itemObj.groupNo; // get groupNo as fixArr key
  let box = [itemObj];
  this.fixArr[n] = box; // Add the passed item to fixArr first
  
  for (const item of this.classArr) { // loop classArr to get each item
    if (Object.prototype.hasOwnProperty.call(this.fixArr, item.groupNo)) { // Check whether groups of item exist
      const n = item.groupNo;
      const i = this.fixLabelArr[n].indexOf(item); // Check whether the item exists in the group
      if (i < 0) { // Add to the group if it does not exist
        this.fixArr[n].push(item); }}else {
      this.fixFunc(item); // If the groupNo of the item does not exist in fixArr, we recursively call fixFunc}}}Copy the code

• Step four, let’s test it out

Uh-huh, it smells good!

To sum up!

We used recursion in the fixFunc method above, and recursion is a very common algorithm in our daily development. Sometimes, encounter can not think of the problem, we may change the way of thinking will have a new discovery, so, code tired, we come to nuggets to write an article, out to put out the wind, come back to solve the bug? Ha ha ha 😌

Bugs, you have grown up, you should learn to self-fix 😏

The above is the content to share with you, thank you for reading, remember to like 👍 oh!

Getting better every day. I’m Asscre. Please follow me! I’ll see you next time.

Happy birthday to myself.