Javascript：數組迭代適用於第二個表達式，但不適用於第一個

Question

所以我從 mongoDB 數據庫導入以下內容，在我正在構建的 node.js 應用程序上，我要發布的塊部分都在一個異步函數中，我將嘗試為每個發布一個控制台日志我正在處理的對象中是否有人可以向我解釋這一點，但基本上我有 2 個數組迭代，構建一個對象作為對象數組發送到前端，但是代碼發送第一個匹配我的迭代的對象，然后它返回一個空白對象，這意味着如果我嘗試向預期輸出添加多個對象，它將只返回表達式找到的第一個元素中的一個，並且不會檢查其余的他們。

在此先感謝任何可以幫助我的人！

我正在使用的對象：

const about = await About.find(); //always has one document only so no conflict here
const allSkills = await Skill.find(); //grabs all the skills in the database
const skills = about[0].skillBag.filter((name) => name); //selects all the skills the user saved

控制台日志：

console.log(allSkills) -> [
  {
    _id: 5fa59424f3d6532ae63fad26,
    category: 'Web Development',
    name: 'wordpress',
    path: 'wordpress.svg',
    __v: 0
  },
  {
    _id: 5fa5979c9e84032b92d3e9ee,
    category: 'DevOps',
    name: 'nginx',
    path: 'nginx.svg',
    __v: 0
  },
  {
    _id: 5fa597b79e84032b92d3e9ef,
    category: 'Web Development',
    name: 'javascript',
    path: 'javascript.svg',
    __v: 0
  },
.
.
.
]

console.log(skills) -> ["javascript","nginx"]

由於我已經嘗試調試了一段時間，現在我什至構建了單獨的表達式以嘗試一次迭代一個數組：

//This lists all the skills with the category 'DevOps' 
//and builds an object from them with the output {name: 'nginx', path: 'nginx.svg'}
const allDevOpsSkills = allSkills
      .filter((e) => e.category == "DevOps")
      .map((n) => ({ name: n.name, path: n.path }));
// Does the same for the category 'Web Development'
const allWebDevSkills = allSkills
      .filter((e) => e.category == "Web Development")
      .map((n) => ({ name: n.name, path: n.path }));

這兩個表達式總是返回一個包含對象的數組.map()構建然后我抓住這兩個表達式並執行：

const userDevOpsSkills = allDevOpsSkills.filter((n, i) => n.name == `${skills[i]}`);

// returns [ { name: 'nginx', path: 'nginx.svg' } ]

const userWebDevSkills = allWebDevSkills.filter((n, i) => n.name == `${skills[i]}`);

// returns [] and not [ { name: 'javascript', path: 'javascript.svg' } ]

我知道我可以在一個表達式而不是 2 個表達式中執行此操作，這是我表達式的最終版本，但是如果我像上面的示例一樣執行我的代碼，或者如果我像下面的示例一樣運行它，輸出總是相同的

//Same expressions as above but in a more short way

    const userWebDevSkills = allSkills
      .filter((e) => e.category == "Web Development")
      .map((n) => ({ name: n.name, path: n.path }))
      .filter((n, i) => n.name == `${skills[i]}`);
    const userDevOpsSkills = allSkills
      .filter((e) => e.category == "DevOps")
      .map((n) => ({ name: n.name, path: n.path }))
      .filter((n, i) => n.name == `${skills[i]}`);

額外信息：

- 我當前在第一個代碼塊上的技能常量返回的參數都存儲在數據庫中，但為了使帖子不再被我編輯，我想對同一個數組進行多次檢查。

如果我不能更好地解釋自己，我很抱歉，英語不是我的第一語言，我沒有編碼那么長時間來了解這里到底出了什么問題。

再次提前感謝任何可以幫助我的人！

編輯波紋管是沒有被拆分成單獨的代碼塊的代碼

const express = require("express");
const About = require("../models/aboutSchema");
const Skill = require("../models/skillSchema");
const { logger } = require("../controllers/logs");

const router = express.Router();

router.get("/", async (req, res) => {
  try {
    const path = req.originalUrl;
    const about = await About.find();
    const allSkills = await Skill.find();
    const skills = about[0].skillBag.filter((name) => name);
    
    const userWebDevSkills = allSkills
      .filter((e) => e.category == "Web Development")
      .map((n) => ({ name: n.name, path: n.path }))
      .filter((n, i) => n.name == `${skills[i]}`);
    const userDevOpsSkills = allSkills
      .filter((e) => e.category == "DevOps")
      .map((n) => ({ name: n.name, path: n.path }))
      .filter((n, i) => n.name == `${skills[i]}`);

    console.log(userWebDevSkills);
    res.status(200).render("home.ejs", {
      title: "Homepage | FilipeDev",
      user: req.user,
      path,
      about: about[0],
      webDev: userWebDevSkills,
      devOps: userDevOpsSkills,
    });
  } catch (e) {
    console.log(e);
    logger.error(e);
  }
});

module.exports = router;

Answer 1

如果我理解你的問題，你會期待：

const userWebDevSkills = allWebDevSkills.filter((n, i) => n.name == `${skills[i]}`);

為你帶來：

[ { name: 'javascript', path: 'javascript.svg' } ]

當我運行此代碼時：

const skills = ["javascript", "nginx"];

const allSkills = [{
        _id: 'fa59424f3d6532ae63fad26',
        category: 'Web Development',
        name: 'wordpress',
        path: 'wordpress.svg',
        __v: 0
    },
    {
        _id: 'fa5979c9e84032b92d3e9ee',
        category: 'DevOps',
        name: 'nginx',
        path: 'nginx.svg',
        __v: 0
    },
    {
        _id: 'fa597b79e84032b92d3e9ef',
        category: 'Web Development',
        name: 'javascript',
        path: 'javascript.svg',
        __v: 0
    },
];

const allDevOpsSkills = allSkills
    .filter((e) => e.category == "DevOps")
    .map((n) => ({ name: n.name, path: n.path }));

const allWebDevSkills = allSkills
    .filter((e) => e.category == "Web Development")
    .map((n) => ({ name: n.name, path: n.path }));

const userWebDevSkills = allWebDevSkills.filter((n, i) => n.name == `${skills[i]}`);

我確實為 userWebDevSkills 獲取了一個空數組，問題是allWebDevSkills最終是這樣的：

[
  { name: 'wordpress', path: 'wordpress.svg' },
  { name: 'javascript', path: 'javascript.svg' }
]

而且，如果skills是這樣的：

["javascript","nginx"]

那么，這個條件：

n.name == `${skills[i]}`

永遠不會是真的，所以你永遠不會保留allWebDevSkills.filter()操作中的任何項目，因此最終會得到一個空數組。 我不知道你到底想用

n.name == `${skills[i]}` 

比較，所以我不確定要修復它的確切建議，但這需要allWebDevSkills和.name屬性的skills之間的數組匹配中的確切位置，而這不會發生。 javascript name 屬性在allWebDevSkills位置 1 中，但在skills數組的位置0中，因此永遠不會匹配您的過濾條件。

---

另外，像這樣的代碼：

 n.name == `${skills[i]}`

可以是這樣的：

 n.name === skills[i]

不需要將單個字符串單獨放入${}模板中，並且在比較字符串時使用=== （並且不想啟用類型轉換）。

---

如果您嘗試使用.filter()來刪除在skills數組中任何地方都沒有.name屬性的任何項目，那么我建議這樣做：

 const skills = ["javascript", "nginx"]; const skillsSet = new Set(skills); const allSkills = [{ _id: 'fa59424f3d6532ae63fad26', category: 'Web Development', name: 'wordpress', path: 'wordpress.svg', __v: 0 }, { _id: 'fa5979c9e84032b92d3e9ee', category: 'DevOps', name: 'nginx', path: 'nginx.svg', __v: 0 }, { _id: 'fa597b79e84032b92d3e9ef', category: 'Web Development', name: 'javascript', path: 'javascript.svg', __v: 0 }, ]; const allDevOpsSkills = allSkills .filter((e) => e.category == "DevOps") .map((n) => ({ name: n.name, path: n.path })); const allWebDevSkills = allSkills .filter((e) => e.category == "Web Development") .map((n) => ({ name: n.name, path: n.path })); const userWebDevSkills = allWebDevSkills.filter(n => skillsSet.has(n.name)); console.log(userWebDevSkills);