时间戳

首页 > 解决方案 > 是否有扩展运算符更改值的功能？

javascript - 是否有扩展运算符更改值的功能？

问题描述

let abc = [
  { name: "a" },
  { name: "b"}
];

const editName = (oldName, name, arr) =>
  arr.map(item => {
    if (item.name === oldName) {
      return {
        ...item,
        name
      }
    } else {
      return item;
    }
  });

let updateName = editName("a", "c", abc)
console.log(updateName[0])

我目前正在学习通过“地图”来改变价值。但是，我不知道为什么值被“if”部分中的扩展操作替换

剂量扩散算子有那个功能吗？

...item是name: "a"，不是吗？

标签： javascript

解决方案

传播有帮助：

  • 简明扼要地创建一个具有 的所有属性的新对象item，外加一个name属性
  • 不改变原来的item

如果您不使用 spread （或等价物），而是使用类似 的东西item.name = name;，则原始数组中的对象将发生变异，这可能是不可取的：

// original code
let abc = [
  { name: "a" },
  { name: "b"}
];

const editName = (oldName, name, arr) =>
  arr.map(item => {
    if (item.name === oldName) {
      return {
        ...item,
        name
      }
    } else {
      return item;
    }
  });

let updateName = editName("a", "c", abc)
console.log(updateName[0])
console.log(abc[0]);

// bad, mutation code without spread syntax
let abc = [
  { name: "a" },
  { name: "b"}
];

const editName = (oldName, name, arr) =>
  arr.map(item => {
    if (item.name === oldName) {
      item.name = name;
    }
    return item;
  });

let updateName = editName("a", "c", abc)
console.log(updateName[0])
console.log(abc[0]);

上面，错误的代码使对象发生了变异，正如您通过abc[0]记录变异的名称而不是abc[0].

如果你的意思是为什么它不是

  return {
    item,
    name
  }

这是因为这会导致像这样的对象

{
  item: {
    name: 'a',
  },
  name: 'c'
}

有一个item属性（这可能是不需要的）。Using...将扩展对象的内容与对象字面量的其余部分结合起来。

推荐阅读