Question

我想知道如何通过其属性名称在数组中切换值。

例如，如果要使用以下数组，我想切换（按钮）所有具有名为 a 和/或 b 等属性的值。

输入

const arr_input = [
  { a: 1, b: 2, c: 3  },
  { a: 3, b: 9, c: 12  }
];

输出

const arr_output = [
  { b: 2, c: 3  },
  { b: 9, c: 12  }
];

https://jsfiddle.net/cdp0a539/

Answer 1

您可以使用array.reduce过滤掉输出中不需要的属性。

我试图通过使用toggleArray复制下面的情况，您可以在其中传递您不想要的属性。它将过滤掉数组并返回所需的输出。

var arr_input = [{
    a: 1,
    b: 2,
    c: 3
  },
  {
    a: 3,
    b: 9,
    c: 12
  }
];

var toggleArray = function(propToToggle) {
  return arr_input.reduce((arr, inp) => {
    var obj = {};
    for(var key in inp) {
     if(key != propToToggle) {
       obj[key] = inp[key];
     }
    }
    arr.push(obj);
    return arr;
  }, []);
}

var arr_output = toggleArray('a');

console.log(arr_output);

arr_output = toggleArray('b');
console.log(arr_output);

arr_output = toggleArray('c');
console.log(arr_output);

Answer 2

从您的小提琴中取出，以下内容将返回原始数组的副本并删除所选属性

＆＃13;

const items = [
   { 'a': 1, 'b': 2, 'c': 3  },
   { 'a': 3, 'b': 9, 'c': 12  }
];

const toggleProperty = (value) => {
  return items.map(function(el) { 
    var o = Object.assign({},el);
    delete o[value];
    return o;
  });
}

＆＃13;

<button type="button" id="a" 
        onClick="console.log(toggleProperty('a'))">Toggle a</button>

<button type="button" id="b" 
        onClick="console.log(toggleProperty('b'))">Toggle b</button>

<button type="button" id="c" 
        onClick="console.log(toggleProperty('c'))">Toggle c</button>

＆＃13;

Answer 3

您可以使用属性的副本并使用数组过滤键。

const toggle = (array, keys) =>
    array.map(o =>
        Object.assign(
            {},
            ...Object
            .keys(o)
            .filter(k => !keys.includes(k))
            .map(k => ({ [k]: o[k] }))
        )
    ),
    input = [{ a: 1, b: 2, c: 3  }, { a: 3, b: 9, c: 12  }];

console.log(toggle(input, ['a', 'b', 'c']));
console.log(toggle(input, ['a', 'b']));
console.log(toggle(input, ['a']));

Answer 4

为了切换（意味着当你第二次独立于任何其他属性的切换状态切换时再次添加属性），你需要保持状态，知道当前属性是否已打开或是关闭。

我会为此引入一个额外的对象，它将具有所有属性，但其值为布尔值：当应包含该属性时为true，否则为false。

这是一个工作代码段，它将显示只包含当前“on”属性的对象：

const items = [
       { 'a': 1, 'b': 2, 'c': 3  },
       { 'a': 3, 'b': 9, 'c': 12  }
    ],
    // Keep an object with same keys, but with all values set to true:
    state = Object.assign(...Object.keys(items[0]).map( key => ({ [key]: true }) ));

const toggleProperty = (key) => {
    // Toggle state, so you know which keys are currently off or on:
    state[key] = !state[key]; 
    // Produce the desired object and return it
    return items.map( obj =>
        Object.assign(...Object.keys(state).map( key => 
            state[key] ? { [key]: obj[key] } : {}
        ))
    );
}

// Handle the button clicks:
a.onclick = b.onclick = c.onclick = function () {
    output.textContent = JSON.stringify(toggleProperty(this.id), null, 2);
    return false;
};
// At page load, show the complete objects (everything is toggled on):
output.textContent = JSON.stringify(items, null, 2);

<button id="a">Toggle a</button>
<button id="b">Toggle b</button>
<button id="c">Toggle c</button>
<pre id="output"></pre>

如何按属性值切换数组值

4 个答案: