Array的方法

2425字约8分钟

2024-11-29

数组Array 常用使用方法

在开发过程中处理数组Array会常常遇到，有很多方法我们只会粗略的使用，这里将详细讲解每个方法。

1.数组的增删方法

`Array.splice()` 删除或替换数组中的元素

通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。

// splice 方法参数依次如下：
// start 为开始位置，deleteCount 为删除的元素个数，item1, item2, ... 为要添加的元素
const arr = [1, 2, 3, 4, 5];
const result = arr.splice(1, 2, 6, 7);
console.log(result); // [2, 3]
console.log(arr); // [1, 6, 7, 4, 5]

`Array.pop()` 删除数组最后一个元素并返回该元素

删除数组的最后一个元素，并返回该元素的值。此方法更改数组的长度。

const arr = [1, 2, 3, 4, 5];
const result = arr.pop();
console.log(result); // 5
console.log(arr); // [1, 2, 3, 4]

`Array.unshift()` 删除数组第一个元素并返回该元素

从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

const arr = [1, 2, 3, 4, 5];
const result = arr.shift();
console.log(result); // 1
console.log(arr); // [2, 3, 4, 5]

`Array.push()` 向数组末尾添加一个或多个元素，并返回新数组的长度

将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

const arr = [1, 2, 3, 4, 5];
const result = arr.push(6);
console.log(result); // 6
console.log(arr); // [1, 2, 3, 4, 5, 6]

`Array.shift()` 向数组开头添加一个或多个元素，并返回新数组的长度

从数组的开头移除一个或多个元素，并返回被移除的元素。

const arr = [1, 2, 3, 4, 5];
const result = arr.unshift(0);
console.log(result); // 6
console.log(arr); // [0, 1, 2, 3, 4, 5]

2.数组的搜索查询方法

`Array.every()` 检查数组中的所有元素是否都符合指定条件

如果数组中的所有元素都满足条件，则返回 true，否则返回 false。

// thisArg 为 callback 函数中 this 的值
// Array.every(callback(item, index, array), thisArg)
// 简单数据类型
const arr = [1, 2, 3, 4, 5];
const result = arr.every((item) => item > 0);
console.log(result); // true
// 复杂数据类型
const arr2 = [
  { name: "张三", age: 18 },
  { name: "李四", age: 20 },
  { name: "王五", age: 22 },
];
const result2 = arr2.every((item) => item.age > 18);
console.log(result2); // false

`Array.find()` 查找数组中符合条件的第一个元素

返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

// thisArg 为 callback 函数中 this 的值
// Array.find(callback(item, index, array), thisArg)
// 简单数据类型
const arr = [1, 2, 3, 4, 5];
const result = arr.find((item) => item > 2);
console.log(result); // 3
// 复杂数据类型
const arr2 = [
  { name: "张三", age: 18 },
  { name: "李四", age: 20 },
  { name: "王五", age: 22 },
];
const result2 = arr2.find((item) => item.age > 18);
console.log(result2); // { name: '李四', age: 20 }

`Array.findIndex()` 查找数组中符合条件的第一个元素的索引

返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。

// thisArg 为 callback 函数中 this 的值
// Array.findIndex(callback(item, index, array), thisArg)
// 简单数据类型
const arr = [1, 2, 3, 4, 5];
const result = arr.findIndex((item) => item > 2);
console.log(result); // 1
// 复杂数据类型
const arr2 = [
  { name: "张三", age: 18 },
  { name: "李四", age: 20 },
  { name: "王五", age: 22 },
];
const result2 = arr2.findIndex((item) => item.age > 18);
console.log(result2); // 0

`Array.includes()` 判断数组是否包含某个元素

判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。该方法比较适合简单数据类型。复杂数据类型因为本身是引用类型，所以比较的是引用地址，而不是内容，可能不太适合。当然也可以将复杂数据类型转换为简单数据类型，再进行比较。比如toString()、JSON.stringify()等。

// valueToFind 为需要查找的元素，fromIndex 为开始查找的位置，默认为 0
// Array.includes(valueToFind, fromIndex)
const arr = [1, 2, 3, 4, 5];
const result = arr.includes(3);
console.log(result); // true
// 复杂数据类型
const arr2 = [
  { name: "张三", age: 18 },
  { name: "李四", age: 20 },
  { name: "王五", age: 22 },
];
const result2 = arr2.includes({ name: "李四", age: 20 });
console.log(result2); // false

`Array.indexOf()` 查找数组中某个元素的索引

返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。该方法也不适用复杂数据类型，原理同Array.includes一致。

// valueToFind 为需要查找的元素，fromIndex 为开始查找的位置，默认为 0
// Array.indexOf(valueToFind, fromIndex)
const arr = [1, 2, 3, 4, 5];
const result = arr.indexOf(3);
console.log(result); // 2
// 复杂数据类型
const arr2 = [
  { name: "张三", age: 18 },
  { name: "李四", age: 20 },
  { name: "王五", age: 22 },
];
const result2 = arr2.indexOf({ name: "李四", age: 20 });
console.log(result2); // -1

`Array.some()` 判断数组中是否有满足条件的元素

测试数组中的某些元素是否通过了由提供的函数实现的测试。只要有一个元素满足条件，就返回true，否则返回false。

//  callback 为回调函数, item 为当前元素，index 为当前索引，array 为原数组
const arr = [1, 2, 3, 4, 5];
const result = arr.some((item) => item > 3);
console.log(result); // true

3.数组循环方法

`Array.map()` 循环数组并返回新数组

创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

// callback 为回调函数，thisArg 为 callback 函数中 this 的值
// Array.map(callback(item, index, array), thisArg)
const arr = [1, 2, 3, 4, 5];
const result = arr.map((item, index) => item * 2);
console.log(result); // [2, 4, 6, 8, 10]
// 复杂数据
const arr2 = [
  { name: "张三", age: 18 },
  { name: "李四", age: 20 },
  { name: "王五", age: 22 },
];
const result2 = arr2.map((item, index) => {
  item.age += 1;
  return item;
});
console.log(result2); // [{ name: '张三', age: 19 }, { name: '李四', age: 21 }, { name: '王五', age: 23 }]

`Array.forEach()` 遍历数组

对数组的每个元素执行一次提供的函数。

// callback 为回调函数，thisArg 为 callback 函数中 this 的值
// Array.forEach(callback(item, index, array), thisArg)
const arr = [1, 2, 3, 4, 5];
arr.forEach((item, index) => {
  console.log(item, index);
});

`Array.filter()` 过滤数组,创建返回符合条件的新数组

创建一个新数组，其中包含通过指定函数实现的测试的所有元素。

// thisArg 为 callback 函数中 this 的值
// Array.filter(callback(item, index, array), thisArg)
// 简单数据类型
const arr = [1, 2, 3, 4, 5];
const result = arr.filter((item) => item > 2);
console.log(result); // [3, 4, 5]
// 复杂数据类型
const arr2 = [
  { name: "张三", age: 18 },
  { name: "李四", age: 20 },
  { name: "王五", age: 22 },
];
const result2 = arr2.filter((item) => item.age > 18);
console.log(result2); // [{ name: '李四', age: 20 }, { name: '王五', age: 22 }]

4.数组的其他操作

`Array.concat()` 合并数组

合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

// Array.concat(arr1,...,arrN)
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arr4 = arr1.concat(arr2, arr3);
console.log(arr4); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

`Array.flat()` 扁平化数组

返回一个新数组，其中所有子数组元素连接到一起。

// depth 指定要提取嵌套数组的结构深度，默认为 1
// Array.flat(depth)
const arr = [1, 2, [3, 4, [5, 6]]];
const result = arr.flat(2);
console.log(result); // [1, 2, 3, 4, 5, 6]

`Array.flatMap()` 扁平化数组并映射

先使用映射函数映射每个元素，然后将结果压缩成一个新数组。

// callback 为映射函数，thisArg 为 callback 函数中 this 的值
// Array.flatMap(callback(item, index, array), thisArg)
const arr = [1, [2, 3], [4, 5]];
const result = arr.flatMap((item) => item * 2);
console.log(result); // [2, 4, 6, 8, 10]

`Array.join()` 将数组转换为字符串

将一个数组的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个元素，那么将返回该元素而不使用分隔符。

// separator 为字符串或字符，用于分隔数组的每个元素，默认为 ","
// Array.join(separator)
const arr = [1, 2, 3, 4, 5];
const result = arr.join("-");
console.log(result); // "1-2-3-4-5"

`Array.keys()` 返回数组的键名

返回一个包含数组中每个索引键的Array Iterator对象。

const arr = [1, 2, 3, 4, 5];
const result = arr.keys();
console.log(result); // Array Iterator {}

`Array.reduce()` 循环数组并返回计算结果

对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

// callback 为回调函数，accumulator 为累加器，currentValue 为当前值，currentIndex 为当前索引，array 为原数组
// initialValue 为初始值
// Array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)
const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(result); // 15
// 复杂数据类型
const arr2 = [
  { name: "张三", age: 18 },
  { name: "李四", age: 20 },
  { name: "王五", age: 22 },
];
const result2 = arr2.reduce((accumulator, currentValue) => accumulator + currentValue.age, 0);
console.log(result2); // 60

`Array.reverse()` 反转数组

反转数组的顺序。

const arr = [1, 2, 3, 4, 5];
const result = arr.reverse();
console.log(result); // [5, 4, 3, 2, 1]

`Array.slice()` 截取数组

从一个数组中截取一部分元素，并返回一个新的数组。

// start 为开始位置，end 为结束位置
// Array.slice(start, end)
const arr = [1, 2, 3, 4, 5];
const result = arr.slice(1, 3);
console.log(result); // [2, 3]

`Array.sort()` 排序数组

对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。

//  callback 为回调函数, item1 为当前元素，item2 为下一个元素
const arr = [1, 2, 3, 4, 5];
const result = arr.sort((item1, item2) => item1 - item2);
console.log(result); // [1, 2, 3, 4, 5]
//  复杂类型
const arr2 = [
  { name: "张三", age: 18 },
  { name: "李四", age: 20 },
  { name: "王五", age: 22 },
];
const result2 = arr2.sort((item1, item2) => item1.age - item2.age);
console.log(result2); // [{ name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 }]