TypeScript中数组的常用方法

记得开心一点嘛

于 2025-01-14 15:21:22 发布

阅读量690

点赞数 17

分类专栏： JavaWeb前端开发技术栈文章标签： vue.js 前端 typescript

本文链接：https://blog.csdn.net/2302_79840586/article/details/145139700

版权

JavaWeb前端开发技术栈专栏收录该内容

12 篇文章

订阅专栏

1.直接使用 `push` 添加数组：

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

let numbers: number[] = [1, 2, 3];
numbers.push(4);  // 添加单个元素
numbers.push(5, 6);  // 添加多个元素
console.log(numbers);  // 输出: [1, 2, 3, 4, 5, 6]

特殊：

guessList.value.push(res.result.items);

这会把 res.result.items 数组作为一个单独的元素添加到 guessList.value 中。即，guessList.value 的末尾会增加一个新的数组，而不是将数组中的元素逐个添加进去。

假设 guessList.value 最开始是 [1, 2]，res.result.items 是 [3, 4]，这样操作后：

guessList.value.push(res.result.items);
console.log(guessList.value);  // 输出：[1, 2, [3, 4]]

注意到 guessList.value 的末尾被添加了 [3, 4]，而不是将 3 和 4 分别添加进去。

2.使用扩展运算符 `...：`

如果我们希望将 res.result.items 中的每个元素分别添加到 guessList.value 数组中，可以使用 扩展运算符 (...) 来展开数组。这样每个元素会被展开并作为单独的元素添加到目标数组中。

guessList.value.push(...res.result.items);

这时，res.result.items 数组中的每个元素会被逐个添加到 guessList.value 数组的末尾，而不是作为一个整体数组添加进去。

假设 guessList.value 最开始是 [1, 2]，res.result.items 是 [3, 4]，这样操作后：

guessList.value.push(...res.result.items);
console.log(guessList.value);  // 输出：[1, 2, 3, 4]

3.pop()：

用途：删除并返回数组的最后一个元素，改变原始数组的长度。

let numbers: number[] = [1, 2, 3];
let last = numbers.pop();  // 删除并返回数组最后一个元素
console.log(last);  // 输出: 3
console.log(numbers);  // 输出: [1, 2]

4.`shift()：`

用途：删除并返回数组的第一个元素，改变原始数组的长度。

let numbers: number[] = [1, 2, 3];
let first = numbers.shift();  // 删除并返回数组第一个元素
console.log(first);  // 输出: 1
console.log(numbers);  // 输出: [2, 3]

5.unshift()：

用途：将一个或多个元素添加到数组的开头，返回数组的新长度。

let numbers: number[] = [2, 3];
numbers.unshift(1);  // 添加单个元素
numbers.unshift(-1, 0);  // 添加多个元素
console.log(numbers);  // 输出: [-1, 0, 1, 2, 3]

6.concat()：

用途：合并两个或多个数组，返回一个新数组，原数组不变。

let arr1: number[] = [1, 2];
let arr2: number[] = [3, 4];
let result = arr1.concat(arr2);
console.log(result);  // 输出: [1, 2, 3, 4]
console.log(arr1);  // 输出: [1, 2]

7.`join()：`

用途：将数组中的所有元素转换为一个字符串，元素之间用指定的分隔符连接。

let arr: string[] = ['a', 'b', 'c'];
let result = arr.join('-');
console.log(result);  // 输出: 'a-b-c'

8.`slice()：`

用途：返回数组的一部分，原数组不变。

let arr: number[] = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 4);  // 从索引 1 到索引 4（不包括 4）
console.log(newArr);  // 输出: [2, 3, 4]
console.log(arr);  // 输出: [1, 2, 3, 4, 5]

9.`splice()：`

用途：改变原数组，删除、替换或添加元素。

let arr: number[] = [1, 2, 3, 4, 5];
// 删除 2 个元素，从索引 1 开始
let removed = arr.splice(1, 2);
console.log(arr);  // 输出: [1, 4, 5]
console.log(removed);  // 输出: [2, 3]

// 添加元素
arr.splice(1, 0, 2, 3);
console.log(arr);  // 输出: [1, 2, 3, 4, 5]

10.`forEach()：`

用途：对数组中的每个元素执行一个函数，不返回值。

let arr: number[] = [1, 2, 3];
arr.forEach((item, index) => {
  console.log(`index: ${index}, value: ${item}`);
});
// 输出:
// index: 0, value: 1
// index: 1, value: 2
// index: 2, value: 3

11.`map()：`

用途：创建一个新数组，数组中的元素是通过调用提供的函数对原数组的每个元素进行处理后的结果。

let arr: number[] = [1, 2, 3];
let newArr = arr.map(item => item * 2);
console.log(newArr);  // 输出: [2, 4, 6]

12.`filter()：`

用途：创建一个新数组，包含所有通过提供的函数测试的元素。

let arr: number[] = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(item => item % 2 === 0);
console.log(evenNumbers);  // 输出: [2, 4]

13.`reduce()：`

用途：对数组中的所有元素进行累加（或累积），返回一个最终的值。

let arr: number[] = [1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);  // 输出: 10

14.`reduceRight()：`

用途：与 reduce() 类似，但它从数组的末尾向前进行累加。

let arr: number[] = [1, 2, 3, 4];
let sum = arr.reduceRight((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);  // 输出: 10

15.`find()：`

用途：返回数组中满足条件的第一个元素。如果没有找到，返回 undefined。

let arr: number[] = [1, 2, 3, 4];
let found = arr.find(item => item > 2);
console.log(found);  // 输出: 3

16.`findIndex()：`

用途：返回数组中满足条件的第一个元素的索引。如果没有找到，返回 -1。

let arr: number[] = [1, 2, 3, 4];
let index = arr.findIndex(item => item > 2);
console.log(index);  // 输出: 2

17.`some()：`

用途：检查数组中是否至少有一个元素满足指定的条件，返回 true 或 false。

let arr: number[] = [1, 2, 3];
let hasEven = arr.some(item => item % 2 === 0);
console.log(hasEven);  // 输出: true

18.`every()：`

用途：检查数组中是否所有元素都满足指定的条件，返回 true 或 false。

let arr: number[] = [2, 4, 6];
let allEven = arr.every(item => item % 2 === 0);
console.log(allEven);  // 输出: true

19.`sort()：`

用途：对数组的元素进行排序。默认按字典顺序排序，可以传入比较函数来实现自定义排序。

let arr: number[] = [4, 1, 3, 2];
arr.sort((a, b) => a - b);  // 数字升序
console.log(arr);  // 输出: [1, 2, 3, 4]

20.`reverse()：`

用途：反转数组的顺序。

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

21.`includes()：`

用途：检查数组中是否包含某个元素，返回 true 或 false。

let arr: number[] = [1, 2, 3];
let hasTwo = arr.includes(2);
console.log(hasTwo);  // 输出: true