如何更改数组中项目的位置？

Question

我正在尝试创建一个函数来更改数组中项目的位置。

例如，我有这个数组：

[1, 2, 3] - 如果我调用这个函数，我得到这个 => [2, 3, 1]; 如果我再次调用该函数，我应该有这个 => [3, 1, 2]; 下一次它应该再次移动，依此类推。但是相反，如果我第二次调用该函数，我会再次得到这个 => [2, 3, 1];

我怎样才能使这个工作正常？

我知道为什么会发生这种情况，每次我调用该函数时，它都会以相同的顺序接收相同的值，我明白了，这就是为什么我构建了另一个数组（移动）以按当前顺序接收值的原因，这是尝试我第二次调用该函数时使用这个新数组，我尝试使用 if/else 语句，但没有奏效；我还构建了另一个将“move”作为参数传递的函数，它起作用了，但没有任何意义我必须为每次移动都使用不同的函数。

ps 我从 HTML 输入接收值。

<input id="numero1" value="">
<button onclick="moveLeft()">Move</button>


var n1 = document.getElementById("numero1");

function moveLeft() {
    var str = n1.value;
    var arr = str.split('');
    var move = [];
    
    console.log(arr);
    arr.splice(0, 3, arr[1], arr[2], arr[0]);
    console.log(arr);

    for (var i = 0; i < arr.length; i++) {
        move.push(arr[i]);
    }

    console.log(move);
    teste(move);
}


function teste(move) {
    console.log(move);
    move.splice(0, 3, move[1], move[2], move[0]);
    console.log(move);
}

Answer 1

如果我理解正确，我认为您可以简化为一行函数：

const moveLeft = (arr) => arr.push(a.shift());

请注意，此函数会改变数组的内容，但我想您想要的是：

const array = [1, 2, 3];

moveLeft(array);
console.log(array)// [2, 3, 1]

moveLeft(array);
console.log(array)// [3, 1, 2]

moveLeft(array);
console.log(array)// [1, 2, 3]

基本上使用push我们在数组的末尾添加一个新元素，我们添加的新元素是shift方法的返回值，它从数组中删除第一个元素并返回它。

编辑

如果您不想改变原始数组，最快的方法是创建一个浅拷贝并将其传递给函数：

 const newArray = array.slice();
 moveLeft(newArray);

 console.log(newArray, array) // [2, 1, 3] [1, 2, 3]

但是，始终返回新数组的可能实现可能是：

 const moveLeft = (arr) => [...arr.slice(1), arr[0]]

仅供日后参考。但请记住，在这里您创建了一个浅拷贝（所以是一个新数组）并从扩展运算符返回一个新数组，因此它不太理想。仅当您编写的 API 不允许可变性时，它才有用。

编辑 2

根据评论，input的值应该反映新的顺序，因此，考虑到moveLeft之前编写的函数（第一个，改变内容）：

<input id="numero1" value="">
<button onclick="inputMoveLeft('numero1')">Move</button>

和JS：

function inputMoveLeft(id) {
  const input = document.getElementById(id);

 input.value = moveLeft(input.value.split("")).join("");
}

它应该给你你正在寻找的结果。