通过使用第二个数组（JavaScript）中的引用从第一个数组中的每个 object 中提取每个值来创建一个新数组

Question

我有2 个 arrays 。

第一个数组有4 个类别对象，每个 object都有“名称”和“参考”（参考） ：

let categories = [
  {
    "name": "Books", 
    "ref": "categories/category1"
  },
  {
    "name": "Computers", 
    "ref": "categories/category2"
  },
  {
    "name": "Drink", 
    "ref": "categories/category3"
  },
  {
    "name": "Food", 
    "ref": "categories/category4"
  }
];

第二个数组引用了 categories ：

let refs = ["categories/category2", "categories/category4"];

现在，我想通过使用第二个数组“refs”变量中的引用从第一个数组“类别”变量中仅提取类别名称来创建新的类别名称数组。

我创建了代码以使用2 arrays创建新的类别名称数组，它完美地制作了具有 2 个类别名称“计算机”和“食物”的新数组：

let newArr = [];

for(let i = 0; i < refs.length; i++) {
  for(let j = 0; j < categories.length; j++) {
    if(refs[i] == categories[j].ref) {
      newArr.push(categories[j].name);
    }  
  }
}

console.log(newArr); // ["Computer", "Food"]

这是完整的可运行代码：

 let categories = [ { "name": "Book", "ref": "categories/category1" }, { "name": "Computer", "ref": "categories/category2" }, { "name": "Shoes", "ref": "categories/category3" }, { "name": "Food", "ref": "categories/category4" } ]; let refs = ["categories/category2", "categories/category4"]; let newArr = []; for(let i = 0; i < refs.length; i++) { for(let j = 0; j < categories.length; j++) { if(refs[i] == categories[j].ref) { newArr.push(categories[j].name); } } } console.log(newArr); // ["Computer", "Food"]

但是，我想让这段代码更简单。 有没有办法让这段代码更简单？

let newArr = [];

for(let i = 0; i < refs.length; i++) {
  for(let j = 0; j < categories.length; j++) {
    if(refs[i] == categories[j].ref) {
      newArr.push(categories[j].name);
    }  
  }
}

console.log(newArr); // ["Computer", "Food"]

Answer 1

• 使用Array#reduce ，在更新Map时迭代categories ，其中key是引用， value是名称。
• 使用Array#map ，遍历refs并使用上面的 Map 来获取相应的名称。

 const categories = [ { "name": "Books", "ref": "categories/category1" }, { "name": "Computers", "ref": "categories/category2" }, { "name": "Drink", "ref": "categories/category3" }, { "name": "Food", "ref": "categories/category4" } ], refs = ["categories/category2", "categories/category4"]; const categoryRefNameMap = categories.reduce((map, { name, ref }) => map.set(ref, name), new Map); const newArr = refs.map(ref => categoryRefNameMap.get(ref)); console.log(newArr);

Answer 2

使用过滤器仅获取 ref 在 refs 内的类别。

如果您只想要名称，则可以使用map 。

 let categories = [ { "name": "Book", "ref": "categories/category1" }, { "name": "Computer", "ref": "categories/category2" }, { "name": "Shoes", "ref": "categories/category3" }, { "name": "Food", "ref": "categories/category4" } ]; let refs = ["categories/category2", "categories/category4"]; let filtered = categories.filter((c) => refs.includes(c.ref)); console.log(filtered); // [{name: "Computer", ref: "categories/category2"}, {name: "Food", ref: "categories/category4"}] let onlyNames = filtered.map((c) => c.name); console.log(onlyNames); // ["Computer", "Food"];

Answer 3

您可以在外部 for 语句中使用“find()”function和“includes()”function来简化代码：

 let categories = [ { "name": "Book", "ref": "categories/category1" }, { "name": "Computer", "ref": "categories/category2" }, { "name": "Shoes", "ref": "categories/category3" }, { "name": "Food", "ref": "categories/category4"} ]; let refs = ["categories/category2", "categories/category4"]; let newArr = []; for(let i = 0; i < refs.length; i++) { newArr.push(categories.find(v => v.ref.includes(refs[i])).name); } console.log(newArr); // ["Computer", "Food"]

Answer 4

您可以使用“map()”function和“find”function来简化代码：

 let categories = [ { "name": "Book", "ref": "categories/category1" }, { "name": "Computer", "ref": "categories/category2" }, { "name": "Shoes", "ref": "categories/category3" }, { "name": "Food", "ref": "categories/category4"} ]; let refs = ["categories/category2", "categories/category4"]; let newArr = []; newArr = refs.map(v1 => categories.find(v2 => v2.ref == v1).name); console.log(newArr); // ["Computer", "Food"]