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

JavaScript 中筛选高分员工姓名的完整教程

风磊大大_6162

风磊大大_6162

发布时间:2026-02-01 12:06:30

|

245人浏览过

|

来源于php中文网

原创

JavaScript 中筛选高分员工姓名的完整教程

本文教你如何正确遍历对象数组、筛选满足条件(如 score > 4)的元素,并返回所有匹配员工姓名,同时指出新手常见的数组嵌套与属性访问错误。

在 JavaScript 中,处理包含对象的数组(如员工信息列表)是基础但关键的技能。初学者常因混淆数据结构层级、错误访问属性或过早 return 而无法获得预期结果。下面我们将从你原始代码的问题出发,逐步讲解正确实现方式。

? 原代码的主要问题

  1. 冗余嵌套数组:let List = [employers]; 将整个数组 employers 作为单个元素放入新数组,导致 List.length === 1,且 List[i] 实际是原数组而非员工对象;
  2. 错误的属性访问:List['score'] 试图从数组本身读取 score 属性(数组没有该属性),应改为 employerList[i].score 或 employerList[i]['score'];
  3. 过早终止循环:使用 return 在第一次匹配时就退出函数,只能返回第一个符合条件的姓名,无法获取全部。

✅ 正确做法一:返回首个匹配姓名(修复版)

const employers = [
  { name: "Adam", score: 5 },
  { name: "Jane", score: 3 },
  { name: "Lucas", score: 3 },
  { name: "Francesca", score: 2 },
  { name: "Mason", score: 4 }
];

function getEmployer(employerList) {
  for (let i = 0; i < employerList.length; i++) {
    if (employerList[i].score > 4) { // ✅ 直接访问对象属性,无需引号
      return employerList[i].name; // ⚠️ 仅返回第一个匹配项
    }
  }
  return null; // ✅ 建议添加兜底返回值,避免 undefined
}

console.log(getEmployer(employers)); // 输出: "Adam"
? 提示:此写法适用于“找一个即可”的场景,但不满足“打印所有高分员工”的原始需求。

✅ 正确做法二:返回所有匹配姓名(推荐)

更符合实际业务逻辑——收集所有 score > 4 的员工姓名:

function getEmployer(employerList) {
  const matchedNames = []; // ✅ 使用语义化变量名

  employerList.forEach(employer => {
    if (employer.score > 4) {
      matchedNames.push(employer.name);
    }
  });

  return matchedNames;
}

// 测试数据(含多个高分员工)
const employers = [
  { name: "Adam", score: 5 },
  { name: "Jane", score: 3 },
  { name: "Lucas", score: 3 },
  { name: "Francesca", score: 2 },
  { name: "Mason", score: 4 },
  { name: "Lucas2", score: 8 },
  { name: "Mason2", score: 7 }
];

console.log(getEmployer(employers)); 
// 输出: ["Adam", "Lucas2", "Mason2"]

✅ 优势:

Java注释规范Skills
Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式,或要求按照代码注释规范处理 Java 文件时,使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则,并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括:补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载
  • 使用 forEach 更简洁可读;
  • employer.score 比 employer['score'] 更直观(点语法优先,除非键名含特殊字符);
  • 返回数组,支持后续操作(如 join(', ') 格式化输出)。

? 进阶写法:一行函数式(ES6+)

const getEmployer = (list) => list
  .filter(emp => emp.score > 4)
  .map(emp => emp.name);

console.log(getEmployer(employers)); // ["Adam", "Lucas2", "Mason2"]

✅ filter() + map() 组合是处理此类“筛选→提取”任务的标准函数式范式,代码更声明式、无副作用。

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

⚠️ 注意事项总结

  • ❌ 不要将参数数组再次包装成新数组(如 [employers]);
  • ✅ 访问对象属性优先用点语法(obj.prop),动态键才用方括号(obj[key]);
  • ✅ 循环中需用索引 i 或回调参数访问具体对象,不可跳过层级;
  • ✅ 函数应有明确返回值(包括无匹配时的 [] 或 null),避免隐式 undefined;
  • ✅ 多用 const 声明不变量,增强代码可维护性。

掌握数组与对象的协同操作,是你迈向 JavaScript 数据处理能力的关键一步。从理解结构、修正语法,到选择合适的方法(for / forEach / filter+map),每一步都值得反复练习。

热门AI工具

更多
SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

豆包大模型

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

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

DeepSeek

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

WorkBuddy

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

PixTV
PixTV Hot

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

Atoms
Atoms Hot

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

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

285

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

406

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

375

2025.12.24

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

549

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1698

2024.03.01

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

798

2025.12.04

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2278

2023.09.20

treenode的用法
treenode的用法

​在计算机编程领域,TreeNode是一种常见的数据结构,通常用于构建树形结构。在不同的编程语言中,TreeNode可能有不同的实现方式和用法,通常用于表示树的节点信息。更多关于treenode相关问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2641

2023.12.01

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

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

60

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