Как отфильтровать пары ключ-значение с помощью строки typeof

Question

Я пытаюсь отобразить ключи объекта и мне нужно удалить любую пару ключ-значение, которая имеет значение с типом строки. Это список, который я отображаю через

base: Object { 1: "#F3F5F7", 2: "#E0E6EB", 3: "#C5CFD8", … }
color1: "#E0E6EB"
color2: "#697886"
neutral: Object [ "#FFFFFF", "#000000" ]
secondaryColor: "purple",
primaryColor: "red",

Мне нужно сохранить base и neutral и отбросить все остальное, прежде чем продолжить отображение элементов. Все еще не полностью понимаю reduce. Где / как я могу ввести reduce или filter, чтобы получить желаемый результат?

return Object.keys(colors).map((color) => {
  return (
    <span key={color}>{color}</span>
  );
});

Answer 1

например, например, преобразование объекта в пары ключ и значение, фильтрация нестроковых пар и затем преобразование его в строки

Object.entries(colors)
  .filter(([_, color]) => typeof color !== "string")
  .map(([key, color]) => <span key={key}>{color}</span>)

Answer 2

Вы можете отобразить сам список (не объект) и трансформировать ваши объекты, удаляя то, что вам не нужно:

// Using destructuring on the parameter and returning a new object.
objectList.map(({ base, neutral }) => ({ base, neutral }))

Answer 3

Используйте .map для создания нового списка objetList или в том же списке

const newList = objectList.map(val => ({
  base: val['base'],
  neutral: val['neutral']
}))
console.log(newList)

output

{
  base: Object { 1: "#F3F5F7", 2: "#E0E6EB", 3: "#C5CFD8", … },
  neutral: Object [ "#FFFFFF", "#000000" ]
}

Answer 4

Попробуйте попробовать с помощью Reduce, это отфильтрует и создаст новый объект. Надеюсь, это поможет:

const Obj = {
  base:  { 1: "#F3F5F7", 2: "#E0E6EB", 3: "#C5CFD8"},
  color1: "#E0E6EB",
  color2: "#697886",
  neutral:  [ "#FFFFFF", "#000000" ],
  secondaryColor: "purple",
  primaryColor: "red"
}

const notTypeString = Object.keys(Obj).reduce(((acc, curr) => {
  if(typeof Obj[curr] !== 'string') {
    const filteresObj = Obj[curr]
    return {...acc, [curr]: filteresObj}
  }

  return acc;
}), {});

console.log(notTypeString)

Answer 5

Вы можете использовать Object.keys() и filter():

const obj = {
  base: { 1: "#F3F5F7", 2: "#E0E6EB", 3: "#C5CFD8"},
  color1: "#E0E6EB",
  color2: "#697886",
  neutral: [ "#FFFFFF", "#000000" ],
  secondaryColor: "purple",
  primaryColor: "red",
}
let newObj = {};
Object.keys(obj).filter(key => typeof obj[key] !== 'string').forEach(key => {
	newObj[key] = obj[key];
})
console.log(newObj)

Answer 6

Вместо отбрасывания перед отображением вы можете игнорировать нерелевантные ключи во время самого сопоставления!

let colors = {
    base: { 1: "#F3F5F7", 2: "#E0E6EB", 3: "#C5CFD8"},
    color1: "#E0E6EB",
    color2: "#697886",
    neutral: [ "#FFFFFF", "#000000" ],
    secondaryColor: "purple",
    primaryColor: "red"
}
console.log("Using map")
Object.keys(colors).map((key)=>{
    if(typeof(colors[key])!=='string')
        console.log(key,colors[key]) // Do whatever you want with these relevant keys
})
console.log("Using filter")
let result = Object.keys(colors).filter((key)=>{
    return typeof(colors[key])!=='string'
})
console.log(result) // Do whatever you want with these relevant keys

---

Вывод

Using map
base { '1': '#F3F5F7', '2': '#E0E6EB', '3': '#C5CFD8' }
neutral [ '#FFFFFF', '#000000' ]
Using filter
[ 'base', 'neutral' ]

Answer 7

Если я правильно понимаю, вы хотите удалить что-либо из вашего объекта типа "строка". Вы можете использовать уменьшить для этого, да. Пример сокращения из MDN показывает базовое c поведение:

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

Вы собираетесь перебирать массив (в вашем случае ключи объекта). Затем вы проведете каждую клавишу через функцию, передавая как аккумулятор, так и текущее значение l oop. Ваша обработка вернет обновленное значение к аккумулятору.

const keys = Object.keys(colors);
const reducer = (accumulator, currentValue) => {
  if (typeof Object[currentValue] !== 'string') {
    accumulator[currentValue] = Object[currentValue];
  }
  return accumulator;
}
keys.reduce(reducer, {});

Последний пустой объект, переданный для уменьшения, является начальным значением аккумулятора. Мы начнем с пустого объекта, потому что вы будете постепенно добавлять в него значения, если они не имеют тип string.

Answer 8

Используйте Object.entries для получения ключа и значения при итерации, затем отфильтруйте значения, которые не являются строками, с помощью filter, а затем повторите итерацию и отредактируйте каждый отфильтрованный цвет. Используйте flat, чтобы сгладить результат.

return Object.entries(colors)
  .filter(([key, value]) => typeof value !== 'string')
  .map(([key, value]) => {
    return Object.entries(value).map(([key, color]) => {
      return (<span key={color}>{color}</span>);
    });
  }).flat();