【JavaScript】 ---- 数组元素的添加和删除

1. 实现预览

2. 实现分析

1. 实现就是对数组元素的位置改变；
2. 使用数组的 splice 方法实现；
3. 使用 es6 解构赋值。

3. 实现操作函数

  // 数组操作
  function handleList(type, list, idx, value){
    return {
      'delete': () => { // 删除
        list.splice(idx, 1)
        return [...list]
      },
      'add': () => { // 新增
        list.splice(idx, 0, value)
        return [...list]
      },
      'up': () => { // 上移
        [list[idx], list[idx - 1]] = [list[idx - 1], list[idx]]
        return [...list]
      },
      'down': () => { // 下移
        [list[idx], list[idx + 1]] = [list[idx + 1], list[idx]]
        return [...list]
      },
      'top': () => { // 置顶
        return [...list.splice(idx,1), ...list]
      },
      'bottom': () => { // 置底
        let val = list.splice(idx,1)[0]
        return [...list, val]
      }
    }[type]?.()
  }

4. 操作函数的使用

  // 操作时间
  function handleTime(type, idx){
    let value = {
      start: '', 
      end: '', 
      keyId: api.generateId()
    }
    times = handleList(type, times, idx, value)
    setTimes([...times])
  }

5. 调用

  // 获取选择时间
  function getChooseTimeHtml(){
    if(times?.length){
      return times.map((item,idx) => 
        
          营业开始时间：
          
            
              {item.start || '请选择营业开始时间'}
            
            
          
        
        
          营业结束时间：
          
            
              {item.end || '请选择营业结束时间'}
            
            
          
        
        
          
            上移
          
          
            下移
          
          
            置顶
          
          
            置底
          
        
        
          
            { getDeleteBtnHtml(idx) }
          
          
            添加营业时间
          
        
      )
    }
  }
  // 获取删除按钮
  function getDeleteBtnHtml(idx){
    if(idx > 0){
      return 删除营业时间
    }
  }

注意：splice 操作的是当前位置，因此我们如果是在当前位置后添加，就应该将传入下标 + 1!!!

6. 总结

1. 将操作数组的模式集中到一个工具类中，方便后期统一处理操作！