JS提升：JS中的数组扁平化问题

最新推荐文章于 2024-11-02 19:19:35 发布

The..Fuir

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量133

点赞数

分类专栏： javascript 面试文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_51066068/article/details/126008542

版权

面试同时被 2 个专栏收录

152 篇文章 51 订阅

订阅专栏

javascript

122 篇文章 11 订阅

订阅专栏

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"
    },
 ]
*/

尝试解决方法:

/* courseLists.forEach((firstValue) => {
      // console.log(firstValue.courses.values());
      for (const iterator of firstValue.courses.values()) {
          var result = {}
          result.id = iterator.id;
          result.title = iterator.title;
          result.covers = iterator.covers;
          console.log(result);
      }
  }) */

  /* let result = []
  courseLists.forEach(item => {
      item.courses.forEach(item2 => {
          let obj = {
              id: item2.id,
              title: item2.title,
              cover: item2.covers[0].url
          }
          result.push(obj)
      })
  })
  console.log(result);  */


/*   courseLists.forEach((firstValue) => {
      // console.log(firstValue.courses.values());
      for (const iterator of firstValue.courses.values()) {
          var result = {}
          result.id = iterator.id;
          result.title = iterator.title;
          
      iterator.covers.forEach((value)=>{
        result.cover=value.url
      })
          console.log(result);
      }
  }) */


/*   let a=courseLists.map(({ courses }) => {
    return courses.map(({ id, title, covers }) => {
      return covers.map(({ url }) => ({
        id,
        title,
        url,
      }));
    });
  }).flat(3);

  console.log(a); */


 /*  let result=[]
  courseLists.forEach(courseLists=>{
    courseLists.courses.forEach(course=>{
      let obj={
        id:course.id,
        title:course.title,
        cover:'' 
      }
      for(let i=0;i<course.covers.length;i++){
        let {url}=course.covers[i];
        if(url.includes('150/200')){
          obj.cover=url;
          break;
        }
      }
      result.push(obj);
    })
  })

  console.log(result); */


  const newArr = courseLists
  .map(item => item.courses).flat(1)
  .map(outItem => outItem.covers
      .filter(item => item.width === 150 && item.height === 200)
      .map(item =>({ id: outItem.id, title: outItem.title, cover: item.url }))
  ).flat(1)