函数 - js 数组滚动

430 阅读3分钟

在 JavaScript 中对数组进行操作是非常常见的需求,比如给数组排序、去重、过滤等等。今天我们要分享的是一个常见的需求,即数组的滚动。具体来说就是将数组的元素按照一定的条件滚动到数组的首位或者尾部。

举个例子,假设我们有一个数组 array,内容为 [0, 1, 2, 3, 4],我们希望实现一个 rollTimes 方法,该方法可以将数组向左或者向右滚动 n 次后得到一个新的数组。例如,向右滚动一次后,数组的值变成 [4, 0, 1, 2, 3]

好了,那么如何实现这个方法呢?让我们看一下下面的代码:

/**
 * 数组滚动
 * @param {any[]} arr 需要被操作的数组
 * @param {*} times
 * @returns
 */
const rollTimes = (arr = [], times = 1) => {
  // 异常参数处理
  if (!Array.isArray(arr)) {
    console.error(
      "rollTimes(any[], number) 入参错误! 应该是 array 类型,但是收到一个",
      typeof arr,
      "类型。"
    );
    return;
  }

  // 深拷贝数据,避免对源数据造成影响
  let result = JSON.parse(JSON.stringify(arr));

  /* 如果滚动次数为0,返回源数据的拷贝体,即本方法可以实现单层数据的深拷贝 */
  if (times === 0) {
    result = result;
    /* 如果滚动次数小于0,则向左滚动,即第1个变成最后一个,其他依次向左移动一个 */
  } else if (times < 0) {
    for (let i = 0; i > times; i--) {
      result.push(result.shift());
    }
    /* 如果滚动次数大于0,则向右滚动,即最后一个变成第一个,其他依次向左移动一个 */
  } else {
    for (let i = 0; i < times; i++) {
      result.unshift(result.pop());
    }
  }

  return result;
};

上面这段代码就是实现 rollTimes 方法的核心代码。在这个方法中,我们首先进行了参数异常处理,如果入参不是数组类型,就会报错并返回 undefined。接下来使用深拷贝将传进来的数组进行备份,从而避免对原数组造成影响。

然后,我们通过 for 循环的方式实现了数组的向左或向右滚动。如果滚动次数 times 为 0,则不需要滚动了,直接返回原数组的拷贝体即可。

如果 times 为正数,则表示需要向右滚动数组,我们使用 unshiftpop 方法来实现。具体来说,我们使用 pop 方法将数组的最后一个元素删除,然后使用 unshift 方法将该元素插入到数组的第一个位置。这个操作需要重复执行 times 次。

如果 times 为负数,则表示需要向左滚动数组,我们使用 shiftpush 方法来实现。具体来说,我们使用 shift 方法将数组的第一个元素删除,然后使用 push 方法将该元素插入到数组的最后一个位置。这个操作同样需要重复执行 times 次。

好了,现在我们已经完成了 rollTimes 方法的实现了。我们可以通过下面的代码来测试一下它的功能:

Copy code
const array = [0, 1, 2, 3, 4];

console.log(rollTimes(array, 1));
// [ 4, 0, 1, 2, 3 ]

console.log(rollTimes(array, -1));
//[ 1, 2, 3, 4, 0 ]

在实际使用中,我们可以结合其他的方法,如 slicesplice 等来实现更加复杂的滚动效果。希望这篇文章对你有所帮助,让你更好地理解 JavaScript 中的数组操作。