讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript 数组与对象操作入门:筛选高分员工姓名的正确写法

小静姑娘_1545

小静姑娘_1545

发布时间:2026-02-01 10:11:00

|

360人浏览过

|

来源于php中文网

原创

JavaScript 数组与对象操作入门:筛选高分员工姓名的正确写法

本文面向编程新手,详解如何正确遍历对象数组并筛选满足条件(如 score > 4)的元素,指出常见错误(如错误嵌套数组、索引缺失),并提供返回单个/多个匹配结果的两种实用方案。

在 JavaScript 中,处理包含对象的数组(如员工列表)是基础但关键的技能。初学者常因对数组索引、对象属性访问及函数返回逻辑理解不深而出现运行错误或意外结果。以你的代码为例,核心问题有三处:

  1. 冗余嵌套:let List = [employers]; 将原本的数组 employers 再包进一个新数组,导致 List 变成二维结构([[{...}, {...}, ...]]),后续 List[i] 实际访问的是整个原数组,而非单个员工对象;
  2. 属性访问错误:List['score'] 试图从数组上直接读取 'score' 属性(数组没有该属性),且未使用索引 i 访问具体元素;
  3. 逻辑局限性:return 在循环中首次命中即退出函数,只能返回第一个匹配项,无法获取所有符合条件的员工。

✅ 正确做法是直接遍历传入的数组参数,并用方括号或点号访问每个对象的 score 属性。以下是两种推荐实现方式:

✅ 方案一:返回首个匹配姓名(适用于“找一个即可”场景)

function getFirstHighScoreEmployer(employerList) {
  for (let i = 0; i < employerList.length; i++) {
    if (employerList[i].score > 4) { // 直接用点号访问更简洁
      return employerList[i].name;
    }
  }
  return null; // 无匹配时明确返回 null,避免 undefined 模糊性
}

console.log(getFirstHighScoreEmployer(employers)); // 输出: "Adam"

✅ 方案二:返回所有匹配姓名数组(更常用、更实用)

function getAllHighScoreEmployers(employerList) {
  const result = [];
  for (let i = 0; i < employerList.length; i++) {
    if (employerList[i].score > 4) {
      result.push(employerList[i].name);
    }
  }
  return result;
}

// 或使用更现代、声明式的写法(推荐):
function getAllHighScoreEmployersV2(employerList) {
  return employerList
    .filter(employer => employer.score > 4)
    .map(employer => employer.name);
}

console.log(getAllHighScoreEmployers(employers)); // ["Adam"]
console.log(getAllHighScoreEmployersV2(employers)); // ["Adam"]

? 关键提醒:

  • 始终确保循环变量(如 i)用于访问数组元素:array[i],而非 array['score'];
  • 函数名应语义清晰(如 getFirst... / getAll...),避免歧义;
  • 使用 filter() + map() 组合是处理此类筛选+映射任务的行业惯例,代码更简短、可读性更高,也便于链式扩展;
  • 若数据量大或需复杂条件,优先考虑函数式方法(filter/map/reduce),它们不易出错且利于测试。

掌握这些基础模式后,你就能自信地操作任意结构的对象数组——这是构建真实应用(如用户列表、商品筛选、报表生成)的坚实起点。

立即学习“Java免费学习笔记(深入)”;

热门AI工具

更多
PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

相关专题

更多
golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

610

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

343

2025.11.16

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

533

2025.11.17

java判断map相关教程
java判断map相关教程

本专题整合了java判断map相关教程,阅读专题下面的文章了解更多详细内容。

303

2025.11.27

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

40

2026.10.22

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

20

2026.10.22

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

20

2026.10.22

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

0

2026.10.22

PHP时间戳漏洞修复教程
PHP时间戳漏洞修复教程

本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。

20

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn