Блог

Главная - Вопросы по программированию - Как получить подмножество свойств объекта javascript, исключая неопределенные или нулевые свойства

Как получить подмножество свойств объекта javascript, исключая неопределенные или нулевые свойства

#javascript #clone #helper

#javascript #клонирование #помощник

Вопрос:

У меня может быть другая версия объекта:

 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'}

Кто-нибудь уже создал его?

Ответ №1:

Преобразуйте объект в записи и фильтруйте по:

  • Свойство объекта ( key ) существует в нужном списке ключей ( props )
  • Value ( 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) amp;amp; 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; }

Если вы хотите оптимизировать это, вы можете изменить проверку «array includes» на «set has» через:

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

Комментарии:

1. Короче: const myHelper = (obj, props) => Object.fromEntries(Object.entries(obj) .filter(([key, val]) => props.includes(key) amp;amp; val != null));

Ответ №2:

Используя 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;
}

Ответ №3:

Это можно просто сделать с помощью Array.reduce ключей for .

 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 resu<
}


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

Ответ №4:

Проверьте совместимость с браузером, прежде чем использовать Object.fromEntries here

Вы можете сделать это, используя Object.entries для перебора записей объекта ( [key, value] пар) и filter ключа 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) amp;amp; 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']))

Ответ №5:

Вы можете .map() переопределить свой массив ключей и создать новый объект на основе вашего массива ключей. Чтобы создать новый объект из массива, вы можете сопоставить ключи с объектами. Затем вы можете объединить этот массив объектов в один объект, используя 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'}

Создавая объект из ключей (вместо того, чтобы отфильтровывать ваш входной объект), вы избавляете от необходимости проверять, находится ли текущая запись в вашем массиве ключей.

Ответ №6:

Некоторые из опубликованных здесь ответов явно не проверяются undefined и null , следовательно, если значение свойства является пустой строкой "" , или 0 они также будут отфильтрованы, что, я предполагаю, не то, что вы хотите.

Вы можете использовать .getOwnPropertyNames и .reduce для фильтрации нужных вам свойств.

 function keep(obj = {}, props = []) {
  return Object.getOwnPropertyNames(obj).reduce((acc, prop) => {
    if (obj[prop] !== undefined amp;amp; obj[prop] !== null amp;amp; 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 }

Ответ №7:

 function myHelper (sourceObj, [...keys]) {
  let objSubset = Object.entries(sourceObj)
    .filter(([key]) => keys.includes(key))
    .filter(([, value]) => value !== undefined amp;amp; 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)

Функция не будет возвращать объект со значениями, которые являются неопределенными и нулевыми, но все равно вернет объект с 0 пустой строкой "" и Boolean значениями.