当前位置:  开发笔记 > 编程语言 > 正文

不可变地删除对象中的属性

如何解决《不可变地删除对象中的属性》经验,为你挑选了9个好方法。

我正在使用Redux.在我的reducer中,我试图从像这样的对象中删除一个属性:

const state = {
    a: '1',
    b: '2',
    c: {
       x: '42',
       y: '43'
    },
}

我希望有这样的东西,而不必改变原始状态:

const newState = {
    a: '1',
    b: '2',
    c: {
       x: '42',
    },
}

我试过了:

let newState = Object.assign({}, state);
delete newState.c.y

但由于某些原因,它会删除两个州的财产.

可以帮我这么做吗?



1> madebydavid..:

如何使用解构赋值语法?

const original = {
  foo: 'bar',
  stack: 'overflow',
};

// If the name of the property to remove is constant
const { stack, ...withoutFirst } = original;
console.log(withoutFirst); // Will be { "foo": "bar" }

// If the name of the property to remove is from a variable
const key = 'stack'
const { [key]: value, ...withoutSecond } = original;
console.log(withoutSecond); // Will be { "foo": "bar" }

// To do a deep removal with property names from variables
const deep = {
  foo: 'bar',
  c: {
   x: 1,
   y: 2
  }
};

const parentKey = 'c';
const childKey = 'y';
// Remove the 'c' element from original
const { [parentKey]: parentValue, ...noChild } = deep;
// Remove the 'y' from the 'c' element
const { [childKey]: removedValue, ...childWithout } = parentValue;
// Merge back together
const withoutThird = { ...noChild, [parentKey]: childWithout };
console.log(withoutThird); // Will be { "foo": "bar", "c": { "x": 1 } }


2> David L. Wal..:

我觉得ES5阵列的方法,如filter,mapreduce有用的,因为他们总是返回新的数组或对象.在这种情况下,我将使用Object.keys迭代对象,并将Array#reduce其转回对象.

return Object.assign({}, state, {
    c: Object.keys(state.c).reduce((result, key) => {
        if (key !== 'y') {
            result[key] = state.c[key];
        }
        return result;
    }, {})
});


ES6相当于获取了一个`myObject`的副本,其中删除了键'myKey`:`Object.keys(myObject).reduce((acc,cur)=> cur === myKey?acc:{... acc,[cur ]:myObject [cur]},{})`

3> 小智..:

您可以使用_.omit(object, [paths])从lodash库

path可以嵌套,例如: _.omit(object, ['key1.key2.key3'])


不幸的是,`_.omit`无法删除深层属性(OP要求的是什么).为此目的,有[`omit-deep-lodash`](https://www.npmjs.com/package/omit-deep-lodash)模块.

4> 小智..:

只需使用ES6对象解构功能

const state = {
    c: {
       x: '42',
       y: '43'
    },
}

const { c: { y, ...c } } = state // generates a new 'c' without 'y'

console.log({...state, c }) // put the new c on a new state


5> Aᴍɪʀ..:

那是因为你正在将值复制state.c到另一个对象.该值是指向另一个javascript对象的指针.因此,这两个指针都指向同一个对象.

试试这个:

let newState = Object.assign({}, state);
console.log(newState == state); // false
console.log(newState.c == state.c); // true
newState.c = Object.assign({}, state.c);
console.log(newState.c == state.c); // now it is false
delete newState.c.y;

您还可以对该对象执行深层复制.看到这个问题,你会发现什么是最适合你的.


这是一个很好的答案!`state.c`是一个引用,并且正在复制引用.Redux需要一个规范化的状态形状,这意味着在嵌套状态时使用id而不是引用.查看redux文档:http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html

6> SebK..:

这个怎么样:

function removeByKey (myObj, deleteKey) {
  return Object.keys(myObj)
    .filter(key => key !== deleteKey)
    .reduce((result, current) => {
      result[current] = myObj[current];
      return result;
  }, {});
}

它过滤应删除的密钥,然后从剩余的密钥和初始对象构建一个新对象.想法是从Tyler McGinnes真棒反应计划中偷走的.

JSBin



7> Dominykas Mo..:
function dissoc(key, obj) {
  let copy = Object.assign({}, obj)
  delete copy[key]
  return copy
}

此外,如果要寻找功能性编程工具包,请查看Ramda.



8> Javier P..:

在您的情况下,您可以使用Immutability助手来取消设置属性:

import update from 'immutability-helper';

const updatedState = update(state, {
  c: {
    $unset: ['y']
  }
});    



9> quotesBro..:

使用Immutable.js很容易:

const newState = state.deleteIn(['c', 'y']);

deleteIn()的描述

推荐阅读
重庆制造漫画社
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有