TS 与数组的骚操作，让你大开眼界！

2023-02-20 23:11:37

TS 中数组操作的艺术：不可错过的骚操作

TypeScript（TS）作为 JavaScript 的超集，自然也继承了 JavaScript 数组操作的方法。然而，TS 独有的特性和高级用法为数组操作带来了新的维度，开启了更多骚操作的可能性。

基本操作：pop() 和 push()

pop() 和 push() 是数组操作中最基本的方法。pop() 从数组末尾删除并返回最后一个元素，而 push() 则将一个或多个元素添加到数组末尾。

const arr = [1, 2, 3];
const lastElement = arr.pop(); // lastElement === 3
arr.push(4, 5); // arr === [1, 2, 4, 5]

巧妙操作：shift() 和 unshift()

shift() 和 unshift() 方法类似于 pop() 和 push()，但它们针对数组的开头。shift() 从数组开头删除并返回第一个元素，而 unshift() 则将一个或多个元素添加到数组开头。

const arr = [1, 2, 3];
const firstElement = arr.shift(); // firstElement === 1
arr.unshift(0); // arr === [0, 2, 3]

随心所欲：slice() 和 splice()

slice() 和 splice() 方法提供了截取和修改数组的强大工具。slice() 从数组中截取一段元素并返回一个新的数组，而 splice() 则可以删除、替换或添加元素。

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(2, 4); // newArr === [3, 4]
arr.splice(2, 1); // arr === [1, 2, 4, 5]
arr.splice(2, 0, 'a', 'b'); // arr === [1, 2, 'a', 'b', 4, 5]

轻松合并：concat()

concat() 方法可以将多个数组合并成一个新的数组。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = arr1.concat(arr2); // newArr === [1, 2, 3, 4, 5, 6]

函数式编程神器：map(), filter(), 和 reduce()

map(), filter(), 和 reduce() 方法是函数式编程中的利器。map() 将数组中的每个元素都传递给一个函数，并返回一个由函数返回值组成的新数组。filter() 从数组中过滤出满足某个条件的元素，并返回一个由这些元素组成的新数组。reduce() 将数组中的所有元素逐个累积成一个最终值。

const arr = [1, 2, 3, 4, 5];
const doubledArr = arr.map(num => num * 2); // doubledArr === [2, 4, 6, 8, 10]
const evenArr = arr.filter(num => num % 2 === 0); // evenArr === [2, 4]
const sum = arr.reduce((total, num) => total + num, 0); // sum === 15

Bonus：数组解构和扩展运算符

数组解构和扩展运算符是 ES6 中引入的两个非常有用的语法。数组解构可以让你轻松地从数组中提取元素，而扩展运算符可以让你轻松地将数组展开为单独的元素。

const arr = [1, 2, 3];
const [first, second, third] = arr; // first === 1, second === 2, third === 3
const newArr = [...arr, 4, 5]; // newArr === [1, 2, 3, 4, 5]