I.はじめに

今日、プロジェクトで 2 つの上下矢印をクリックしてコンテンツを上下に移動するという要件に遭遇しました。実際、関数を呼び出すと配列内の順序が変更されます。要件から、変更された配列内の隣接する値の順序が配列内にあることがわかります。

2. 導入プロセス

1.util.jsファイルで、まず上下に移動して配列内の値を交換するメソッドを定義します

// 规格选项列表上移的方法
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. 並べ替え方法を定義し、ページ操作を実行します

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

3. クリックイベントを 2 つのボタンにバインドし、配列の最初のボタンは上に移動できないようにし、配列の最後のボタンは下に移動できないようにし、disabled プロパティを true にボタンに追加します。

                  <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>

これまでのところ、フロントエンドページの静的効果のインタラクションが実現されており、フロントエンドページのみがインタラクションされており、フロントエンドとバックエンドのインタラクションは実行されていません。次に、インターフェイスが呼び出されます。フロントエンドとバックエンドの相互作用効果を実現

インターフェースメソッドを定義する

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

sortCard メソッドを変更して、フロントエンドとバックエンドの対話を実現します。

//引入接口方法
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(() => {})
}

最終的に、フロントエンドとバックエンドの相互作用の影響が認識され、データが永続的に変更されることが判明しました。

3. まとめ

以下のコードで

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

これは、配列の前の 2 つの値の交換効果を実現する非常に賢い方法であり、次の操作を実行するのと同等です。

配列内の 1 と 2 の位置を置き換えます

[1, 2, 3, 4] 元の配列

[2, 2, 3, 4] arr.splice(index2,1,arr[index1]) は操作の結果を実行し、元の配列を変更します

[2, 1, 3, 4] arr.splice(index2,1,arr[index1]) は 2 を返し、arr[index1] に 2 を代入します。

操作は完了しました、非常に賢い方法です

JS 配列の隣接順序を変更する「賢い方法」を知らないといけない

I.はじめに

2. 導入プロセス

3. まとめ

おすすめ