JavaScript对象与数组操作：实现带元素自动增删功能的doThis函数

前置定义 #

现有如下空对象data：

const data = {}

函数规则 #

需要实现doThis(key, value)函数，满足以下逻辑：

• 传入的key在data中不存在时，自动为该key创建空数组作为初始值
• 传入的value不在对应key的数组中时，将其追加到数组末尾
• 传入的value已存在于对应key的数组中时，将其从数组中移除

效果示例 #

1. 首次调用doThis('student' , 'James')后，data值为：

{ student : ['James'] } 

2. 调用doThis('student' , 'Peter')后，data值为：

{ student : ['James' , 'Peter'] } 

3. 调用doThis('planet' , 'earth')后，data值为：

{ student : ['James' , 'Peter'] , planet: ['earth'] }

4. 再次调用doThis('student' , 'Peter')后，Peter被移除，data值为：

{ student : ['James'] , planet : ['earth'] }

实现代码 #

原生JavaScript版本 #

function doThis(key, value) {
  // 初始化不存在的key
  if (!Array.isArray(data[key])) {
    data[key] = []
  }
  const targetIndex = data[key].indexOf(value)
  if (targetIndex >= 0) {
    // 已存在则移除对应项
    data[key].splice(targetIndex, 1)
  } else {
    // 不存在则追加到数组末尾
    data[key].push(value)
  }
}

React 带useCallback版本 #

// useCallback仅用于缓存函数引用，核心逻辑和原生实现一致
const doThis = useCallback((key, value) => {
  setData(prev => {
    const currentList = prev[key] ?? []
    const targetIndex = currentList.indexOf(value)
    const newList = targetIndex >= 0 
      ? currentList.filter((_, index) => index !== targetIndex) 
      : [...currentList, value]
    return {
      ...prev,
      [key]: newList
    }
  })
}, [])

内容的提问来源于stack exchange，提问作者Suman Bhattarai