如何使用JS展开运算符实现不修改原数组的appendCat函数

核心要求（来自测试用例） #

• 函数接收name（猫咪名称）作为入参
• 返回值是按顺序包含原cats数组所有元素、末尾追加传入name的新数组
• 原cats数组不能被任何操作修改

基于展开运算符的实现代码 #

先在index.js里定义测试要求的初始cats数组，再编写函数逻辑：

// 初始数组，和测试用例的初始值完全一致
const cats = ["Milo", "Otis", "Garfield"];

function appendCat(name) {
  // 展开运算符...会把原数组的元素逐个展开到新数组中，不会修改原数组
  return [...cats, name];
}

实现逻辑说明 #

[...cats, name]的执行过程完全匹配测试要求：

1. 生成一个全新的独立数组，和原数组没有引用关联
2. 把原cats数组的三个元素按原有顺序拷贝到新数组中
3. 将传入的name参数作为最后一个元素追加到新数组末尾
4. 返回构造完成的新数组，全程没有对原cats数组做任何写操作

避坑提醒 #

以下写法都会导致测试不通过：

• 直接调用cats.push(name)：push方法会直接修改原数组
• 先做引用赋值再操作：比如const newArr = cats; newArr.push(name)，数组是引用类型，直接赋值只是拷贝内存地址，修改newArr本质还是修改原数组
• 用splice等自带修改原数组特性的方法拼接元素

内容的提问来源于stack exchange，提问作者LA Fnd