JS 数组详细操作方法及解析合集

什么是数组？

在JavaScript中，数组是一种存储多个值的有序集合。数组中的每个值称为一个元素，每个元素都有一个相应的数字键（称为索引）来标识其在数组中的位置。

创建数组

在JavaScript中，有多种方式来创建数组。下面是一些示例：

• 使用数组字面量

数组字面量是用方括号 [] 包围并由逗号分隔构成的值序列，如下所示：

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

• 使用 Array 构造函数

可以使用 new Array() 或者简写的 [] 来构造一个数组，如下所示：

let arr1 = new Array();
let arr2 = [];

你还可以向构造函数中传递一个表示数组长度的整数，如下所示：

let arr3 = new Array(5); //创建一个长度为 5 的数组，但不包含任何元素
let arr4 = ['foo', 'bar', 'baz']; //创建一个包含三个元素的数组

访问数组元素

可以使用方括号和索引来访问数组中的元素，也可以使用点号和属性名来访问数组中的元素。如下所示：

let arr = [1, 2, 3];
console.log(arr[1]); //输出2

let person = {
  name: 'John',
  age: 30,
  hobbies: ['reading', 'traveling']
};
console.log(person.hobbies[0]); //输出"reading"

修改和添加元素

可以使用方括号和索引来修改和添加数组中的元素，如下所示：

let arr = [1, 2, 3];
arr[1] = 4;
console.log(arr); //输出 [1, 4, 3]

arr[3] = 5;
console.log(arr); //输出 [1, 4, 3, 5]

删除元素

可以使用 delete 关键字来删除数组中的元素。删除后，数组的长度不会改变，但是删除的元素会变成 undefined。如下所示：

let arr = [1, 2, 3];
delete arr[1];
console.log(arr); //输出 [1, undefined, 3]

数组迭代

可以使用 for 循环、forEach 方法、map 方法等多种方式来迭代数组中的元素。下面分别给出示例：

• for 循环

let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

• forEach 方法

let arr = [1, 2, 3];
arr.forEach(function(item) {
  console.log(item);
});

//或者使用箭头函数
arr.forEach(item => console.log(item));

• map 方法

let arr = [1, 2, 3];
let newArr = arr.map(function(item) {
  return item * 2;
});

console.log(newArr); //输出 [2, 4, 6]

数组排序

可以使用 sort 方法来对数组中的元素进行排序，如下所示：

let arr = [3, 1, 4, 2];
arr.sort();
console.log(arr); //输出 [1, 2, 3, 4]

sort 方法还可以接受一个比较函数作为参数，用于自定义排序规则。如下所示：

let arr = [
  {name: 'John', age: 30},
  {name: 'Mary', age: 25},
  {name: 'Bob', age: 35}
];
arr.sort(function(a, b) {
  return a.age - b.age;
});

console.log(arr);

数组过滤

可以使用 filter 方法来过滤数组中的元素，如下所示：

let arr = [1, 2, 3, 4];
let newArr = arr.filter(function(item) {
  return item % 2 == 0;
});

console.log(newArr); //输出 [2, 4]

数组查找

可以使用 indexOf、lastIndexOf、find、findIndex 等方法来查找数组中的元素。下面分别给出示例：

• indexOf 和 lastIndexOf

let arr = ['foo', 'bar', 'baz', 'foo'];
console.log(arr.indexOf('foo')); //输出0
console.log(arr.lastIndexOf('foo')); //输出3

• find 和 findIndex

let arr = [
  {name: 'John', age: 30},
  {name: 'Mary', age: 25},
  {name: 'Bob', age: 35}
];
let result = arr.find(function(item) {
  return item.age == 30;
});

console.log(result); //输出 {name: "John", age: 30}

let index = arr.findIndex(function(item) {
  return item.age == 30;
});

console.log(index); //输出0

数组合并和分割

可以使用 concat 方法来合并两个或多个数组，使用 split 方法来将字符串分割成数组。如下所示：

• concat 方法

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = arr1.concat(arr2);
console.log(newArr); //输出 [1, 2, 3, 4, 5, 6]

• split 方法

let str = 'This is a sentence.';
let arr = str.split(' ');
console.log(arr); //输出 ["This", "is", "a", "sentence."]

数组扁平化

可以使用 flat 方法来扁平化嵌套数组，如下所示：

let arr = [1, [2, [3, 4]]];
let newArr = arr.flat(2);
console.log(newArr); //输出 [1, 2, 3, 4]

至此，我们已经完成了 JavaScript 数组的基本操作。当然，JavaScript 数组还有很多高级操作，需要进一步深入学习。