javascript - 如何使用简单的循环和 'if' 语句显示数组对象？

Question

我有三个数组和几个简单的循环。我想指定三个条件来显示一个来自华沙的人在 Web 开发人员职位上的薪水超过 2000 年。问题是它显示了两条记录而不是一条记录。

我试过在每个循环中编写条件，但我的组合都没有奏效。

var people = [
    {'name': 'Viola', 'salary': 2500, 'surname': 'Smith'},
    {'name': 'Boris', 'salary': 1300, 'surname': 'Popkovitch'},
    {'name': 'John',  'salary': 500,  'surname': 'Lynn'},
    {'name': 'Tom',   'salary': 3300, 'surname': 'Gates'},
    {'name': 'Levis', 'salary': 900,  'surname': 'Klark'},
];

var workplace = [
    {'city': 'New York',   'persons': ['Viola']},
    {'city': 'Manchester', 'persons': ['John', 'Boris']},
    {'city': 'Warsaw',     'persons': ['Tom', 'Levis']},
];

var job = [
    {'position': 'Head manager',  'workers': ['Boris']},
    {'position': 'Web developer', 'workers': ['Tom', 'Viola']},
    {'position': 'Principal',     'workers': ['Levis', 'John']}
];

var array = [];

for (var x = 0; x < people.length; x++) {
  for (var y = 0; y < workplace.length; y++) {
    for (var z = 0; z < job.length; z++) {
      if (workplace[y].city === 'Warsaw' && job[z].position === 'Web developer' && people[x].salary > 2000) {
        array.push(people[x]);
      }
    }
  }
};

console.log(array);

我希望代码只返回 Tom 对象，而不是 Tom 和 Viola。任何想法？

Answer 1

您的代码实际上是这样做的:如果列表中存在城市“华沙”并且列表中存在职位“Web 开发人员”，那么请给我所有薪水超过 2k 的人。由于前两个条件在您的示例数据 (tautology) 上为真，因此您编写的代码会返回列表中所有薪水超过 2k 的人，这是您观察到的并在此处结束。

在这一点上，我建议您考虑您拥有的数据结构是否适合按这些标准过滤人员。但是假设您需要坚持使用当前的数据表示。此外，您编写和 Barmar 复制的代码效率极低。这是一个(明智的)人类 可以完成这样的任务:

在工作场所列表中找到“华沙”并用记号笔突出显示；转至 8. ，如果没有找到。

在工作列表中找到“Web 开发人员”并用记号笔突出显示；转至 8. ，如果没有找到。

找到薪水> 2000的第一个人；转至 8. ，如果没有找到。

在突出显示的城市人员列表中查找人员姓名；转至 8. ，如果没有找到。

在突出显示的工作的 worker 列表中查找人名；转至 8. ，如果没有找到。

是的，我找到了符合条件的记录，将其推送到输出!

查找下一个薪水 > 2000 的人；转至 4. ，如果找到。

完毕!

您在上面的算法中看到任何 for 循环了吗？好吧，有些人会说循环隐藏在那里。这是真的，但现在我们有 higher order functions (我希望你不介意 Python 代码)做同样的事情——在其中隐藏循环。 Array.Filter 是此类函数的一个示例。 .它需要一个回调(委托(delegate)、lambda、谓词、箭头函数、callitwhatyouwant 等)参数，该参数对数组中的每个元素只执行一次，以便它们出现在数组中。回调决定是否应将特定元素保留在结果数组中。函数的结果是一个新数组，其中填充了回调函数返回的元素 true .让我们开始构建这个函数。

const array = people.filter(person => person.salary > 2000);

这里我通过了 arrow function作为参数，因为它的语法简洁。这行代码有效地实现了步骤 #3和 #7上面的算法。这是步骤的代码 #1和 #2 :

const warsaw = workplace.find(aWorkplace => aWorkplace.city === 'Warsaw');
const webDeveloper = workplace && job.find(aJob => aJob.position === 'Web developer');

我用了 Array.find查找所需记录的功能。当然，这假设城市名称和位置名称在数组中是唯一的。你还记得关于数据结构的那一点吗？但没关系，让我们把它放在一边。 workplace &&第二行是防止无意义的查找，以防找不到“华沙”。现在把它们放在一起:

const warsaw = workplace.find(aWorkplace => aWorkplace.city === 'Warsaw');
const webDeveloper = workplace && job.find(aJob => aJob.position === 'Web developer');
const array = (warsaw && webDeveloper && people.filter(person =>
  person.salary > 2000 &&
  warsaw.persons.includes(person.name) &&
  webDeveloper.workers.includes(person.name)
)) || [];

我知道我可以省略 warsaw &&在第三行，但我更喜欢保留它，以免在逻辑中引入“谜题”。

那么我们在这里学到了什么？为什么我们必须经历这个？如果对比原版 for -loop 的代码，你会很快发现后者更具可读性，因为它基本上是用简单的英语编写的，而且效率更高，因为它避免了执行不必要的步骤。

作为奖励，也许今天是您了解 higher order functions 的那一天和 arrow functions .

这是片段。

var people = [
    {'name': 'Viola', 'salary': 2500, 'surname': 'Smith'},
    {'name': 'Boris', 'salary': 1300, 'surname': 'Popkovitch'},
    {'name': 'John',  'salary': 500,  'surname': 'Lynn'},
    {'name': 'Tom',   'salary': 3300, 'surname': 'Gates'},
    {'name': 'Levis', 'salary': 900,  'surname': 'Klark'},
];

var workplace = [
    {'city': 'New York',   'persons': ['Viola']},
    {'city': 'Manchester', 'persons': ['John', 'Boris']},
    {'city': 'Warsaw',     'persons': ['Tom', 'Levis']},
];

var job = [
    {'position': 'Head manager',  'workers': ['Boris']},
    {'position': 'Web developer', 'workers': ['Tom', 'Viola']},
    {'position': 'Principal',     'workers': ['Levis', 'John']}
];

const warsaw = workplace.find(aWorkplace => aWorkplace.city === 'Warsaw');
const webDeveloper = workplace && job.find(aJob => aJob.position === 'Web developer');
const array = (warsaw && webDeveloper && people.filter(person =>
    person.salary > 2000 &&
    warsaw.persons.includes(person.name) &&
    webDeveloper.workers.includes(person.name)
)) || [];

console.log(array);

我最后的观察是你使用了标识符 people ，这意味着复数，这没关系，但对于其余列表，您使用单数名词 - workplace和 job .我建议你保持命名的一致性，因为它也大大提高了代码的可读性。