使用給定值搜索和刪除的最佳方法，用於從 object 內的數組中刪除並返回 object javascript 的新數組？

Question

我嘗試了幾種使用 findIndex、map、Object.entires 的方法。有人幫我找到最佳解決方案嗎？

**

1. 從 customerNumber 數組 [1,2,3,4,5] 中刪除 2
2. 使用數組 [1,3,4,5] 設置為 customerNumber 值
3. 並將 customerNumber 傳播到 filterState 數組

**

let filterState = [
    {'customerNumber': [1,2,3,4,5]},
    {'ward': [10, 20, 30, 40, 50]},
    {'enrolledDate': [111, 222,333, 444,555]},
    {'district': ['AAA', 'BBB','CCCC', 'DDD']},
    {'onBoardingSmsStatus': false}
]

從customerNumber中搜索並刪除2 //customerNumber: 2

function removedChip(type='', value=0, filterState=[]) {

for(let i=0; i<filterState.length; i++) {


    let entries = Object.keys(filterState)
    .forEach(function eachKey(key) { 
        console.log(key); // alerts key 
        console.log(filterState[key]); // alerts value
    });
    console.log(entries)
    let searchIndex = entries.findIndex(type);

    console.log('searchIndex', searchIndex)
    console.log('type of ', filterState[searchIndex])
    for(let i=0; i<filterState[searchIndex]; i++) {
        //remove 2 from customerNumber array [1,2,3,4,5]
    // set to customerNumber value with array[1,3,4,5]
    // and spread customerNumber to  filterState array
    }
}

}

function 使用值調用

removedChip('customerNumber', 10, filterState)

預期的 output 是

    let filterState = [
    {'customerNumber': [1,3,4,5]},
    {'ward': [10, 20, 30, 40, 50]},
    {'enrolledDate': [111, 222,333, 444,555]},
    {'district': ['AAA', 'BBB','CCCC', 'DDD']},
    {'onBoardingSmsStatus': false}
]

Answer 1

在你的removedChip中你可以像過濾它一樣..

function removedChip(type = "", value = 0, filterState = []) {
  const result = filterState.map((data) => {
    if (data[type]) {
    // Modify only the given field in the type params
      return { [type]: data[type].filter((du) => du !== value) };
    }
    return data;
  });
  return result;
}
let filterState = [
  { customerNumber: [1, 2, 3, 4, 5] },
  { ward: [10, 20, 30, 40, 50] },
  { enrolledDate: [111, 222, 333, 444, 555] },
  { district: ["AAA", "BBB", "CCCC", "DDD"] },
  { onBoardingSmsStatus: false }
];

console.log(removedChip("customerNumber", 2, filterState));

Answer 2

這可能會有所幫助：

 function removedChip(type='', value=0, filterState=[]) {

   const filterStateTypeArray = filterState.filter(fs => 
                  Object.keys(fs)[0] === type);
   const filterStateTypeItem = filterStateTypeArray ? 
                   filterStateTypeArray[0] : null;
   
   if(!filterStateTypeItem){return;}

   let valueArray =  filterStateTypeItem[type];
       valueArray = valueArray.filter(vA => vA !== value);
    
   filterStateTypeItem[type] = valueArray;
 
   console.log(filterState);

}

let filterState = [
    {'customerNumber': [1,2,3,4,5]},
    {'ward': [10, 20, 30, 40, 50]},
    {'enrolledDate': [111, 222,333, 444,555]},
    {'district': ['AAA', 'BBB','CCCC', 'DDD']},
    {'onBoardingSmsStatus': false}
]


removedChip('customerNumber', 2, filterState);

Answer 3

與其他所有可行的答案沒有太大變化 - 我只是將函數拆分為 2 以處理數組的過濾，然后可以獨立於父 function 或獨立於輸入的任何對象列表進行測試

即你可以有一個通用的過濾方法，可以獨立於輸入的對象列表進行測試。

let filterState = [
  { customerNumber: [1, 2, 3, 4, 5] },
  { ward: [10, 20, 30, 40, 50] },
  { enrolledDate: [111, 222, 333, 444, 555] },
  { district: ['AAA', 'BBB', 'CCCC', 'DDD'] },
  { onBoardingSmsStatus: false },
];

// Independent testable filtering
const removeChipFromArray = (array, removeValue = 0) => {
  return array.filter(e => e !== removeValue);
};

// Function to handle the removal of any value from any list of objects
const removeChips = (listOfObjects, value) => {
  listOfObjects.forEach((element, index) => {
    const key = Object.keys(element);
    // General type checker (which would be easier in TS than JS but here is a half-safe way of ensuring you're operating against a list
    // You could also convert it to an Array if you think that's better
    if (typeof(element[key]) === 'object') {
        element[key] = removeChipFromArray(element[key], value);
    }
  });
};

removeChips(filterState, 2);

console.log(filterState);