Record the operation of an array once

Keywords: Javascript React Webpack

The common methods to operate arrays are forEach, map and filter. The return values of map and filter methods are arrays, and the return values of forEach are undefined, which can be understood as no return value.
There is no concatAll method in the native array object, so I plan to implement one myself. What the concatAll method does is simply to transform a two-dimensional array into a one-dimensional array.

Array.prototype.concatAll = function() {
    var result = [];

    // Complete with apply
    this.forEach((array) => {
        result.push.apply(result, array);
    });

    return result;
};

Here we use the apply method. The apply method will call a function, the first parameter of the apply method will be the this value of the called function, the second parameter of the apply method (an array, or an object of a class array) will be the arguments value of the called object, that is to say, each element of the array will be the parameters of the called function in turn. We use this property of the apply method to realize the array deconstruction (dimension reduction).
Next, let's solve a problem:

var courseLists = [{
  "name": "My Courses",
  "courses": [{
    "id": 511019,
    "title": "React for Beginners",
    "covers": [{
      width: 150,
      height: 200,
      url: "http://placeimg.com/150/200/tech"
    }, {
      width: 200,
      height: 200,
      url: "http://placeimg.com/200/200/tech"
    }, {
      width: 300,
      height: 200,
      url: "http://placeimg.com/300/200/tech"
    }],
    "tags": [{
      id: 1,
      name: "JavaScript"
    }],
    "rating": 5
  }, {
    "id": 511020,
    "title": "Front-End automat workflow",
    "covers": [{
      width: 150,
      height: 200,
      url: "http://placeimg.com/150/200/arch"
    }, {
      width: 200,
      height: 200,
      url: "http://placeimg.com/200/200/arch"
    }, {
      width: 300,
      height: 200,
      url: "http://placeimg.com/300/200/arch"
    }],
    "tags": [{
      "id": 2,
      "name": "gulp"
    }, {
      "id": 3,
      "name": "webpack"
    }],
    "rating": 5
  }]
}, {
  "name": "New Release",
  "courses": [{
    "id": 511022,
    "title": "Vue2 for Beginners",
    "covers": [{
      width: 150,
      height: 200,
      url: "http://placeimg.com/150/200/nature"
    }, {
      width: 200,
      height: 200,
      url: "http://placeimg.com/200/200/nature"
    }, {
      width: 300,
      height: 200,
      url: "http://placeimg.com/300/200/nature"
    }],
    "tags": [{
      id: 1,
      name: "JavaScript"
    }],
    "rating": 5
  }, {
    "id": 511023,
    "title": "Angular2 for Beginners",
    "covers": [{
      width: 150,
      height: 200,
      url: "http://placeimg.com/150/200/people"
    }, {
      width: 200,
      height: 200,
      url: "http://placeimg.com/200/200/people"
    }, {
      width: 300,
      height: 200,
      url: "http://placeimg.com/300/200/people"
    }],
    "tags": [{
      id: 1,
      name: "JavaScript"
    }],
    "rating": 5
  }]
}];

/* 
var result = courseList
 Do not directly use the index covers[0], please use concatAll, map, filter, forEach to complete
result The result is [
    {
      id: 511019,
      title: "React for Beginners",
      cover: "http://placeimg.com/150/200/tech"
    }, {
      id: 511020,
      title: "Front-End automat workflow",
      cover: "http://placeimg.com/150/200/arch"
    }, {
      id: 511022,
      title: "Vue2 for Beginners",
      cover: "http://placeimg.com/150/200/nature"
    }, {
      id: 511023,
      title: "Angular2 for Beginners",
      cover: "http://placeimg.com/150/200/people"
    },
 ]
*/

This kind of similar question is often used in our actual development. My answer is as follows:

var result = [];
var rel = courseLists.map((courseList) => {
    return courseList.courses;
}).concatAll().forEach((courseListItem) => {
    return result.push({
        id: courseListItem.id,
        title: courseListItem.title,
        cover: (courseListItem.covers.filter((coversItem, idx) => {
            if (idx === 0) {
                return coversItem;
            }
        }))[0].url
    })
});
console.log(result);

Posted by StealthRider on Thu, 26 Dec 2019 11:39:20 -0800