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


    1. var courseLists = [{
    2. "name": "My Courses",
    3. "courses": [{
    4. "id": 511019,
    5. "title": "React for Beginners",
    6. "covers": [{
    7. width: 150,
    8. height: 200,
    9. url: "http://placeimg.com/150/200/tech"
    10. }, {
    11. width: 200,
    12. height: 200,
    13. url: "http://placeimg.com/200/200/tech"
    14. }, {
    15. width: 300,
    16. height: 200,
    17. url: "http://placeimg.com/300/200/tech"
    18. }],
    19. "tags": [{
    20. id: 1,
    21. name: "JavaScript"
    22. }],
    23. "rating": 5
    24. }, {
    25. "id": 511020,
    26. "title": "Front-End automat workflow",
    27. "covers": [{
    28. width: 150,
    29. height: 200,
    30. url: "http://placeimg.com/150/200/arch"
    31. }, {
    32. width: 200,
    33. height: 200,
    34. url: "http://placeimg.com/200/200/arch"
    35. }, {
    36. width: 300,
    37. height: 200,
    38. url: "http://placeimg.com/300/200/arch"
    39. }],
    40. "tags": [{
    41. "id": 2,
    42. "name": "gulp"
    43. }, {
    44. "id": 3,
    45. "name": "webpack"
    46. }],
    47. "rating": 5
    48. }]
    49. }, {
    50. "name": "New Release",
    51. "courses": [{
    52. "id": 511022,
    53. "title": "Vue2 for Beginners",
    54. "covers": [{
    55. width: 150,
    56. height: 200,
    57. url: "http://placeimg.com/150/200/nature"
    58. }, {
    59. width: 200,
    60. height: 200,
    61. url: "http://placeimg.com/200/200/nature"
    62. }, {
    63. width: 300,
    64. height: 200,
    65. url: "http://placeimg.com/300/200/nature"
    66. }],
    67. "tags": [{
    68. id: 1,
    69. name: "JavaScript"
    70. }],
    71. "rating": 5
    72. }, {
    73. "id": 511023,
    74. "title": "Angular2 for Beginners",
    75. "covers": [{
    76. width: 150,
    77. height: 200,
    78. url: "http://placeimg.com/150/200/people"
    79. }, {
    80. width: 200,
    81. height: 200,
    82. url: "http://placeimg.com/200/200/people"
    83. }, {
    84. width: 300,
    85. height: 200,
    86. url: "http://placeimg.com/300/200/people"
    87. }],
    88. "tags": [{
    89. id: 1,
    90. name: "JavaScript"
    91. }],
    92. "rating": 5
    93. }]
    94. }];
    95. /*
    96. var result = courseList
    97. 不得直接使用索引 covers[0],请用 concatAll, map, filter, forEach 完成
    98. result 結果为 [
    99. {
    100. id: 511019,
    101. title: "React for Beginners",
    102. cover: "http://placeimg.com/150/200/tech"
    103. }, {
    104. id: 511020,
    105. title: "Front-End automat workflow",
    106. cover: "http://placeimg.com/150/200/arch"
    107. }, {
    108. id: 511022,
    109. title: "Vue2 for Beginners",
    110. cover: "http://placeimg.com/150/200/nature"
    111. }, {
    112. id: 511023,
    113. title: "Angular2 for Beginners",
    114. cover: "http://placeimg.com/150/200/people"
    115. },
    116. ]
    117. */

    尝试解决方法: 

    1. /* courseLists.forEach((firstValue) => {
    2.     // console.log(firstValue.courses.values());
    3.     for (const iterator of firstValue.courses.values()) {
    4.         var result = {}
    5.         result.id = iterator.id;
    6.         result.title = iterator.title;
    7.         result.covers = iterator.covers;
    8.         console.log(result);
    9.     }
    10. }) */
    11. /* let result = []
    12. courseLists.forEach(item => {
    13. item.courses.forEach(item2 => {
    14. let obj = {
    15. id: item2.id,
    16. title: item2.title,
    17. cover: item2.covers[0].url
    18. }
    19. result.push(obj)
    20. })
    21. })
    22. console.log(result); */
    23. /* courseLists.forEach((firstValue) => {
    24.     // console.log(firstValue.courses.values());
    25.     for (const iterator of firstValue.courses.values()) {
    26.         var result = {}
    27.         result.id = iterator.id;
    28.         result.title = iterator.title;
    29.        
    30. iterator.covers.forEach((value)=>{
    31. result.cover=value.url
    32. })
    33.         console.log(result);
    34.     }
    35. }) */
    36. /* let a=courseLists.map(({ courses }) => {
    37. return courses.map(({ id, title, covers }) => {
    38. return covers.map(({ url }) => ({
    39. id,
    40. title,
    41. url,
    42. }));
    43. });
    44. }).flat(3);
    45. console.log(a); */
    46. /* let result=[]
    47. courseLists.forEach(courseLists=>{
    48. courseLists.courses.forEach(course=>{
    49. let obj={
    50. id:course.id,
    51. title:course.title,
    52. cover:''
    53. }
    54. for(let i=0;i
    55. let {url}=course.covers[i];
    56. if(url.includes('150/200')){
    57. obj.cover=url;
    58. break;
    59. }
    60. }
    61. result.push(obj);
    62. })
    63. })
    64. console.log(result); */
    65. const newArr = courseLists
    66. .map(item => item.courses).flat(1)
    67. .map(outItem => outItem.covers
    68. .filter(item => item.width === 150 && item.height === 200)
    69. .map(item =>({ id: outItem.id, title: outItem.title, cover: item.url }))
    70. ).flat(1)
  • 相关阅读:
    MyBatis Generator 1.4.0 使用(基础篇)
    jQuery常用插件整理(持续更新)
    windows/linux命令行操作快捷方式
    JVM的默认内存是怎么分配的?
    数组 [数据结构][Java]
    WordPress页脚配置备案号
    面对多种信号干扰,如何实现高效干扰测试?
    低市值Pow赛道解析,探寻百倍潜力项目
    深入理解强化学习——强化学习的基础知识
    javacv 基础04-读取mp4,avi等视频文件并截图保存图片到本地
  • 原文地址:https://blog.csdn.net/qq_51066068/article/details/126008542