TypeScript 中数组扩展运算符的使用及避坑指南
在 TypeScript 中，数组扩展运算符是一个非常有用的功能，它可以让我们轻松地将一个数组展开成多个元素。但是，如果不注意使用方式，很容易遇到坑点。本文将详细介绍 TypeScript 中数组扩展运算符的使用方法，并提供避坑指南。
一、什么是数组扩展运算符
数组扩展运算符是三个点（...）符号，它可以将一个数组展开成多个元素。例如：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]
在上面的例子中，我们使用了数组扩展运算符将 arr1 和 arr2 展开成了多个元素，然后将它们合并成了一个新的数组 arr3。
二、数组扩展运算符的使用场景
- 合并数组
如上例所示，使用数组扩展运算符可以轻松将多个数组合并成一个新的数组。
- 复制数组
使用数组扩展运算符还可以复制一个数组。例如：
const arr1 = [1, 2, 3]; const arr2 = [...arr1]; console.log(arr2); // [1, 2, 3]
在上面的例子中，我们使用了数组扩展运算符将 arr1 展开成了多个元素，然后再用 [] 包裹起来，相当于复制了一个新的数组 arr2。
- 函数参数传递
在函数参数传递中，使用数组扩展运算符可以将一个数组展开成多个参数。例如：
function sum(a: number, b: number, c: number) {
return a + b + c;
}
const arr = [1, 2, 3];
console.log(sum(...arr)); // 6在上面的例子中，我们使用了数组扩展运算符将 arr 展开成了多个参数，然后传递给了 sum 函数。
三、数组扩展运算符的坑点
- 对象数组展开
在 TypeScript 中，如果数组中的元素是对象，展开运算符会将对象的属性也展开出来，这可能会导致一些问题。例如：
const arr1 = [{ id: 1 }, { id: 2 }];
const arr2 = [...arr1];
arr2[0].id = 3;
console.log(arr1); // [{ id: 3 }, { id: 2 }]
console.log(arr2); // [{ id: 3 }, { id: 2 }]在上面的例子中，我们使用了数组扩展运算符复制了一个数组 arr2，然后修改了 arr2 中的一个元素的 id 属性。但是，由于 arr1 和 arr2 中的对象是同一个对象的引用，因此 arr1 中的元素的 id 属性也被修改了。
为了避免这种问题，我们可以使用 Object.assign() 方法来复制对象，例如：
const arr1 = [{ id: 1 }, { id: 2 }];
const arr2 = arr1.map(item => Object.assign({}, item));
arr2[0].id = 3;
console.log(arr1); // [{ id: 1 }, { id: 2 }]
console.log(arr2); // [{ id: 3 }, { id: 2 }]在上面的例子中，我们使用 map() 方法遍历 arr1 中的每一个元素，然后使用 Object.assign() 方法复制一个新的对象，最后得到一个新的数组 arr2。
- 数组展开顺序
在使用数组扩展运算符合并多个数组时，数组展开的顺序可能会影响结果。例如：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2.reverse()]; console.log(arr3); // [1, 2, 3, 6, 5, 4]
在上面的例子中，我们使用了数组扩展运算符将 arr1 和 arr2 展开成了多个元素，然后将它们合并成了一个新的数组 arr3。但是，由于我们在展开 arr2 之前使用了 reverse() 方法，导致 arr2 中的元素顺序被颠倒了，最终得到的数组 arr3 中也出现了顺序问题。
为了避免这种问题，我们可以先将数组复制一份，然后再对复制的数组进行操作，例如：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...[...arr2].reverse()]; console.log(arr3); // [1, 2, 3, 6, 5, 4]
在上面的例子中，我们先使用数组扩展运算符将 arr2 复制了一份，然后再使用 reverse() 方法对复制的数组进行操作，最终得到了正确的结果。
四、总结
数组扩展运算符是 TypeScript 中非常有用的一个功能，它可以让我们轻松地将一个数组展开成多个元素，实现数组合并、复制和函数参数传递等操作。但是，在使用数组扩展运算符时，我们需要注意对象数组展开和数组展开顺序等坑点，避免出现意外的错误。希望本文的介绍和指南能够帮助读者更好地掌握 TypeScript 中数组扩展运算符的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6516959b95b1f8cacdee98fa