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

Question

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

例如，我有这个数组:

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

我怎样才能让它正常工作？

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

附注我正在接收来自 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 的值应该反射(reflect)新顺序，因此，给定之前编写的 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("");
}

它应该会给你想要的结果。