如何让sunset函数按预期实现数组复制并修改首元素功能？

嘿，我来帮你梳理下这个问题～你想要实现一个sunset函数，目标是复制原数组sunsetColors，修改副本的第一个元素为"blue"后返回，但当前的写法没法达到预期，问题出在这两点：

问题1：splice()会直接修改原数组 #

sunsetColors.splice(0, 1, 'blue')这个操作会直接改动原数组，而不是你想要的先复制再修改副本，这样原数组的第一个元素也会变成"blue"，破坏了原始数据。

问题2：splice()的返回值不是你要的数组 #

splice()方法的返回值是被删除的元素组成的数组，在这里就是["brown"]，而不是修改后的完整数组，所以你的函数最终返回的是这个被删掉的元素，不是目标数组。

正确的实现方式 #

下面给你几种常用的正确写法，都能实现“复制数组→修改副本→返回副本”的需求，而且不会改动原数组：

方法1：扩展运算符（最简洁的现代写法） #

var sunsetColors = ["brown", "purple", "pink", "red", "orange", "yellow"];

const sunset = () => {
  // 用扩展运算符复制原数组，生成独立副本
  const copiedArr = [...sunsetColors];
  // 修改副本的第一个元素
  copiedArr[0] = "blue";
  // 返回修改后的副本
  return copiedArr;
};

方法2：slice()方法 #

slice()不传参数时会返回原数组的浅拷贝，不会影响原数组：

var sunsetColors = ["brown", "purple", "pink", "red", "orange", "yellow"];

const sunset = () => {
  const copiedArr = sunsetColors.slice();
  copiedArr[0] = "blue";
  return copiedArr;
};

方法3：Array.from()方法 #

适合需要对复制的元素做额外处理的场景，用来单纯复制也完全可行：

var sunsetColors = ["brown", "purple", "pink", "red", "orange", "yellow"];

const sunset = () => {
  const copiedArr = Array.from(sunsetColors);
  copiedArr[0] = "blue";
  return copiedArr;
};

调用任意一种写法的sunset()函数，都会返回["blue", "purple", "pink", "red", "orange", "yellow"]，同时原数组sunsetColors会保持原样，完全符合你的需求～

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