JS 你一定不知道的 改变数组相邻次序的“巧方法”

目录

一、前言

 二、实现过程

三、小结

---

一、前言

今天在项目中遇到了一个需求就是通过点击 这两个上移和下移的 箭头实现内容的上移和下移，实际就是 调用函数改变了他们在数组中的次序。由需求可以知道,改变的 数组中紧邻的值在数组中的的次序。

 二、实现过程

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.给两个按钮绑定点击事件,并且让数组第一个不能进行上移，数组中最后一个不进行下移，对按钮添加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(() => {})
}

最终，实现了前后端交互的效果,发现数据永久修改。

三、小结

通过以下代码

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

实现了数组之前两个值的交换效果，是一种很巧妙的方法，相当于执行了下列操作

将数组中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，然后将2赋给 arr[index1]

就完成了操作，很巧妙的方法