在 JS 中将数组元素从一个索引移动到另一个索引

作者

在 JS 中将数组元素从一个 Index 移动到另一个 Index

Change the Position of an Array Element in JavaScript

要更改元素在数组中的位置：

  1. 使用splice()方法从数组中删除指定索引处的元素。
  2. 使用该splice()方法将元素插入数组中的新索引处。
索引.js
const arr = ['css', 'js', 'ts'];

const fromIndex = arr.indexOf('css'); // 👉️ 0
const toIndex = 2;

const element = arr.splice(fromIndex, 1)[0];
console.log(element); // ['css']

arr.splice(toIndex, 0, element);

console.log(arr); // 👉️ ['js', 'ts', 'css']

我们将数组元素的位置css从 index更改0为 index 2。

我们首先使用
Array.indexOf方法获取元素的索引。

索引.js
const arr = ['css', 'js', 'ts'];

console.log(arr.indexOf('css')); // 👉️ 0

然后我们使用
Array.splice
方法，将以下 2 个参数传递给它：

  1. start index – 开始更改数组的索引。
  2. delete count – 应该从数组中删除多少元素。
我们只想删除一个元素，所以我们将 delete count 参数设置为。 1

该splice()方法返回一个包含已删除元素的数组。

索引.js
const arr = ['css', 'js', 'ts'];

const splice = arr.splice(0, 1);
console.log(splice) // 👉️ ['css']

我们知道我们只从数组中删除了 1 个元素，所以我们直接访问索引处的数组元素0以获取我们将在新位置插入的元素的值。

最后一步是再次调用该splice()方法。但是，这次我们使用它在特定索引处向数组添加一个元素。

我们传递给该splice方法的第三个参数是要添加到数组中的元素。

索引.js
const arr = ['css', 'js', 'ts'];

const fromIndex = arr.indexOf('css'); // 👉️ 0
const toIndex = 2;

const element = arr.splice(fromIndex, 1)[0];
console.log(element); // ['css']

arr.splice(toIndex, 0, element);

console.log(arr); // 👉️ ['js', 'ts', 'css']

我们将起始索引参数设置为元素应该放置的新位置。

最后，我们将删除计数参数设置为0表示我们不想从数组中删除任何元素。

我们使用该splice方法来：

  1. 从数组中删除特定索引处的元素并获取其值。
  2. 将元素添加到特定索引处的数组。

我希望有 2 个独立的内置方法来实现这 2 个截然不同的目标。但是，这是在 JavaScript 中执行此操作的方法。

您也可以将代码缩短为一行，但它的可读性会降低。

索引.js
const arr = ['css', 'js', 'ts'];

const fromIndex = arr.indexOf('css'); // 👉️ 0
const toIndex = 2;

arr.splice(toIndex, 0, arr.splice(fromIndex, 1)[0]);

console.log(arr); // 👉️ ['js', 'ts', 'css']

创建一个移动元素的可重用函数

您还可以创建一个可重用函数，该函数采用数组、fromIndex
和toIndex参数并移动元素。

索引.js
function moveElement(array, fromIndex, toIndex) {
  const element = array.splice(fromIndex, 1)[0];

  console.log(element);

  arr.splice(toIndex, 0, element);

  return arr;
}

const arr = ['css', 'js', 'ts'];

const fromIndex = arr.indexOf('css'); // 👉️ 0
const toIndex = 2;

const result = moveElement(arr, fromIndex, toIndex);
console.log(result); // 👉️ [ 'js', 'ts', 'css' ]

该函数将数组元素移动到位并返回数组。

如果您想在不更改原始数组的情况下创建一个新数组，请创建一个浅表副本。

索引.js
function moveElement(array, fromIndex, toIndex) {
  const arrayCopy = [...array];
  const element = arrayCopy.splice(fromIndex, 1)[0];

  console.log(element);

  arrayCopy.splice(toIndex, 0, element);

  return arrayCopy;
}

const arr = ['css', 'js', 'ts'];

const fromIndex = arr.indexOf('css'); // 👉️ 0
const toIndex = 2;

const result = moveElement(arr, fromIndex, toIndex);
console.log(result); // 👉️ [ 'js', 'ts', 'css' ]

console.log(arr); // 👉️ [ 'css', 'js', 'ts' ]

我们使用扩展语法 (…) 创建数组的浅表副本并调用splice()副本上的方法。

该moveElement()函数不会更改原始数组，它会返回一个反映更改的新数组。

或者，您可以使用array-movenpm 包。

更改数组中元素的位置使用array-move

这是一个两步过程：

  1. Open your terminal in your project’s root directory (where your
    package.json file is) and install the
    array-move package.
shell
# 👇️ with npm
npm install array-move

# 👇️ with yarn
yarn add array-move
  1. Import and use the functions the package exports to move array elements.
index.js
import {arrayMoveImmutable} from 'array-move';

const arr = ['css', 'js', 'ts'];

const fromIndex = arr.indexOf('css'); // 👉️ 0
const toIndex = 2;

const newArray = arrayMoveImmutable(arr, fromIndex, toIndex);

console.log(newArray); // 👉️ [ 'js', 'ts', 'css' ]

console.log(arr); // 👉️ [ 'css', 'js', 'ts' ]

The arrayMoveImmutable function takes the array, the from index and the
to index as arguments and returns a new array with the specified element
moved.

The function doesn’t mutate the original array in place.

If you want to change the original array in place, use the arrayMoveMutable()
function.

index.js
import {arrayMoveMutable} from 'array-move';

const arr = ['css', 'js', 'ts'];

const fromIndex = arr.indexOf('css'); // 👉️ 0
const toIndex = 2;

arrayMoveMutable(arr, fromIndex, toIndex);

console.log(arr); // 👉️ [ 'js', 'ts', 'css' ]

The arrayMoveMutable() function takes the array, the from index and the
to index as arguments, changes the array in place and returns undefined.