Ionic 3项目中JSON数组的元素删除与添加方法问询

嘿，这两个操作在Ionic 3里其实很好实现，本质就是用JavaScript/TypeScript的原生数组方法就行——毕竟HTTP返回的JSON数组到了前端就是普通的JS数组嘛！我给你详细拆解下：

分两种常见场景，你可以按需选择：

按索引删除 #

如果你知道要删的元素在数组里的位置（比如第三个元素，索引是2），用splice方法最直接：

// 假设你的数组存在这个变量里
let countryArray = [
  {record_id: "1", local_TimeStamp: "16:00:00", country: "USA"},
  {record_id: "2", local_TimeStamp: "17:00:00", country: "Japan"},
  {record_id: "3", local_TimeStamp: "17:00:00", country: "Korea"},
  {record_id: "4", local_TimeStamp: "15:00:00", country: "Thailand"},
  {record_id: "5", local_TimeStamp: "16:00:00", country: "China"}
];

// 删除索引为2的元素（也就是Korea那一项）
countryArray.splice(2, 1);

splice的第一个参数是起始索引，第二个是要删除的元素数量，这里写1就只删目标元素。

按元素属性删除 #

如果你不知道索引，但知道要删的元素的某个属性值（比如要删record_id为"3"的项），用filter方法更合适：

// 过滤掉不符合条件的元素，重新赋值给原数组
countryArray = countryArray.filter(item => item.record_id !== "3");

filter会返回一个新数组，包含所有符合箭头函数条件的元素（这里就是所有record_id不等于"3"的项），间接删掉了目标元素。这种方法不会修改原数组，适合需要保留原数组副本的场景。

最常用的就是push方法，直接把新元素加到数组末尾：

// 先定义要追加的新元素
const newCountry = {
  record_id: "6",
  local_TimeStamp: "14:00:00",
  country: "Germany"
};

// 追加到数组末尾
countryArray.push(newCountry);

如果要一次性加多个元素，直接给push传多个参数就行：

countryArray.push(
  {record_id: "6", local_TimeStamp: "14:00:00", country: "Germany"},
  {record_id: "7", local_TimeStamp: "13:00:00", country: "France"}
);

如果你不想修改原数组，想用新数组保存结果，可以用concat：

const updatedCountryArray = countryArray.concat(newCountry);

concat会返回一个包含原数组所有元素和新元素的新数组，原数组保持不变。

最后提个小细节：如果这个数组是绑定到Ionic页面模板（比如用*ngFor渲染），用push/splice直接修改原数组时，Angular的变更检测会自动更新页面；如果用filter/concat这种返回新数组的方法，记得把新数组重新赋值给绑定的变量，这样页面才会同步更新哦～

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