2017-07-18 46 views
0

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

例如具有下列阵列我想切换(按钮)具有名为一个和/或打开和关闭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/

+3

你是什么_“切换”的意思_?您似乎在问,如何删除并重新向数组添加值。 – evolutionxbox

+0

@evolutionxbox正确。我想删除并添加相同的值/多个值。例如,我想切换'a'和'b'。 – debugmode

回答

0

你也许可以使用,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);

0

从提琴采取以下将返回原始数组的副本与选定的属性删除

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; 
 
    }); 
 
}
<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>

0

你可以使用正确的副本用数组绑定并过滤键。

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']));

0

为了切换(也就是说当您切换第二次独立于任何其他属性的切换状态的属性将被再次添加),你需要保持状态,了解目前是否有房产开业或关闭。

我会为此引入一个额外的对象,该对象具有所有属性,但值为布尔值:如果应该包含该属性,则为true;否则为false。

这里是一个工作片段,将只有目前是“上”的属性显示对象:

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>