JavaScript 操作对象数组的增删改查实战指南

1.介绍

近期协助朋友开发一个基于 JSON 数组的页面增删改功能，其中涉及到了使用 JavaScript 操作对象数组的核心逻辑。考虑到许多开发者可能面临类似需求，特此整理相关实现方案以便分享参考。

2.数据准备

本文以学生对象数组作为示例，该结构与 JSON 数组的操作方式基本一致，只需进行相应转换即可使用。例如，可以利用 JSON.parse 方法将 JSON 字符串解析为 JavaScript 对象数组。

测试数据：

// 学生对象数组
var students = [
    {id:1, name: "张三", age: 14},
    {id:2, name: "李四", age: 15},
    {id:3, name: "王五", age: 17},
    {id:4, name: "赵六", age: 18}
];

3.查询操作

根据下标查询

console.log(students[1]);

根据id查询

var ss = students.filter((p) => {
    return p.id == 4;
});

console.log(ss);
console.log(ss[0]); // 打印第一个元素

根据姓名模糊查询

4.新增操作

var e = {id:5, name: "王八", age: 20};
students.push(e);

5.删除

// 根据ID获取下标

var e = students.filter((p) => {
    return p.id == 4;
});

var index = students.indexOf(e);
// 根据下标删除
students.splice(index,1);
console.log(students.length);  // 剩下4个

6.修改

// 可以直接根据下标修改
students[0].name='张三1';
students[0].age=20;
console.log(students[0]);

7.如何测试？

建议利用 Google 浏览器 F12 开发者工具中的 Console 面板（即 JavaScript 执行引擎）进行测试。只需按顺序输入上述代码并执行，即可观察到预期效果：

8.其他数组操作

此处补充一些其他常用数组操作方法，供有需要的开发者参考：

• push() 在最后面添加元素
• unshift() 在最前面添加元素
• pop() 删除最后一个元素
• shift() 删除第一个元素
• splice() 删除元素，替换元素，插入元素
• sort() 数组排序
• reverse() 数组反转
• Vue.set()修改数组中的某一个

总结

到此这篇关于JS操作对象数组实现增删改查的文章就介绍到这了,更多相关JS对象数组增删改查内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！