js 对象数组实现上移、下移、置顶、置底操作

最新推荐文章于 2024-10-10 18:07:45 发布

背书包的甜瓜

最新推荐文章于 2024-10-10 18:07:45 发布

阅读量1.3k

点赞数 9

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/dashanjv/article/details/135936575

文章介绍了JavaScript中的几种数组操作函数，包括移动元素（上移、下移、置顶、置底）、数组分块以及深拷贝功能，以便在处理列表时进行高效操作，同时示例了如何在实际场景中使用这些函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装方法

// 上移操作
export function moveUp(array, index) {
    if (index > 0 && index < array.length) {
        let temp = array[index];
        array[index] = array[index - 1];
        array[index - 1] = temp;
    }
    return array;
}

// 下移操作
export function moveDown(array, index) {
    if (index >= 0 && index < array.length - 1) {
        let temp = array[index];
        array[index] = array[index + 1];
        array[index + 1] = temp;
    }
    return array;
}

// 置顶操作
export function moveToTop(array, index) {
    if (index > 0 && index < array.length) {
        let element = array.splice(index, 1)[0];
        array.unshift(element);
    }
    return array;
}

// 置底操作
export function moveToBottom(array, index) {
    if (index >= 0 && index < array.length - 1) {
        let element = array.splice(index, 1)[0];
        array.push(element);
    }
    return array;
}

// 将数组按数量分成子数组 如[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] ---结果 [ [ 1, 2, 3, 4, 5 ], [ 6, 7, 8, 9, 10 ], [ 11 ] ]
export function arrayGrouping(array, chunkSize) {
    let result = [];
    for (let i = 0; i < array.length; i += chunkSize) {
        result.push(array.slice(i, i + chunkSize));
    }
    return result;
}

使用的时候，先导入要使用的方法，再将原数据深拷贝一份，再操作如

let list = [{lable:'1',value:1},{lable:'2',value:2},{lable:'3',value:3},lable:'4',value:4}]

const copyArr = JSON.parse(JSON.stringify(list))


list = moveToTop(copyArr, index)        // index:当前操作项的下标