如何获取 javascript 对象属性的子集，不包括未定义或空属性

Question

我可以有一个对象的不同版本：

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', size : 'big', count:2}
myHelper(myObject2, ['color','size','count']) // => { color: 'blue'}

有人已经创建了吗？

Answer 1

在使用 Object.fromEntries here

之前检查浏览器兼容性

您可以使用 Object.entries 循环对象 entries（[key, value] 对）和 filter 对象 [=51] =]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, ['color', 'size', 'count']))
console.log(myHelper(myObject2, ['color', 'size', 'count']))

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

然后 map 到 [key, value] 对的数组，并将其作为参数提供给 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(
   arr.filter(k => obj[k]).map(k => [k, obj[k]])
  );
}
console.log(myHelper(myObject1, ['color', 'size', 'count']))
console.log(myHelper(myObject2, ['color', 'size', 'count']))

Answer 2

可以简单地使用 Array.reduce 键来完成。

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

myObject2 = { 
  color: 'blue',
  name : 'Awesome 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, ['color','size','count'])); // => { color: 'red', size : 'big', count:2}
console.log(myHelper(myObject2, ['color','size','count'])); // => { color: 'blue'}

Answer 3

使用Array.reduce我们可以实现这个

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

let myObject2 = { 
  color: 'blue',
  name : 'Awesome 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, ['color', 'size', 'count']))
console.log(myHelper(myObject2, ['color', 'size', 'count']))

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

Answer 4

将对象转换为条目并过滤：

对象属性 (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, ['color','size','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));

Answer 5

你可以.map() over your key array and build a new object based on your key array. To build the new object from the array, you can map the keys to objects. You can then merge this array of objects into one object using Object.assign():

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

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

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

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

Answer 6

这里发布的一些答案没有明确检查 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 }

Answer 7

function myHelper (sourceObj, [...keys]) {
  let objSubset = Object.entries(sourceObj)
    .filter(([key]) => keys.includes(key))
    .filter(([, value]) => value !== undefined && value !== null)
    .reduce((newObj, [key, val]) => Object.assign(newObj, { [key]: val }), {});
  return objSubset
}

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

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

let x = myHelper(myObject1, ['color','size','count']);
let y = myHelper(myObject2, ['color','size','count']);

console.log(x)
console.log(y)

该函数不会 return 具有未定义和空值的对象，但仍然 return 具有 0、空字符串 "" 和 [=13= 的对象] 值。

如何获取 javascript 对象属性的子集，不包括未定义或空属性

How to get a subset of a javascript object's properties excluding undefined or null properties

javascript

clone

helper