如何使用 map ( ES6 ) 映射嵌套对象？

Question

我有一个 javascript 复杂对象。这是对象：这是我从 rest api 获得的内容帖子：

{
    "id": 2598,
    "date": "2018-10-15T06:20:10",
    "date_gmt": "2018-10-15T06:20:10",
    "modified": "2019-05-16T23:35:50",
    "modified_gmt": "2019-05-16T21:35:50",
    "slug": "lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit",
    "status": "publish",
    "type": "post",
    "link": "http://www.website.org/2018/10/15/lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit/",
    "title": {
        "rendered": "Lorem ipsum dolor sit amet, consectetur adipisicing elit"
    },
    "content": {
        "rendered": "<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Eaque ipsa quae ab illo inventore veritatis et quasi. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti </p>\n",
        "protected": false
    },
    "author_meta": {
        "ID": "1",
        "user_nicename": "megmail-com",
        "user_email": "me@gmail.com",
        "user_registered": "2018-12-31 08:16:31",
        "display_name": "me@gmail.com",
        "first_name":"John",
        "last_name": "DOE"
    },
    "_links": {
        "self": [
            {
                "href": "http://www.website.org/wp-json/wp/v2/posts/2598"
            }
        ]
    }
}

我想将此对象转换为另一个包含：

{
    "id": 2598,
    "date": "2018-10-15T06:20:10",
    "slug": "lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit",
    "title": {
        "rendered": "Lorem ipsum dolor sit amet, consectetur adipisicing elit"
    },
    "content": {
        "rendered": "<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Eaque ipsa quae ab illo inventore veritatis et quasi. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti </p>\n",
        "protected": false
    },
    "authorlastname": "John",
    "authorfirstname": "DOE"
}

如何使用地图？

这是我想做的：

post = post
        .map(({ id, slug, title, date, content, authorlastname,  authorfirstname,
                  }) => ({
          id,
          slug,
          title,
          excerpt,
          date,
          tags,
          content,
          ???, 
          ???
        }))

感谢您的帮助

Answer 1

您也可以解构author_meta 并使用属性重命名。

获取对象

const subset = ({
    id,
    slug,
    title,
    date,
    content,
    author_meta: { first_name: authorfirstname, last_name: authorlastname } 
}) => ({ 
    id,
    slug,
    title,
    excerpt,
    date,
    tags,
    content,
    authorlastname,
    authorfirstname
});

post = subset(post);

// if you have the objects in an array, you could map the new objects with
posts = posts(subset);

Answer 2

我们不能在这里使用.map() 方法，因为它是一个数组方法，而post 是一个对象。所以，我们可以像这样简单地映射它：

const result = {
  id: post.id,
  slug: post.slug,
  title: post.title,
  date: post.date,
  content: post.content,
  authorlastname: post.author_meta.last_name,
  authorfirstname: post.author_meta.first_name
}

演示：

const post = {
  "id": 2598,
  "date": "2018-10-15T06:20:10",
  "date_gmt": "2018-10-15T06:20:10",
  "modified": "2019-05-16T23:35:50",
  "modified_gmt": "2019-05-16T21:35:50",
  "slug": "lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit",
  "status": "publish",
  "type": "post",
  "link": "http://www.website.org/2018/10/15/lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit/",
  "title": {
    "rendered": "Lorem ipsum dolor sit amet, consectetur adipisicing elit"
  },
  "content": {
    "rendered": "<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Eaque ipsa quae ab illo inventore veritatis et quasi. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti </p>\n",
    "protected": false
  },
  "author_meta": {
    "ID": "1",
    "user_nicename": "megmail-com",
    "user_email": "me@gmail.com",
    "user_registered": "2018-12-31 08:16:31",
    "display_name": "me@gmail.com",
    "first_name": "John",
    "last_name": "DOE"
  },
  "_links": {
    "self": [{
      "href": "http://www.website.org/wp-json/wp/v2/posts/2598"
    }]
  }
}

const result = {
  id: post.id,
  slug: post.slug,
  title: post.title,
  date: post.date,
  content: post.content,
  authorlastname: post.author_meta.last_name,
  authorfirstname: post.author_meta.first_name
}
console.log(result)

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

你不能在对象上使用.map，但你可以直接访问道具。这将为您提供预期的结果：

const {id, date, slug, title, content} = post

const newPost = {
  id,
  date,
  slug,
  title,
  content,
  authorlastname: post.author_meta.last_name,
  authorfirstname: post.author_meta.first_name
}

Answer 4

你可以改成

var obj =(({ id, slug, title, date }) => ({id, slug, title, date }))(post);

var post = {
    "id": 2598,
    "date": "2018-10-15T06:20:10",
    "date_gmt": "2018-10-15T06:20:10",
    "modified": "2019-05-16T23:35:50",
    "modified_gmt": "2019-05-16T21:35:50",
    "slug": "lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit",
    "status": "publish",
    "type": "post",
    "link": "http://www.website.org/2018/10/15/lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit/",
    "title": {
        "rendered": "Lorem ipsum dolor sit amet, consectetur adipisicing elit"
    },
    "content": {
        "rendered": "<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Eaque ipsa quae ab illo inventore veritatis et quasi. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti </p>\n",
        "protected": false
    },
    "author_meta": {
        "ID": "1",
        "user_nicename": "megmail-com",
        "user_email": "me@gmail.com",
        "user_registered": "2018-12-31 08:16:31",
        "display_name": "me@gmail.com",
        "first_name":"John",
        "last_name": "DOE"
    },
    "_links": {
        "self": [
            {
                "href": "http://www.website.org/wp-json/wp/v2/posts/2598"
            }
        ]
    }
};

var obj =(({ id, slug, title, date
                  }) => ({       id,          slug,          title,                    date,          }))(post);
        
        console.log(obj)