如何获取javascript对象属性的子集未定义或null属性除外

如何解决如何获取javascript对象属性的子集未定义或null属性除外

我可以使用不同版本的对象：

myObject1 = { 
  color: 'red',size : 'big',name : 'Beautiful red',count: 2
};

myObject2 = { 
  color: 'blue',name : 'Awesome blue',count : null
};

我需要一个助手来仅保留我想要且存在的值：

function myHelper() {
   ?????
}


myHelper(myObject1,['color','size','count']) // => { color: 'red',count:2}
myHelper(myObject2,'count']) // => { color: 'blue'}

有人创建了吗？

解决方法

将对象转换为条目并按以下条件进行过滤：

• 对象属性（key）存在于所需的键列表（props）中
• 值（val）不是null。

const myObject1 = { 
  color: 'red',size : 'big',name : 'Beautiful red',count: 2
};

const myObject2 = { 
  color: 'blue',name : 'Awesome blue',count : null
};

function myHelper(obj,props) {
  return Object.fromEntries(Object.entries(obj)
    .filter(([key,val]) => props.includes(key) && val != null));
}

console.log(myHelper(myObject1,['color','size','count']));
console.log(myHelper(myObject2,'count']));

.as-console-wrapper { top: 0; max-height: 100% !important; }

如果要优化此设置，可以通过以下方式将“数组包含”更改为“设置为”检查：

const myHelper = (obj,props) => (pSet => Object.fromEntries(Object.entries(obj)
    .filter(([key,val]) => pSet.has(key) && val != null)))
(new Set(props));

,

在使用Object.fromEntries here

之前，请检查浏览器的兼容性。

---

您可以使用Object.entries来遍历对象项（[key,value]对）和filter对象 key k（如果位于提供的数组中（使用Set来加快查找速度）和值v（不是null）。

然后将条目的这些数组传递到Object.fromEntries并将其作为对象获取：

myObject1 = {
  color: 'red',size: 'big',name: 'Beautiful red',count: 2
};
myObject2 = {
  color: 'blue',name: 'Awesome blue',count: null
};
function myHelper(obj,arr) {
  return Object.fromEntries(
    Object.entries(obj)
    .filter(([k,v]) => new Set(arr).has(k) && v !== null)
  );
}
console.log(myHelper(myObject1,'count']))
console.log(myHelper(myObject2,'count']))

另一种选择是遍历arr和filter中的给定键，这些键存在于给定obj中而不是null中。

然后将map添加到[key,value]对数组中，并将其作为Object.fromEntries的参数提供给对象，以输出：

myObject1 = {
  color: 'red',arr) {
  return Object.fromEntries(
   arr.filter(k => obj[k]).map(k => [k,obj[k]])
  );
}
console.log(myHelper(myObject1,'count']))

,

只需使用Array.reduce作为密钥即可。

myObject1 = { 
  color: 'red',count: 2
};

myObject2 = { 
  color: 'blue',count : null
};

function myHelper(input,keys) {
  const result = keys.reduce((acc,cur) => {
    if (input[cur]) {
      acc[cur] = input[cur];
    }
    return acc;
  },{});
  return result;
}


console.log(myHelper(myObject1,'count'])); // => { color: 'red',count:2}
console.log(myHelper(myObject2,'count'])); // => { color: 'blue'}

,

使用Array.reduce我们可以实现这一目标

let myObject1 = { 
  color: 'red',count: 2
};

let myObject2 = { 
  color: 'blue',count : null
};

const myHelper = (data,keys) => keys.reduce((res,key) => {
  //check if the data is available in the provided object for the given key,if so add it to the result object.
  if (data[key]) {
    res[key] = data[key]
  };
  return res;
},{})


console.log(myHelper(myObject1,'count']))

.as-console-wrapper {
  max-height: 100% !important;
}

,

您可以.map()在键数组上并根据键数组构建一个新对象。要从数组构建新对象，可以将键映射到对象。然后，您可以使用Object.assign()将这个对象数组合并为一个对象：

const myObject1 = { color: 'red',count: 2 };
const myObject2 = { color: 'blue',count : null };

function myHelper(obj,arr) {
  return Object.assign(
    {},...arr.map(k => obj[k] != undefined ? {[k]: obj[k]} : {})
  );
}

console.log(myHelper(myObject1,'count'])); // => { color: 'blue'}

通过从键构建对象（而不是过滤掉输入对象），您无需检查当前条目是否在键数组中。

,

此处发布的某些答案未明确检查undefined和null，因此，如果属性值为空字符串""或0，它们将也被过滤掉了，我猜这不是您想要的。

您可以使用.getOwnPropertyNames和.reduce来过滤所需的属性。

function keep(obj = {},props = []) {
  return Object.getOwnPropertyNames(obj).reduce((acc,prop) => {
    if (obj[prop] !== undefined && obj[prop] !== null && props.includes(prop)) {
      return { ...acc,[prop]: obj[prop] };
    }

    return acc;
  },{});
}

const cleanedObj = keep({ color: undefined,size: null,count: 0,age: 20 },[
  "color","size","count","age",]);

console.log(cleanedObj); // { count: 0,age: 20 }