Question

我有一个看起来像这样的对象：

let data = {
      toDate: this.state.toDate,
      fromDate: this.state.fromDate,
      filteredEntityText: null,
      options: "negative",
      searchTerm: null
    };

从上面的对象中，我想生成一个仅包含键值对（其值不为空）的新对象。

预期结果应如下所示：

let newData = {
    toDate: this.state.toDate,
    fromDate: this.state.fromDate,
    options: "negative"
};

在这里，我使用了data对象的静态示例，以后空值可能会有所不同。基本上，我想要一个新的对象，其键值对的值不是null。谁能帮助我解决问题？

Answer 1

您可以使用for...in循环

let data = {
  toDate: 'toDate',
  fromDate: 'fromDate',
  filteredEntityText: null,
  options: "negative",
  searchTerm: null
};
let newData = {};
for(var k in data){
  if(data[k] != null)
    newData[k] = data[k];
}
console.log(newData);

Answer 2

您可以尝试过滤Object.entries()

const data = {
  toDate: {},
  fromDate: {},
  filteredEntityText: null,
  options: 'negative',
  searchTerm: null
};

const newData = {};
Object.entries(data)
  .filter(([, value]) => value !== null)
  .forEach(([key, value]) => (newData[key] = value));

console.log(newData);

Answer 3

您可以使用reduce获得预期的结果：

let data = {
  toDate: "abc",
  fromDate: "cde",
  filteredEntityText: null,
  options: "negative",
  searchTerm: null
};

var newObj = Object.keys(data).reduce((acc, el) => {
  // removing all the key-value pairs where value=null
  if(data[el] !== null)
    acc[el] = data[el];
  return acc;
}, {})

console.log('newObj', newObj);

Answer 4

尝试

let data = {
      toDate: this.state.toDate,
      fromDate: this.state.fromDate,
      filteredEntityText: null,
      options: "negative",
      searchTerm: null
    };

  let giveOriginal = (data){
     let originalHolder = {}
     for(let key in data){
        if(data[key]){
           originalHolder[key] = data[key]
         }
      }
    return originalHolder;
  }

 //call giveOriginal 
 giveOriginal(data)

Answer 5

所有这些都将帮助您删除嵌套的空项目。使用一些ES6 / ES2015：在下面的示例中，将直接修改数据对象，或者如果您要创建具有删除的null的重复对象，则可以调用下面给出的函数，它将返回新对象。

如果您不想创建额外的功能并删除“内联”项。

Object.keys(data).forEach(k => (!data[k] && data[k] !== undefined) && delete data[k]);

相同，作为函数编写。

const removeEmpty = (data) => {
  Object.keys(data).forEach((k) => (!data[k] && data[k] !== undefined) && delete 
       data[k]);
  return data;
};

此函数还使用递归从嵌套对象中删除项目：

const removeEmpty = (data) => {
  Object.keys(data).forEach(k =>
    (data[k] && typeof data[k] === 'object') && removeEmpty(data[k]) ||
    (!data[k] && data[k] !== undefined) && delete data[k]
  );
  return data;
};

与以前的功能相同，但具有ES7 / 2016 Object.entries：

const removeEmpty = data => {
  Object.keys(data).forEach(
    k => !data[k] && data[k] !== undefined && delete data[k]
  );
  return data;
};

与第三个示例相同，但在纯ES5中：

function removeEmpty(data) {
  Object.keys(data).forEach(function(key) {
    (data[key] && typeof data[key] === 'object') && removeEmpty(data[key]) ||
    (data[key] === '' || data[key] === null) && delete data[key]
  });
  return data;
};

Answer 6

首先iterate使用forEach通过该对象数组，然后检查data.searchTerm !== null。
这是一个可行的解决方案。

class App extends React.Component {
  state = {
    toDate: new Date(),
    fromDate: new Date()
  };
  searches = [
    {
      toDate: this.state.toDate,
      fromDate: this.state.fromDate,
      filteredEntityText: null,
      options: "negative",
      searchTerm: null
    },
    {
      toDate: this.state.toDate,
      fromDate: this.state.fromDate,
      filteredEntityText: null,
      options: "negative",
      searchTerm: "microsoft"
    },
    {
      toDate: this.state.toDate,
      fromDate: this.state.fromDate,
      filteredEntityText: null,
      options: "negative",
      searchTerm: "apple"
    }
  ];
  render() {
    let results = [];
    this.searches.forEach(data => {
      if (data.searchTerm !== null) results.push(data);
    });
    console.log(results);
    return (
      <div>
        {results.map((data, index) => (
          <span key={index}>{data.searchTerm}, </span>
        ))}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />

如何获取值不等于null的对象的键和值？

6 个答案: