JavaScript 数组与对象增删改查详解
本文详解 JavaScript 中数组和对象的增删改查操作。涵盖 push、pop、splice、indexOf 等数组方法，以及属性赋值、delete 关键字和访问语法。通过封装 arrayUtils 和 objectUtils 对象展示最佳实践，并强调引用类型与拷贝机制的重要性。
数组的应用场景及优劣分析：
数组适用场景：
数组适用于需按序存储及访问同类型数据的情形。典型场景涵盖列表存储、数据遍历、排序与过滤处理等。
- 优势：
- 访问高效：依托索引可迅速定位并访问数组内元素。
- 有序存储：元素依添加次序保存，维持数据顺序性。
- 动态扩容：数组长度可随需动态增加，便于元素增删。
- 劣势：
- 插入删除开销：数组内插入或删除元素需移动其他元素位置，易致性能损耗。
- 类型限制：数组元素须为同类型，不适用于异质数据存储。
- 内存消耗：数组需连续内存空间，长度过大易引发内存不足。
对象的应用场景及优劣分析：
适用场景：
对象适用于存储及操作键值对结构数据，各属性含唯一键与对应值。典型场景包括实体表示、配置信息存储、数据分组与组织等。
- 优势：
- 灵活性强：对象可存储异质数据，支持动态增删属性。
- 键值对结构：通过键可快速检索对应值。
- 数据组织：对象可将相关数据聚合，便于操作与管理。
- 劣势：
- 访问无序：对象属性无固定顺序，需通过属性名查找，可能降低访问速度。
- 内存消耗：属性名占用额外内存，属性众多时可能导致内存消耗较大。
- 属性名冲突：属性名须唯一，重复名可能导致数据冲突或覆盖。
依据具体需求与数据结构，选取合适的数组或对象以存储和操作数据。
涉及 JavaScript 中数组与对象时，以下列举常用增删改查操作：
数组增删改查：
1. 元素增加：
调用 push() 方法将元素追加至数组末尾。
let arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]2. 元素删除：
调用 pop() 方法移除数组末尾元素。
let arr = [1, 2, 3];
arr.pop(); // [1, 2]3. 元素修改：
通过索引访问数组元素并执行修改操作。
let arr = [1, 2, 3];
arr[1] = 4; // [1, 4, 3]4. 元素查找：
调用 indexOf() 方法检索数组中指定元素的索引。
let arr = [1, 2, 3];
let index = arr.indexOf(2); // 1多种增删改查实现方式
数组增删改查可通过多种方法实现。以下列举常见方法示例：
1. 基于索引的增删改查：
let arr = [1, 2, 3];
// 增加元素
arr.push(4); // [1, 2, 3, 4]
// 删除元素
arr.splice(1, 1); // [1, 3, 4]
// 修改元素
arr[0] = 5; // [5, 3, 4]
// 查找元素
let index = arr.indexOf(3); // 12. 基于数组方法的增删改查：
let arr = [1, 2, 3];
// 增加元素
arr = arr.concat(4); // [1, 2, 3, 4]
// 删除元素
arr = arr.filter(element => element !== 2); // [1, 3, 4]
// 修改元素
arr = arr.map(element => element * 2); // [2, 6, 8]
// 查找元素
let index = arr.findIndex(element => element === 6); // 13. 基于展开运算符的增删改查：
let arr = [1, 2, 3];
// 增加元素
arr = [...arr, 4]; // [1, 2, 3, 4]
// 删除元素
arr = arr.filter(element => element !== 2); // [1, 3, 4]
// 修改元素
arr = arr.map(element => element * 2); // [2, 6, 8]
// 查找元素
let index = arr.findIndex(element => element === 6); // 1上述为常见数组增删改查方法示例。可根据具体需求与偏好选择合适方法操作数组。
对象增删改查：
1. 属性增加：
通过直接赋值方式为对象添加新属性。
let obj = { name: 'John', age: 25 };
obj.gender = 'male'; // { name: 'John', age: 25, gender: 'male' }2. 属性删除：
调用 delete 关键字移除对象属性。
let obj = { name: 'John', age: 25 };
delete obj.age; // { name: 'John' }3. 属性修改：
通过属性名访问对象属性并执行修改。
let obj = { name: 'John', age: 25 };
obj.age = 30; // { name: 'John', age: 30 }4. 属性查找：
利用点号或方括号语法访问对象属性。
let obj = { name: 'John', age: 25 };
let age = obj.age; // 25需注意，数组与对象在 JavaScript 中属引用类型，对其执行增删改查操作将直接修改原始数组或对象。若需避免修改原始数据，可使用深拷贝或浅拷贝创建副本进行操作。
封装相关方法
为便捷操作数组与对象增删改查，可封装相应方法。以下列举封装数组与对象增删改查方法的示例代码：
// 数组操作方法
const arrayUtils = {
// 添加元素
addElement: function(arr, element) {
arr.push(element);
return arr;
},
// 删除元素
deleteElement: function(arr, index) {
arr.splice(index, 1);
return arr;
},
// 修改元素
updateElement: function(arr, index, newElement) {
arr[index] = newElement;
return arr;
},
// 查找元素
findElement: function(arr, element) {
return arr.indexOf(element);
}
};
// 对象操作方法
const objectUtils = {
// 添加属性
addProperty: function(obj, key, value) {
obj[key] = value;
return obj;
},
// 删除属性
deleteProperty: function(obj, key) {
delete obj[key];
return obj;
},
// 修改属性
updateProperty: function(obj, key, newValue) {
obj[key] = newValue;
return obj;
},
// 查找属性
findProperty: function(obj, key) {
return obj[key];
}
};
// 示例调用
let arr = [1, 2, 3];
let obj = { name: 'John', age: 25 };// 数组操作示例
console.log(arrayUtils.addElement(arr, 4)); // [1, 2, 3, 4]
console.log(arrayUtils.deleteElement(arr, 1)); // [1, 3]
console.log(arrayUtils.updateElement(arr, 0, 5)); // [5, 3]
console.log(arrayUtils.findElement(arr, 3)); // 1// 对象操作示例
console.log(objectUtils.addProperty(obj, 'gender', 'male')); // { name: 'John', age: 25, gender: 'male' }
console.log(objectUtils.deleteProperty(obj, 'age')); // { name: 'John', gender: 'male' }
console.log(objectUtils.updateProperty(obj, 'name', 'Jane')); // { name: 'Jane', gender: 'male' }
console.log(objectUtils.findProperty(obj, 'gender')); // 'male'上述示例代码定义了 arrayUtils 与 objectUtils 对象，分别封装数组与对象增删改查方法。可根据需求调用相应方法进行操作。示例展示了数组与对象的增删改查操作及结果输出。可根据实际需求进行调用与修改。
至此，关于 JS 数组及对象增删改查的文章介绍完毕。更多相关 js 数组增删改查内容请搜索本站往期文章或继续浏览下方相关文章，希望大家日后多多支持本站！
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18