JS Você não deve conhecer a "maneira inteligente" de alterar a ordem adjacente do array

Índice

I. Introdução

 2. Processo de implementação

3. Resumo

---

I. Introdução

Hoje, encontrei um requisito no projeto, que é mover o conteúdo para cima e para baixo clicando nas duas setas para cima e para baixo.Na verdade, chamar a função altera sua ordem no array. Pode-se saber pelos requisitos que a ordem dos valores adjacentes na matriz alterada está na matriz.

 2. Processo de implementação

1. No arquivo util.js, primeiro defina o método de mover para cima e para baixo e trocar os valores no array

// 规格选项列表上移的方法
export function useArrayMoveUp(arr, index) {
    swapArray(arr, index, index - 1)
}

// 规格选项列表下移的方法
export function useArrayDown(arr, index) {
    swapArray(arr, index, index + 1)
}

function swapArray(arr, index1, index2) {
    arr[index1] = arr.splice(index2, 1, arr[index1])[0]
    return arr
}

2. Defina o método de classificação e realize a interação da página

// 排序规格选项
export function sortCard(action, index) {
    if (action == 'up') {
        useArrayMoveUp(sku_card_list.value, index)
    } else {
        useArrayMoveDown(sku_card_list.value, index)
    }
}

3. Vincule o evento click aos dois botões e torne o primeiro na matriz incapaz de mover para cima e o último na matriz para não mover para baixo e adicione a propriedade desabilitada como verdadeira ao botão

                  <el-button class="ml-auto" size="small" @click="sortCard('up',index)" :disabled="index == 0">
                        <el-icon>
                            <Top />
                        </el-icon>
                    </el-button>

                    <el-button size="small" @click="sortCard('down',index)" :disabled="index === (sku_card_list.length - 1)">
                        <el-icon>
                            <Bottom />
                        </el-icon>
                    </el-button>

Até agora, a interação de efeito estático da página de front-end foi realizada , apenas a página de front-end foi interagida e as interações de front-end e back-end não foram realizadas. Em seguida, a interface é chamada para perceber o efeito de interação do front-end e back-end

Definir métodos de interface

// 排序商品规格选项
export function sortGoodsSkusCard(data) {
    return axios.post(`/admin/goods_skus_card/sort`, data)
}

Modifique o método sortCard para obter interação de front-end e back-end.

//引入接口方法
import { sortGoodsSkusCard } from '~/api/goods.js'
export function sortCard(action, index) {
    // 拷贝一份规格选项的值
    let oList = JSON.parse(JSON.stringify(sku_card_list.value))
    let func = action == 'up' ? useArrayMoveUp : useArrayMoveDown
    func(oList, index)
    let sortData = oList.map((o, i) => {
        return {
            id: o.id,
            order: i + 1
        }
    })
    sortGoodsSkusCard({
        sortdata: sortData
    })
        .then((res) => {
            // 后端修改完毕，然后再修改前端的值
            func(sku_card_list.value, index)
        })
        .finally(() => {})
}

No final, o efeito da interação front-end e back-end foi percebido e os dados foram permanentemente modificados.

3. Resumo

Pelo seguinte código

 arr[index1] = arr.splice(index2, 1, arr[index1])[0]

É um método muito inteligente para perceber o efeito de troca dos dois valores anteriores do array, o que equivale a realizar as seguintes operações

Substitua as posições de 1 e 2 na matriz

[1, 2, 3, 4] matriz original

[2, 2, 3, 4] arr.splice(index2,1,arr[index1]) executa o resultado da operação e altera o array original

[2, 1, 3, 4] arr.splice(index2,1,arr[index1]) retorna 2 e, em seguida, atribui 2 a arr[index1]

A operação está concluída, método muito inteligente