運算元組的常見的方法有forEach、map、filter，其中map和filter方法的返回值都是陣列，forEach的返回值是undefined，可以理解為沒有返回值。
由於原生的陣列物件中，沒有concatAll方法，所以打算自己實現一個。concatAll方法要做的事情很簡單，就是把一個二維陣列轉成一維。

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

    // 用 apply 完成
    this.forEach((array) => {
        result.push.apply(result, array);
    });

    return result;
};
 

這裡我們用到了apply方法。apply方法會呼叫一個函式，apply方法的第一個引數會作為被呼叫函式的this值，apply方法的第二個引數（一個數組，或類陣列的物件）會作為被呼叫物件的arguments值，也就是說該陣列的各個元素將會依次成為被呼叫函式的各個引數。我們利用apply方法的這種特性，實現了陣列的解構（降維）。
接下來，我們來解決一個問題：

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
不得直接使用索引 covers[0]，請用 concatAll, map, filter, forEach 完成
result 結果為 [
    {
      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"
    },
 ]
*/
 

這種類似的問題在我們實際的開發中是經常用到的，本人的答案如下：

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);