JS数组批量移动——批量上移、批量下移、置顶、置底

在线查看：https://codepen.io/hu-c-y/pen/vYQbLyz

数组

const state = {
  list: [
    {
      name: '0',
      checked: false,
    },
    {
      name: '1',
      checked: false,
    },
    {
      name: '2',
      checked: false,
    },
    {
      name: '3',
      checked: false,
    },
    {
      name: '4',
      checked: false,
    },
    {
      name: '5',
      checked: false,
    },
    {
      name: '6',
      checked: false,
    },
    {
      name: '7',
      checked: false,
    },
  ] as any[],
};

注意：在原数组对象上新加了两个属性delete和index。

上移

// 上移
function moveUp() {
  const length = state.list.length;
  let max: any = null;
  let maxIndex = null;
  for (let i = 0; i < length; i++) {
    const item: any = state.list[i];

    if (item.checked) {
      item.index = theIndex(i - 1, length);

      if (!isEmpty(max)) {
        const newMax = max + 1;
        state.list[maxIndex].index = newMax;
        max = newMax;
        
        if (state.list[0].checked && i === length - 1) {
          state.list[maxIndex].index = 0;
        }
      } else {
        state.list[item.index].index = i;
        max = i;
        maxIndex = item.index;
      }
    } else {
      if (i < length - 1) {
        item.index = i;
        max = i;
        maxIndex = i;
      }
    }
  }

  state.list.sort((a, b) => a.index - b.index);
}

下移

// 下移
function moveDown() {
  let max: any = null;
  let maxIndex = null;
  const length = state.list.length;
  for (let i = length - 1; i > -1; i--) {
    const item: any = state.list[i];

    if (item.checked) {
      item.index = theIndex(i + 1, length);

      if (!isEmpty(max)) {
        const newMax = max - 1;
        state.list[maxIndex].index = newMax;
        max = newMax;
        
        if (state.list[length - 1].checked && i === 0) {
          state.list[maxIndex].index = length - 1;
        }
      } else {
        state.list[item.index].index = i;
        max = i;
        maxIndex = item.index;
      }
    } else {
      if (i > 0) {
        item.index = i;
        max = i;
        maxIndex = i;
      }
    }
  }

  state.list.sort((a, b) => a.index - b.index);
}

置顶

// 置顶
function toTop() {
  const list: any[] = state.list;
  const selectedList = [] as any[];

  for (let i = 0; i < list.length; i++) {
    if (list[i].checked) {
      selectedList.push(list[i]);
      list[i].delete = true;
    } else {
      list[i].delete = false;
    }
  }

  let _list = state.list.filter((item: any) => !item.delete);
  _list.unshift(...selectedList);

  state.list = _list;
}

置顶

// 置底
function toBottom() {
  const list: any[] = state.list;
  const selectedList = [] as any[];

  for (let i = 0; i < list.length; i++) {
    if (list[i].checked) {
      selectedList.push(list[i]);
      list[i].delete = true;
    } else {
      list[i].delete = false;
    }
  }

  let _list = state.list.filter((item: any) => !item.delete);
  _list.push(...selectedList);

  state.list = _list;
}

utils

function theIndex(index: number, length: number) {
  if (index < 0) {
    return length - 1;
  } else if (index > length - 1) {
    return 0;
  } else {
    return index;
  }
}

function isEmpty(data: any) {
  if (data === '' || data === null || data === undefined) {
    return true;
  }
  // [] {} 0 false/true
  else {
    const typeofs = Object.prototype.toString.call(data);
    // 数组
    if (typeofs === '[object Array]') {
      if (data.length > 0) {
        return false;
      } else {
        return true;
      }
    }
    // 对象
    else if (typeofs === '[object Object]') {
      if (Object.keys(data).length > 0) {
        return false;
      } else {
        return true;
      }
    } else {
      // 不为空
      return false;
    }
  }
}