如何在JS或jQuery中提取JSON嵌套数组指定值并筛选特定用户

嘿，我来帮你把这两个问题拆解清楚！先讲从嵌套JSON数组提取指定值的通用思路，再针对你给出的person数组示例给出具体实现。

一、JavaScript/jQuery中从嵌套数组提取指定值的通用方法 #

核心逻辑其实很简单：遍历外层数组，逐个检查内层嵌套数组是否包含目标值，下面是两种常用的实现方式：

1. 原生JavaScript方案 #

主要用到两个数组方法：

• filter()：负责筛选外层数组中符合条件的元素
• some()：用来快速判断内层嵌套数组里是否存在目标值（只要有一个匹配就返回true）

你可以根据需求，要么提取符合条件的完整对象，要么只提取对象里的某个属性，组合这两个方法就能实现。

2. jQuery方案 #

jQuery提供了$.grep()来筛选数组，搭配$.inArray()检查嵌套数组中的目标值，逻辑和原生一致，但写法更贴合jQuery的风格。

二、针对给定person数组的具体实现 #

先回顾你给出的示例数据：

var person = [
  { "name":"Angel", "age":23, "color":[ "pink", "purple", "white" ] },
  { "name":"Harry", "age":20, "color":[ "pink", "yellow" , "red" ] },
  { "name":"Ella", "age":21, "color":[ "green", "gray", "black" ] }
];

我们需要筛选出color数组包含pink的人员姓名，下面分别给出原生JS和jQuery的实现：

1. 原生JavaScript实现 #

// 第一步：筛选出喜欢粉色的人员对象
const pinkLovers = person.filter(personItem => {
  // 检查当前人员的color数组是否包含pink
  return personItem.color.some(color => color === 'pink');
});

// 第二步：提取这些人员的姓名，得到姓名数组
const pinkLoverNames = pinkLovers.map(item => item.name);

// 输出结果：["Angel", "Harry"]
console.log(pinkLoverNames);

嫌麻烦的话可以把两步合并成一行，更简洁：

const pinkLoverNames = person
  .filter(p => p.color.some(c => c === 'pink'))
  .map(p => p.name);

2. jQuery实现 #

// 用$.grep筛选出符合条件的人员对象
const pinkLovers = $.grep(person, function(personItem) {
  // $.inArray返回目标值在数组中的索引，-1表示不存在
  return $.inArray('pink', personItem.color) !== -1;
});

// 用$.map提取姓名
const pinkLoverNames = $.map(pinkLovers, function(item) {
  return item.name;
});

// 输出结果：["Angel", "Harry"]
console.log(pinkLoverNames);

实现逻辑拆解 #

1. 筛选阶段：遍历外层的person数组，对每个人员对象，检查其color嵌套数组是否包含pink；
2. 提取阶段：把筛选出来的人员对象中的name属性单独提取出来，得到最终的姓名列表；
3. 如果你需要的不是姓名，而是完整的人员信息，直接使用筛选后的pinkLovers数组就可以啦。

内容的提问来源于stack exchange，提问作者Angie