（JavaScript）在不同的对象数组中找到相同的值

Question

我正在React应用程序中制作课程卡组件。我有两个带有数据填充这些卡的数组。

对象的课程数组：

const courses = [
    {
        id: 'de5aaa59-90f5-4dbc-b8a9-aaf205c551ba',
        title: 'JavaScript',
        description: `Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum
    has been the industry's standard dummy text ever since the
    1500s, when an unknown
    printer took a galley of type and scrambled it to make a type
    specimen book. It has survived
    not only five centuries, but also the leap into electronic typesetting, remaining essentially u
    nchanged.`,
        creationDate: '8/3/2021',
        duration: 160,
        authors: [
            '27cc3006-e93a-4748-8ca8-73d06aa93b6d',
            'f762978b-61eb-4096-812b-ebde22838167',
        ],
    },
    {
        id: 'b5630fdd-7bf7-4d39-b75a-2b5906fd0916',
        title: 'Angular',
        description: `Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum
    has been the industry's standard dummy text ever since the
    1500s, when an unknown
    printer took a galley of type and scrambled it to make a type
    specimen book.`,
        creationDate: '10/11/2020',
        duration: 210,
        authors: [
            'df32994e-b23d-497c-9e4d-84e4dc02882f',
            '095a1817-d45b-4ed7-9cf7-b2417bcbf748',
        ],
    },
];

作者的对象数组：

const authors = [
    {
        id: '27cc3006-e93a-4748-8ca8-73d06aa93b6d',
        name: 'Vasiliy Dobkin',
    },
    {
        id: 'f762978b-61eb-4096-812b-ebde22838167',
        name: 'Nicolas Kim',
    },
    {
        id: 'df32994e-b23d-497c-9e4d-84e4dc02882f',
        name: 'Anna Sidorenko',
    },
    {
        id: '095a1817-d45b-4ed7-9cf7-b2417bcbf748',
        name: 'Valentina Larina',
    },
];

我的尝试匹配和“脱颖而出”，作者：

const COURSE = props.value;
    // AUTHOR = authors.find((el) => el.id === COURSE.authors[0]);
    // const filteredArray = array1.filter(value => array2.includes(value));
    // arrA.filter(x => arrB.includes(x));
    const authorsDeHash = (authorsHashed, authors) => {
        // const myarr = [];
        for (let i of authorsHashed) {
            // console.log(authorsHashed);
            console.log(authors.find((el) => el.id === authorsHashed[i]));
            // myarr.push(authors.find((el) => el.id === authorsHashed[i]));
        }
    };
    authorsDeHash(COURSE.authors, authors);

upd：既然我已经从父级组件中传递了一门课程，所以我无需搜索整个“课程”阵列中的值。因此，基本上，我只需要为一门课程找到作者的真实姓名。

Answer 1

const authorsMap = authors.reduce((acc, author) => ({ ...acc, [author.id]: author.name }), {}); // it faster to find a value in a Map than searching in Array

const coursesWithAuthors = courses
.map(course => ({ ...course, authors: course.authors.map(id => authorsMap[id]) }));

Answer 2

可能的方法如下：

• 创建一个基于作者ID 映射实例通过相应地 地图 ped 作者 array。

• 地图 课程阵列课程项目每个课程中每个课程项目的ID基于<代码>作者数组被映射到基于作者名称中通过从作者的ID中查找以前创建的authorsMap的阵列。

const courses = [{
  id: 'de5aaa59-90f5-4dbc-b8a9-aaf205c551ba',
  title: 'JavaScript',
  description: `Lorem Ipsum is simply dummy text`,
  creationDate: '8/3/2021',
  duration: 160,
  authors: [
    '27cc3006-e93a-4748-8ca8-73d06aa93b6d',
    'f762978b-61eb-4096-812b-ebde22838167',
  ],
}, {
  id: 'b5630fdd-7bf7-4d39-b75a-2b5906fd0916',
  title: 'Angular',
  description: `Lorem Ipsumchas been the industry's standard dummy tex`,
  creationDate: '10/11/2020',
  duration: 210,
  authors: [
    'df32994e-b23d-497c-9e4d-84e4dc02882f',
    '095a1817-d45b-4ed7-9cf7-b2417bcbf748',
  ],
}];

const authors = [{
  id: '27cc3006-e93a-4748-8ca8-73d06aa93b6d',
  name: 'Vasiliy Dobkin',
}, {
  id: 'f762978b-61eb-4096-812b-ebde22838167',
  name: 'Nicolas Kim',
}, {
  id: 'df32994e-b23d-497c-9e4d-84e4dc02882f',
  name: 'Anna Sidorenko',
}, {
  id: '095a1817-d45b-4ed7-9cf7-b2417bcbf748',
  name: 'Valentina Larina',
}];

// create an author id based map.
const authorsMap =
  new Map(authors.map(({ id, name }) => [id, name]));

// map each course item and for each course item's
// `authors` array map each author's id into the related
//  author name by looking it up from the `authorsMap`.
console.log(
  courses
    .map(({ authors, ...courseRest }) => ({
      ...courseRest,
      authors: authors.map(authorId =>
        authorsMap.get(authorId)
      ),
    }))
);
console.log(
  'the non mutated original `courses` array ...',
  courses,
);

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

Answer 3

我为循环使用了和array.prototype.find（）函数。请参阅下面的摘要。

const courses = [
    {
        id: 'de5aaa59-90f5-4dbc-b8a9-aaf205c551ba',
        title: 'JavaScript',
        description: `Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum
    has been the industry's standard dummy text ever since the
    1500s, when an unknown
    printer took a galley of type and scrambled it to make a type
    specimen book. It has survived
    not only five centuries, but also the leap into electronic typesetting, remaining essentially u
    nchanged.`,
        creationDate: '8/3/2021',
        duration: 160,
        authors: [
            '27cc3006-e93a-4748-8ca8-73d06aa93b6d',
            'f762978b-61eb-4096-812b-ebde22838167',
        ],
    },
    {
        id: 'b5630fdd-7bf7-4d39-b75a-2b5906fd0916',
        title: 'Angular',
        description: `Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum
    has been the industry's standard dummy text ever since the
    1500s, when an unknown
    printer took a galley of type and scrambled it to make a type
    specimen book.`,
        creationDate: '10/11/2020',
        duration: 210,
        authors: [
            'df32994e-b23d-497c-9e4d-84e4dc02882f',
            '095a1817-d45b-4ed7-9cf7-b2417bcbf748',
        ],
    },
];
const authors = [
    {
        id: '27cc3006-e93a-4748-8ca8-73d06aa93b6d',
        name: 'Vasiliy Dobkin',
    },
    {
        id: 'f762978b-61eb-4096-812b-ebde22838167',
        name: 'Nicolas Kim',
    },
    {
        id: 'df32994e-b23d-497c-9e4d-84e4dc02882f',
        name: 'Anna Sidorenko',
    },
    {
        id: '095a1817-d45b-4ed7-9cf7-b2417bcbf748',
        name: 'Valentina Larina',
    },
];
const COURSE = courses[0]
    const authorsDeHash = (authorsHashed, authors) => {
        for (let i = 0; i < authorsHashed.length; i++) {
          let author = authors.find(e => e.id === authorsHashed[i]);
          console.log(author.name)
        }
    };
    authorsDeHash(COURSE.authors, authors);

Answer 4

因此，我就是这样做的。主要问题是循环，大声笑。而不是（让我使用的i）我使用过（让我在j中）。

const authorsDeHash = (authorsHashed, authorsOrigin) => {
        const arr = [];
        for (let i in authorsHashed)
            arr.push(authorsOrigin.find((el) => el.id === authorsHashed[i]).name);
        return arr;
    };
    const authorsArray = authorsDeHash(course.authors, authors);

    const printAuthors = (arr) => {
        const obj = { title: '', authors: '' };
        if (arr.length === 1) {
            obj.title = 'Author:';
            obj.authors = arr[0];
        } else {
            obj.title = 'Authors:';
            obj.authors = `${arr.join(', ')}`;
        }
        return obj;
    };
    const authorsObj = printAuthors(authorsArray);

感谢您的答案:)