【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) => <View key={item.keyId}>
        <View className='rui-mine-form-li rui-flex-ac'>
          <Text className='rui-fa rui-fs30 rui-mr20'>营业开始时间：</Text>
          <View className='rui-fg rui-fs30 rui-colorl2 rui-flex-ac'>
            <Picker mode='time' 
              onChange={getChooseValue.bind(null, idx, 'start')} 
              value={item.start}
              className='rui-fg rui-flex-ac'>
              <View className='rui-fg rui-choose-value'>{item.start || '请选择营业开始时间'}</View>
            </Picker>
            <Image src={icon.rightIcon} className="rui-choose-icon"></Image>
          </View>
        </View>
        <View className='rui-mine-form-li rui-flex-ac'>
          <Text className='rui-fa rui-fs30 rui-mr20'>营业结束时间：</Text>
          <View className='rui-fg rui-fs30 rui-colorl2 rui-flex-ac'>
            <Picker mode='time' 
              onChange={getChooseValue.bind(null, idx, 'end')} 
              value={item.end}
              className='rui-fg rui-flex-ac'>
              <View className='rui-fg rui-choose-value'>{item.end || '请选择营业结束时间'}</View>
            </Picker>
            <Image src={icon.rightIcon} className="rui-choose-icon"></Image>
          </View>
        </View>
        <View className='rui-flex-ac'>
          <View className='rui-fg'>
            <View className='rui-advice-btn rui-flex-cc rui-mt30'
              onClick={handleTime.bind(null, 'up', idx)}>上移</View>
          </View>
          <View className='rui-fg'>
            <View className='rui-advice-btn rui-flex-cc rui-mt30'
              onClick={handleTime.bind(null, 'down', idx)}>下移</View>
          </View>
          <View className='rui-fg'>
            <View className='rui-advice-btn rui-flex-cc rui-mt30'
              onClick={handleTime.bind(null, 'top', idx)}>置顶</View>
          </View>
          <View className='rui-fg'>
            <View className='rui-advice-btn rui-flex-cc rui-mt30'
              onClick={handleTime.bind(null, 'bottom', idx)}>置底</View>
          </View>
        </View>
        <View className='rui-flex-sb'>
          <View className='rui-fa' style={`width:45%;`}>
            { getDeleteBtnHtml(idx) }
          </View>
          <View className='rui-fa' style={`width:45%;`}>
            <View className='rui-reset-btn rui-flex-cc rui-mt30'
              onClick={handleTime.bind(null, 'add', idx + 1)}>添加营业时间</View>
          </View>
        </View>
      </View>)
    }
  }
  // 获取删除按钮
  function getDeleteBtnHtml(idx){
    if(idx > 0){
      return <View className='rui-advice-btn rui-flex-cc rui-mt30' 
        onClick={handleTime.bind(null, 'delete', idx)}>删除营业时间</View>
    }
  }

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

6. 总结

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