在 JavaScript 中更改数组元素的位置

JavaScript 2年前 645

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

使用 splice() 方法从数组中删除指定索引处的元素。
使用 splice() 方法将元素插入数组中的新索引处。

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 的数组元素的位置从索引 0 更改为索引 2。

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

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

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

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

start index – 开始更改数组的索引。
delete count – 应该从数组中删除多少元素。

我们只想删除一个元素，所以我们将删除计数参数设置为 1。

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

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

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

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

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

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

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 方法来：

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

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

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

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 参数并移动元素。

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' ]

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

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

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-move npm 包。

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

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

在项目的根目录（package.json 文件所在的位置）中打开终端并安装 array-move 包。

$ npm install array-move

导入并使用包导出的函数来移动数组元素。

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' ]

arrayMoveImmutable 函数将数组、from 索引和 to 索引作为参数，并返回一个移动了指定元素的新数组。

该函数不会就地改变原始数组。

如果我们想就地更改原始数组，请使用 arrayMoveMutable() 函数。

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' ]