JavaScript基础-数组操作：增删改查

数组作为JavaScript中最常用的数据结构之一，其增删改查操作是日常开发中的基础技能。本文将深入浅出地介绍数组的常见操作方法，分析在使用过程中遇到的易错点，并提供代码示例及避免策略，助你高效、准确地操作数组。

一、数组的增删改查方法

1. 查询（Read）

• 索引访问：直接通过下标获取元素，如arr[0]。
• indexOf/lastIndexOf：查找元素首次或最后一次出现的位置。
• includes：判断数组是否包含某元素。

2. 修改（Update）

• 直接赋值：通过索引直接修改元素，如arr[0] = 'new value'。
• splice：多功能方法，可用于替换、删除和插入元素。

3. 添加（Add）

• push：末尾添加一个或多个元素。
• unshift：开头添加一个或多个元素。
• splice：可在指定位置插入元素。

4. 删除（Delete）

• pop：移除并返回数组最后一个元素。
• shift：移除并返回数组第一个元素。
• splice：通过指定起始索引和删除数量来移除元素。

二、常见问题与易错点

易错点1：数组越界

• 问题：在访问或修改数组元素时，索引超出了数组的实际范围。
• 避免方法：在操作前检查索引合法性，使用数组的length属性确保索引不越界。

易错点2：splice方法参数理解不清

• 问题：splice方法的参数较为复杂，容易混淆删除元素的数量与插入元素的位置。
• 避免方法：明确splice(index, deleteCount[, item1[, ...[, itemN]]])的参数意义，特别是deleteCount表示要移除的元素数量，而非索引位置。

易错点3：修改原数组与返回值混淆

• 问题：部分数组方法（如splice、sort）会直接修改原数组，而有些（如concat、slice）则返回新数组。
• 避免方法：熟悉每个方法的副作用，明确是原地修改还是返回新数组，根据需求选择合适的方法。

三、代码示例与实践

查询示例

javascript

复制代码

let fruits = ['apple', 'banana', 'cherry']; console.log(fruits.includes('banana')); // true console.log(fruits.indexOf('orange')); // -1

修改示例

javascript

复制代码

fruits.splice(1, 1, 'pear'); // 替换'banana'为'pear' console.log(fruits); // 输出 ['apple', 'pear', 'cherry']

添加示例

javascript

复制代码

fruits.push('grape'); // 末尾添加 console.log(fruits); // 输出 ['apple', 'pear', 'cherry', 'grape'] fruits.unshift('mango'); // 开头添加 console.log(fruits); // 输出 ['mango', 'apple', 'pear', 'cherry', 'grape']

删除示例

javascript

复制代码

fruits.pop(); // 移除最后一个元素 console.log(fruits); // 输出 ['mango', 'apple', 'pear', 'cherry'] fruits.shift(); // 移除第一个元素 console.log(fruits); // 输出 ['apple', 'pear', 'cherry']

四、结语

掌握数组的增删改查操作是JavaScript编程的基础，也是进阶的关键。通过理解每种方法的用途和潜在陷阱，结合实际代码练习，你将能够更加高效地处理数组相关的任务。记住，良好的代码习惯，如在操作前进行边界检查，以及对方法返回值的正确理解，都是避免常见错误的有效策略。希望本文能帮助你在JavaScript数组操作的道路上更进一步

原文链接：https://juejin.cn/post/7379060209367105577