js如何编辑数组对象里的数组(JS操作对象数组实现增删改查实例代码)
类别:编程学习 浏览量:1391
时间:2021-10-15 00:10:40 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对象数组增删改查内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- js setTimeout
- js判断浏览器的版本
- nodejs请求页面(node.js+postman实现模拟HTTP服务器与客户端交互)
- js Date对象
- tomcat服务如何在eclipse中配置(HBuilderX配置tomcat外部服务器查看编辑jsp界面的方法详解)
- 微信js开发教程(微信JSSDK分享功能图文实例详解)
- js数字时钟编程(JavaScript实现动态数字时钟)
- extjs XTemplate的实例
- 使用Console命令调试JS
- js判断对象是否存在
- vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- js怎么转拼音(js实现中文转拼音的完整步骤记录)
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- js实现string.format 字符串占位符
- extjs radiogroup赋值和取值
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 节日我在岗|警景相融 平安相伴(节日我在岗警景相融)
- 战 疫 时刻 致敬每一位石化大学的 守护者(战疫时刻)
- 老弄堂里的市井味道(老弄堂里的市井味道)
- 小米音乐可绑定QQ音乐, QQ音乐 真的会消失在小米的设备上吗(小米音乐可绑定QQ音乐)
- 小米Watch S1评测 或许能成为小米冲击高端可穿戴设备的里程碑(小米WatchS1评测或许能成为小米冲击高端可穿戴设备的里程碑)
热门推荐
- html5标签怎么做(html5用video标签流式加载的实现)
- nginx优化安全设置(nginx优化的六点方法)
- service服务启动失败(service unavailable解决方法)
- php array只能放一种类型的数据(浅谈PHP array_search 和 in_array 函数效率问题)
- dedecms分页修改(Dedecms图片加上Alt和Title等属性的修改方法)
- nginx反向代理端口号(nginx 代理80端口转443端口的实现)
- .NET垃圾回收机制是什么
- vuex中action的值怎么接(vuex中Getter的用法详解)
- php语言程序设计基础面向对象(PHP面向对象程序设计之对象的遍历操作示例)
- sql启动错误代码1814(SQLMSSQLSERVER服务启动错误代码3414的解决方法)