js数组中改变元素的位置——互换,置顶,上移,下移

                                欢迎微信关注Jerome blog,用技术的心去生活

技术前言:

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

一、两个元素换位子

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

二、置顶移动

function toFirst(fieldData,index) {

    if(index!=0){

        // fieldData[index] = fieldData.splice(0, 1, fieldData[index])[0]; 这种方法是与另一个元素交换了位子,

        fieldData.unshift(fieldData.splice(index , 1)[0]);

    }

}

三、up 上移动一格

function upGo(fieldData,index){

    if(index!=0){

        fieldData[index] = fieldData.splice(index-1, 1, fieldData[index])[0];

    }else{

        fieldData.push(fieldData.shift());

    }

}

四、down 下移动一格

function downGo(fieldData,index) {

    if(index!=fieldData.length-1){

        fieldData[index] = fieldData.splice(index+1, 1, fieldData[index])[0];

    }else{

        fieldData.unshift( fieldData.splice(index,1)[0]);

    }

}

 

### 使用 `splice` 方法交换数组中的两个元素 一种方式是通过 `splice` 方法实现数组中任意位置的两个元素交换。给定一个数组 `[1, 2, 3, 4, 5]`,想要交换索引为 1 和 3 的元素(即数值 2 和 4),可以按照如下方式进行: ```javascript const arr = [1, 2, 3, 4, 5]; // 先将目标位置处的元素取出并替换为目标元素之一 const temp = arr.splice(3, 1, arr[1]); // 更新原位置上的元素值 arr[1] = temp[0]; console.log('输出结果是---->', arr); ``` 这种方法虽然能够完成任务但是较为复杂,并且会改变数组长度暂时,在实际开发场景不推荐使用此方法[^1]。 ### 推荐做法——解构赋值法 更简洁高效的方式是在 ES6 中引入了解构赋值特性来进行两数交换操作而无需借助额外变量存储临时数据。对于上述例子而言,则可写作: ```javascript function swapElements(array, indexA, indexB) { if (indexA >= array.length || indexB >= array.length || indexA < 0 || indexB < 0) { console.error("Invalid indices provided."); return array; } [array[indexA], array[indexB]] = [array[indexB], array[indexA]]; return array; } let myArray = [1, 2, 3, 4, 5]; swapElements(myArray, 1, 3); console.log(myArray); // 输出: [1, 4, 3, 2, 5] ``` 这种方式不仅代码更加直观易懂而且性能上也优于前者[^2]。 ### 特殊情况处理 当涉及到的是数组的第一个和最后一个元素之间的互换时,可以直接采用下标访问的形式快速达成目的: ```javascript [arr[0], arr[arr.length - 1]] = [arr[arr.length - 1], arr[0]]; ``` 这段代码同样适用于任何一对相邻或非邻近元素间的置换需求,只需调整对应的索引即可[^3]。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值