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