JS操作对象数组实现增删改查实例代码

2024-09-30 20:36:35

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数组常用的增删改查与其他属性详解

数组的增删改查数组的插入 push()尾部插入 var arr2 = [1, 2, 3] arr2.push(4, 5, 6) console.log(arr2) //[1,2,3,4,5,6] unshift()头部插入 var arr3 = [1, 2, 3] arr3.unshift(4, 5, 6) console.log(arr3) //[4, 5, 6, 1, 2, 3] splcie 在任意位置内插入,或删除 arr.splice(n,m,x)从索引n开始删除m个元素,把新增的元
浅谈JavaScript中数组的增删改查

数组的增加 •ary.push() 向数组末尾添加元素,返回的是添加后新数组的长度,原有数组改变 •ary.unshift() 向数组开头添加元素,返回的是添加后新数组的长度,原有数组改变 • var ary=[1,2,3,4]; var res=ary.unshift(6); console.log(res); ---->5 返回的是新数组的长度•ary.splice(n,m,x)从索引n开始删除m个元素,把新增的元素X放在索引n的前面,把删除的元素当成一个新数组返回,原有数组改
JS数组操作之增删改查的简单实现

JS提供了很多方便操作数组的方法,本文所要分享的就是如何快速对数组进行增.删.改.查. 一.增 1.push() 可接收任意数量的参数,把它们逐个添加至数组末尾,并返回修改后数组的长度.例如: var arr = []; var len = arr.push(1); console.log(arr); // [1] console.log(len); // 1 len = arr.push(2,3); console.log(arr); // [1,2,3] console.log(len);
javascript js 操作数组增删改查的简单实现

函数定义 Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; }; Array.prototype.remove = function(val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } }
JS实现数组的增删改查操作示例

本文实例讲述了JS实现数组的增删改查操作.分享给大家供大家参考,具体如下: 1.给原数组中新增用到 push 改变原数组的长度并返回新的长度,新元素添加在原数组的末尾 <doctype> <html> <head>元素新增数组</head> <body> <div id="dem">点击会给原素组末尾新增元素个数</div> <button onclick="funct()"
JS操作对象数组实现增删改查实例代码

1.介绍最近帮朋友弄一个简单的针对json数组的增删改成页面,正好涉及到了js去操作对象数组实现增删改查功能.我估计很多朋友应该也会遇到这类操作,所以记录一下以便分享. 2.数据准备这里我就以学生对象数组为例了,其实这个数组和json数组操作起来基本一致的,转换一下即可.例如可以使用JSON.parse将一串JSON字符串转换为js对象数组. 测试数据: // 学生对象数组 var students = [ {id:1, name: "张三", age: 14}, {id:2, n
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)

在上篇文章给大家介绍了Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一),接下来我们添加分页相关的依赖,时间紧张,直接上代码了,贴上我的pom文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)

环境搭建 spring boot的简介以往我们开发时用到spring总是避免不了繁琐的配置,例如我们要配置一个数据库连接,可能需要以下几步: 1.编写jdbc.properties配置文件: 2.创建spring的配置文件,加入spring配置文件前缀.配置数据库连接信息以及sqlsessionFactory等等: 3.还要在web.xml文件中加入spring的监听. springboot的出现大大简化了项目的搭建过程(spring配置以及maven配置),让我们专注于应用功能的开发,而不是
简述Mybatis增删改查实例代码

编写一个简单的mybatis进行插入数据的实例 1 数据库建表其中建表dob=Date of Birth 的意思 create table students (stud_id number primary key, name varchar2(20), email varchar2(20), dob date ); Oracle数据库中出现表已创建,则表示创建成功,如果出现名称已被使用,则可在建表之前进行删除操作:drop table students;或者进行级联删除drop table s
python列表的增删改查实例代码

names=["zhao00","qian01","sun02","li03","li03","li03","zhou04"] #print(names[]) 打印错误 print(names) 增 names.append("wu05") #增加到最后 names.insert(1,"zheng06") #增加到指定位置改
Oracle + mybatis实现对数据的简单增删改查实例代码

什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架. MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索.MyBatis 可以使用简单的XML 或注解用于配置和原始映射,将接口和 Java 的 POJO(Plain Old Java Objects,普通的Java对象)映射成数据库中的记录. 本文将详细介绍利用Oracle + mybatis实现对数据的简单增删改查的相关内容,下面话不多说了,来一起看看详细的介绍
Python面向对象之类和对象属性的增删改查操作示例

本文实例讲述了Python面向对象之类和对象属性的增删改查操作.分享给大家供大家参考,具体如下: 一.类属性的操作 # -*- coding:utf-8 -*- #! python2 class Chinese: country = 'China' def __init__(self,name): self.name = name def play_ball(self,ball): print('%s play %s' %(self.name,ball)) #查看属性 print(Chinese
IntelliJ Idea SpringBoot 数据库增删改查实例详解

SpringBoot 是 SpringMVC 的升级,对于编码.配置.部署和监控,更加简单微服务微服务是一个新兴的软件架构,就是把一个大型的单个应用程序和服务拆分为数十个的支持微服务.一个微服务的策略可以让工作变得更为简便,它可扩展单个组件而不是整个的应用程序堆栈,从而满足服务等级协议. Spring 为微服务提供了一整套的组件-SpringClound , SpirngBoot 就是该基础. 第一个SpringBoot程序这里使用的开发软件是IntelliJ Idea,和Eclipse