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对象数组增删改查内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript Object与Function使用
Object instanceof Function 还是 Function instance of Object，是真是假，一一道来
2010-01-01
包含中国城市的javascript对象实例
这篇文章主要介绍了包含中国城市的javascript对象,以一个javascript的json数据格式存储为例分析了javascript存储城市信息的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
第一次接触JS require.js模块化工具
第一次接触JS require.js模块化工具，本文为大家介绍了JS模块化工具require.js教程第一课认识require.js，编写require.js，感兴趣的小伙伴们可以参考一下
2016-04-04
bootstrap警告框示例代码分享
这篇文章主要为大家详细介绍了bootstrap警告框示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
JavaScript indexOf的第二个参数用法
indexOf 是我们非常熟悉的一个方法,它可以用来获取某一个元素在一个数组里的位置,我们一般就会使用 array.indexOf(element) 的方法来进行使用,但是,大家有没有使用过 indexOf 的第二个参数呢？本文将给大家介绍一下indexOf的第二个参数用法,需要的朋友可以参考下
2024-02-02
OpenLayers3实现地图显示功能
这篇文章主要为大家详细介绍了OpenLayers3实现地图显示功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
Javascript在IE或Firefox下获取鼠标位置的代码
由于Firefox和IE等浏览器之间对JS解释的方式不一样，Firefox下面获取鼠标位置不能够直接使用clientX来获取。网上说的一般都是触发mousemove事件才行。我这里有两段代码，思路都一样，就是风格不同。
2009-12-12
JavaScript中两个字符串的匹配
本文分享JavaScript中两个字符串的匹配的一个实例代码，希望能给大家做一个参考。
2016-06-06
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.这篇文章主要介绍了Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)的相关资料,需要的朋友可以参考下
2016-10-10
原生js获取元素样式的简单方法
下面小编就为大家带来一篇原生js获取元素样式的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08