您可以使用 js 对象解构但在分配给新对象之前修改一些值吗？

问题描述

我有以下代码从 api 接收电影数据。现在我想从返回的 json 文件创建一个新对象，但只包含属性的一个子集，同时还修改一些现有的属性值，然后再将它们分配给新对象，我目前正在这样做很长的路要走，但是有没有我可以使用 javascript/typescript 对象解构语法实现此结果的方式吗？

我想使用一些现有的属性，如 title 和 overview 但想更改 poster_path 属性值（我在 if 语句后的前两行中设置了这些值）。我能否以更简洁/更高效的方式获得相同的结果？

movieCollection.results.forEach(
      (movie: {
        poster_path: string,backdrop_path: string,title: string,overview: string,release_date: string,Vote_average: number,Vote_count: number,genre_ids: number[],}) => {

        if (movie.backdrop_path) {

          //create paths for pictures
          let poster_path = this.secureBaseURL + this.posterSizes[4] + movie.poster_path;
          let backdrop_path = this.secureBaseURL + this.posterSizes[5] + movie.backdrop_path;

          //create array object
          movieArray.push({
            poster_path: poster_path,backdrop_path: backdrop_path,title: movie.title,overview: movie.overview,release_date: movie.release_date,Vote_average: movie.Vote_average,Vote_count: movie.Vote_count,genre_ids: movie.genre_ids,styles: {},});
        }
      });

解决方法

我建议使用 Spread syntax 来有效地实现相同的结果。它允许在需要零个或多个键值对（用于对象文字）的地方扩展对象表达式；这是新数组中的对象。

movieCollection.results.forEach(
  (movie: {
    poster_path: string,backdrop_path: string,title: string,overview: string,release_date: string,vote_average: number,vote_count: number,genre_ids: number[],}) => {
    if (movie.backdrop_path) {
      //create array object
      movieArray.push({
        ...movie,// keep the unchanged properties
        poster_path: this.secureBaseURL + this.posterSizes[4] + movie.poster_path,backdrop_path: this.secureBaseURL + this.posterSizes[5] + movie.backdrop_path,// override these two properties as needed
        styles: {},});
    }
  });

但是，我注意到，您在这里要做的似乎是更改数组中的对象并将更新的结果保留在另一个数组中？那么实际上，您可以使用 Array map 更简洁地重构您的代码。

const movieArray = movieCollection.results
  .filter((t) => !!t.backdrop_path) // filter by backdrop_path property
  .map(
    (movie) => ({
      ...movie,// keep the unchanged properties
      poster_path: this.secureBaseURL + this.posterSizes[4] + movie.poster_path,styles: {},}),);