JS操作对象数组实现增删改查实例代码
更新时间：2021年07月06日 10:24:53 作者：罗汉爷
JS提供了很多方便操作数组的方法,这篇文章主要给大家介绍了关于JS操作对象数组实现增删改查的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
1.介绍
最近帮朋友弄一个简单的针对json数组的增删改成页面，正好涉及到了js去操作对象数组实现增删改查功能。我估计很多朋友应该也会遇到这类操作，所以记录一下以便分享。
2.数据准备
这里我就以学生对象数组为例了，其实这个数组和json数组操作起来基本一致的，转换一下即可。例如可以使用JSON.parse将一串JSON字符串转换为js对象数组。
测试数据：
// 学生对象数组
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.如何测试？
这里大家可以借助谷歌浏览器F12开发者工具中的console面板（其实就是个js执行引擎），只需要将以上代码按顺序输入执行即可看到效果：
8.其他数组操作
这里附加一些其他操作命令，需要的朋友也可以参考：
- push() 在最后面添加元素
- unshift() 在最前面添加元素
- pop() 删除最后一个元素
- shift() 删除第一个元素
- splice() 删除元素，替换元素，插入元素
- sort() 数组排序
- reverse() 数组反转
- Vue.set()修改数组中的某一个
总结
到此这篇关于JS操作对象数组实现增删改查的文章就介绍到这了,更多相关JS对象数组增删改查内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近在学习 Webpack 相关的原理，本文用80行代码写一个Webpack插件并发布到npm，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
JS双向链表实现与使用方法示例(增加一个previous属性实现)
这篇文章主要介绍了JS双向链表实现与使用方法,在之前链表的基础上增加一个previous属性实现的双向链表功能,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了JavaScript函数的使用教程，JavaScript函数是被设计为执行特定任务的代码块。JavaScript函数会在某代码调用它时被执行。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了JS实现部分HTML固定页面顶部随屏滚动效果,涉及JavaScript响应onscroll事件动态操作页面元素属性的相关技巧,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了js实现全选反选不选功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了JavaScript数据结构与算法，文章围绕主题展开数据结构与算法的概念，以及几种常见的数据结构是什么，有什么优点和缺，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
《javascript设计模式》学习笔记五：Javascript面向对象程序设计工厂模式实例分析
这篇文章主要介绍了Javascript面向对象程序设计工厂模式,结合实例形式分析了《javascript设计模式》中Javascript面向对象工厂模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了JavaScript动态添加style节点的方法,涉及javascript节点操作的相关技巧,需要的朋友可以参考下2015-06-06
javascript-hashchange事件和历史状态管理实例分析
这篇文章主要介绍了javascript-hashchange事件和历史状态管理,结合实例形式分析了javascript-hashchange基本功能、原理及历史状态管理相关操作技巧,需要的朋友可以参考下2020-04-04
这篇文章主要为大家详细介绍了JavaScript模拟鼠标右键菜单效果的实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
最新评论