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

Question

I have 2 arrays .

The 1st array has 4 category objects and each object has "name" and "ref"(reference) :

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

The 2nd array has the references to categories :

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

Now, I want to make the new array of category names by extracting only category names from the 1st array "categories" variable using the references in the 2nd array "refs" variable .

I created the code to make the new array of category names using 2 arrays and it works perfectly making the new array which has 2 category names "Computer" and "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"]

This is the full runnable code :

 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"]

However, I want to make this code simpler . Are there any ways to make this code simpler ?

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

• Using Array#reduce , iterate over categories while updating a Map where the key is the ref and the value is the name.
• Using Array#map , iterate over refs and use the above Map to get the corresponding names.

 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

Use filter to get only the categories whose ref is inside refs.

if you only want the name you can use 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

You can use "find()" function and "includes()" function in the outer for statement to simplify your code:

 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

You can use "map()" function and "find" function to simplify your code:

 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"]