React Native中使用map函数处理JSON的报错修复及排序问题

一、修复"Can't find variable: group"报错 #

报错存在两个核心问题：

• 带连字符的属性访问错误：age-group包含连字符，用.访问时会被JS解析为element.age - group，把group当作未定义变量。必须使用括号表示法访问这类属性。
• 控制台方法大小写错误：JS是大小写敏感语言，Console需改为小写的console。

修复后的遍历代码：

const array = [{ "name":"xyz", "age-group":"bb"} ]

array.map((element) => {
    console.log(element["age-group"])
});

二、实现JSON数组排序 #

map仅用于遍历数组，排序需使用Array.sort()方法。以下是两种常见排序场景的实现：

1. 按age-group字段排序（字符串字典序） #

const array = [
  { "name":"xyz", "age-group":"bb"},
  { "name":"abc", "age-group":"aa"},
  { "name":"def", "age-group":"cc"}
];

// 升序排序（创建数组副本避免修改原数据）
const sortedByAgeGroupAsc = [...array].sort((a, b) => {
  return a["age-group"].localeCompare(b["age-group"]);
});

// 降序排序
const sortedByAgeGroupDesc = [...array].sort((a, b) => {
  return b["age-group"].localeCompare(a["age-group"]);
});

// 遍历输出排序结果
sortedByAgeGroupAsc.map(item => {
  console.log(`${item.name} - ${item["age-group"]}`);
});

2. 按name字段排序（字符串字典序） #

const sortedByNameAsc = [...array].sort((a, b) => {
  return a.name.localeCompare(b.name);
});

注意：sort()会直接修改原数组，使用扩展运算符[...array]创建数组副本后再排序，可避免污染原始数据。

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