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柯里函数的应用场景(深入详解JS函数的柯里化)
- js实现商品添加(js实现购物网站放大镜功能)
- js搜索功能的实现(前端JavaScript实现本地模糊搜索功能的方法实例)
- mysql xml转换json(Mysql将查询结果集转换为JSON数据的实例代码)
- js防抖用法(JavaScript的防抖和节流案例)
- js扫雷小游戏源代码(原生js实现简单贪吃蛇小游戏)
- MVC中JSON字符长度超出限制
- js定时器几分钟执行(利用JS定时器实现元素移动)
- python3json序列化(Python3.5 Json与pickle实现数据序列化与反序列化操作示例)
- javaweb购物车案例(js实现模拟购物商城案例)
- auto.js源码分享(最新热门脚本Autojs源码分享)
- js判断变量是否为空
- 使用Console调试js脚本
- js array的所有方法(js 数组 find,some,filter,reduce区别详解)
- vuejs组件使用教程交流(Vue vee-validate插件的简单使用)
- js中Attribute和Property区别
- 熊猫中国国宝(熊猫国宝酒53酱香)
- 春节会放假几天(春节会放假吗)
- 小浴室,大民生 缙云3200多户困难群众洗上免费热水澡(小浴室大民生缙云3200多户困难群众洗上免费热水澡)
- 元旦闲谭(元旦闲谭)
- 息烽 这个村 治垃圾 有招 人人争当卫生模范(息烽这个村治垃圾)
- 今天要吃什么(今天要吃什么菜)
热门推荐
- c#中list排序
- web服务器配置怎么选才是合适的呢(个人web服务器要用哪种服务器比较好?)
- php加密平台(PHP7实现和CryptoJS的AES加密方式互通示例AES-128-ECB加密)
- 微信小程序计数器代码(微信小程序实现计算器案例)
- javascript怎么生成html控件(JavaScript+html实现前端页面滑动验证2)
- 部署ssis包提示更改保护级别(SSIS 延迟验证方法)
- php获取数据方法(php定期拉取数据对比方法实例)
- height与line-height的关系(为什么你写的height:100%不起作用)
- javascript 数组排序
- docker-compose 开发代码(Docker Compose多容器部署的实现)