时间戳

首页 > 解决方案 > 可以使用js对象解构但在分配给新对象之前修改一些值吗？

javascript - 可以使用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: {},
          });
        }
      });

标签： javascripttypescriptecmascript-6object-destructuring

解决方案

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

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,
      backdrop_path: this.secureBaseURL + this.posterSizes[5] + movie.backdrop_path,
      styles: {},
    }),
  );

推荐阅读