在前端的專案中，常常會遇到 Javascript 數據需調換順序的功能，在此做個記錄

data 為一個單純的 Array

const data = [
  { name: "第一個項目" },
  { name: "第二個項目" },
  { name: "第三個項目" },
  { name: "第四個項目" },
  { name: "第五個項目" },
];

上移

const clickUp = (idx) => {
  if (idx === 0) return;
  data[idx] = data.splice(idx - 1, 1, data[idx])[0];
};

splice 可刪除從 idx 處開始的零個或多個元素，改變原來的 data，並將被刪除的數組替換到 idx 的位置

下移

const clickDown = (idx) => {
  if (idx === data.length - 1) return;
  data[idx] = data.splice(idx + 1, 1, data[idx])[0];
};

置頂

const clickTop = (idx) => {
  if (idx === 0) return;
  data.unshift(data.splice(idx, 1)[0]);
};

互換

1
2
3

const change = (idx, idx2) => {
  data[idx] = data.splice(idx2, 1, data[idx])[0];
};

Vue 範例

這邊用 Vue 來操作上移、下移、置頂、互換，附上 codesandbox

<template>
  <ul>
    <li v-for="(item, idx) in data" :key="item.name">
      <div>{{ idx + 1 }}. {{ item.name }}</div>
      <div>
        <button type="button" @click="clickUp(idx)">▲</button>
        <button type="button" @click="clickDown(idx)">▼</button>
        <button type="button" @click="clickTop(idx)">置頂</button>
        <input type="number" v-model="item.number" @input="change(idx)" />
      </div>
    </li>
  </ul>
</template>

<script setup>
import { reactive } from "vue";
const data = reactive([
  { name: "第一個項目", number: 0 },
  { name: "第二個項目", number: 0 },
  { name: "第三個項目", number: 0 },
  { name: "第四個項目", number: 0 },
  { name: "第五個項目", number: 0 },
]);

const clickUp = (idx) => {
  if (idx === 0) return;
  data[idx] = data.splice(idx - 1, 1, data[idx])[0];
};

const clickDown = (idx) => {
  if (idx === data.length - 1) return;
  data[idx] = data.splice(idx + 1, 1, data[idx])[0];
};

const clickTop = (idx) => {
  if (idx === 0) return;
  data.unshift(data.splice(idx, 1)[0]);
};

const change = (idx) => {
  data[idx] = data.splice(data[idx].number - 1, 1, data[idx])[0];
};
</script>