浅谈JavaScript中数组的增删改查

应该先给出一个简要的结构：

目录

• 前言
• JavaScript中数组的增删改查
• 数组创建
• 数组增加元素
• 数组删除元素
• 数组修改元素
• 数组查询元素
• 数组循环元素
• 总结

前言

JavaScript中数组的增删改查是编程中常见的操作之一，掌握这些操作可以让我们更加灵活地处理数据。

JavaScript中数组的增删改查

JavaScript中，数组是一种数据结构，用来存储一系列有序的数据，在 JavaScript中，数组可以存储任何类型的数据，包括数字、字符串、对象等等。

数组创建

常用的创建新数组的方法，使用中括号包裹数组元素：

let arr = [1, 2, 3, 4, 5];

使用构造函数方式创建数组：

let arr = new Array(1, 2, 3, 4, 5);

数组也可以是多维的，如下：

let arr2D = [
  [1, 2],
  [3, 4]
];

数组增加元素

JavaScript中，提供了两种方法向数组末尾增加元素：push和unshift。

• push向数组末尾添加新元素，并返回数组的新长度。
• unshift向数组头部添加新元素，并返回数组的新长度。

如下：

let arr = [1, 2, 3, 4, 5];

// 在数组末尾添加元素
arr.push(6);

// 在数组头部添加元素
arr.unshift(0);

// 打印数组
console.log(arr); // [0, 1, 2, 3, 4, 5, 6]

数组删除元素

JavaScript中，提供了两种方法删除数组中的元素：pop和shift。

• pop从末尾弹出一个元素，并返回被删除的元素。
• shift从头部弹出一个元素，并返回被删除的元素。

如下：

let arr = [0, 1, 2, 3, 4, 5, 6];

// 从数组末尾弹出一个元素
let lastVal = arr.pop();

// 从数组头部弹出一个元素
let firstVal = arr.shift();

// 打印数组以及被删除的元素
console.log(arr); // [1, 2, 3, 4, 5]
console.log(lastVal); // 6
console.log(firstVal); // 0

数组修改元素

JavaScript中，可以利用下标索引直接修改数组元素的值。

如下：

let arr = [1, 2, 3, 4, 5];

// 修改数组指定位置元素的值
arr[0] = 0;

// 打印数组
console.log(arr); // [0, 2, 3, 4, 5]

数组查询元素

JavaScript中，可以利用下标索引来查找数组元素。

如下：

let arr = [1, 2, 3, 4, 5];

// 获取数组指定位置的元素
let val = arr[0];

// 打印数组指定位置的元素
console.log(val); // 1

也可以使用数组提供的方法indexOf来查找元素的索引：

let arr = [1, 2, 3, 4, 5];

// 查找数组中指定元素的索引
let index = arr.indexOf(4);

// 打印数组中指定元素的索引
console.log(index); // 3

数组循环元素

JavaScript中，可以使用常见的for循环、forEach、map、filter、reduce方法来循环数组元素。

如下：

let arr = [1, 2, 3, 4, 5];

// for循环循环数组元素
for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// forEach循环数组元素
arr.forEach(function(val) {
  console.log(val);
});

// map循环数组元素
arr.map(function(val) {
  console.log(val);
});

// filter循环数组元素
arr.filter(function(val) {
  console.log(val);
});

// reduce循环数组元素
arr.reduce(function(acc, val) {
  console.log(val);
  return acc;
}, null);

示例

下面给出两个调用上述方法的示例说明。

示例1：给定数组arr和要插入的值val，如何在数组末尾增加一个元素并删除头部元素？

let arr = [1, 2, 3, 4, 5];
let val = 6;

arr.push(val);
arr.shift();

console.log(arr); // [2, 3, 4, 5, 6]

示例2：给定数组arr和要查找的值val，如何返回该值在数组中的索引值？

let arr = [1, 2, 3, 4, 5];
let val = 4;

let index = arr.indexOf(val);

console.log(index); // 3

总结

通过上述内容可以知道，JavaScript中数组的增删改查操作都是非常简单的，但是这些操作能够给我们的编程工作带来很大的便捷。熟练掌握数组的增删改查能够使我们更加高效地完成开发任务。