代码之家 › 专栏 › 技术社区 › Timmo

JS/ReactJS-分配新变量会更改原始变量

ecmascript-6 object reactjs arrays javascript

Timmo · 技术社区 · 6 年前

var themes = [
  {
    id: 1,
    name: 'Light',
  },
  {
    id: 2,
    name: 'Dark',
  }
];

我有个方法 React Component

  addTheme = (theme) => {
    const base = themes.find(t => t.name.toLowerCase() === theme.base.toLowerCase());
    var newTheme = base ? base : themes[0];
    console.log(newTheme);
    newTheme.id = themes[themes.length - 1].id + 1;
    newTheme.name = theme.name;
    themes.push(newTheme);
    console.log('themes:', themes);
  };

我得到的问题是 newTheme 变量到 base 似乎覆盖了数组中的基对象。

Midnight ,和 Dark

3 回复 | 直到 6 年前

Jordan Enev 6 年前

你应该复制一个主题对象,因为 find 返回对对象的引用。

你有两个选择- 浅的或复制对象。

一。浅拷贝

const newTheme = {...base ? base : themes[0]}

2。深拷贝 (如果没有函数属性):

JSON.parse(JSON.stringify(base ? base : themes[0]))

How do I correctly clone a JavaScript object? .

Dan Inactive 6 年前

这个 find() array方法不会返回主题的副本,而是返回对它的引用,因此您实际上正在更改原始主题。

UtkarshPramodGupta 6 年前

使用 Object.assign()

Object.assign({}, obj) 返回 obj 对象(请注意,不是深层克隆)。

addTheme = (theme) => {
    const base = themes.find(t => t.name.toLowerCase() === theme.base.toLowerCase());
    var newTheme = base ? Object.assign({},base) : Object.assign({},themes[0]);
    console.log(newTheme);
    newTheme.id = themes[themes.length - 1].id + 1;
    newTheme.name = theme.name;
    themes.push(newTheme);
    console.log('themes:', themes);
};

推荐文章

Udders · 使用另一个数组中的值按索引从数组中删除

2 年前

Matt · 获取数组长度并推入每个对象

2 年前

Rahmouni Rabii · 尝试访问数组中的对象时未定义

2 年前

Brian Patterson · Javascript自定义数组。原型方法日志“未定义”

2 年前

dapidmini · 未捕获的承诺嵌套异步函数承诺错误处理

2 年前

Arka Bhattacharjee · 如何在JavaScript中反转大写的字符串?[重复]

2 年前

Zeeps Wear · 如何按键对对象进行分组?

2 年前

Kevin Giraldo · 如何更改字符串或数字在JavaScript中转换类的方式?

2 年前

Rachel · 如何按ID从JSON对象数组中删除数组元素

2 年前

minsu123 · 如何解析react中的单个引用?

2 年前