拆分字符串并在 JS 中获取第一个或最后一个数组元素

作者

拆分字符串并获取 JS 中的第一个或最后一个数组元素

Split a String and get the First Array Element in JS

拆分字符串并获取第一个或最后一个数组元素：

  1. 使用该split()方法将字符串拆分为数组。
  2. 使用shift()方法获取第一个数组元素。
  3. pop()如果需要获取最后一个数组元素，请使用该方法。
索引.js
// ✅ split a string and get First element
const str = 'bobby,hadz,com';

const firstElement = str.split(',').shift();
console.log(firstElement); // 👉️ bobby

如果需要在拆分字符串后获取最后一个数组元素，请改用 方法
Array.pop()。

索引.js
// ✅ split a string and get Last element
const str = 'bobby,hadz,com';

const lastElement = str.split(',').pop();
console.log(lastElement); // 👉️ com

String.split ()
方法接受一个分隔符，并在每次出现所提供的分隔符时将字符串拆分为一个数组。

该String.split()方法采用以下 2 个参数：

姓名 描述
分隔器 描述每个拆分应该发生的位置的模式。
限制 一个整数，用于指定要包含在数组中的子字符串数的限制。

我们在每个逗号上拆分字符串，但您可以使用任何其他字符。

索引.js
const str = 'bobby-hadz-com';

// 👇️ [ 'bobby', 'hadz', 'com' ]
console.log(str.split('-'));

Array.shift方法从数组中删除第一个元素并将其返回。

Array.pop()如果只想在拆分后获取最后一个元素，则可以使用该方法。

索引.js
const str = 'bobby,hadz,com';

const lastElement = str.split(',').pop();
console.log(lastElement); // 👉️ com

Array.pop ()方法从数组中删除并返回最后一个元素。

拆分一个字符串并使用获取第一个或最后一个数组元素Array.at()

这是一个两步过程：

  1. 使用该split()方法将字符串拆分为数组。
  2. 使用该Array.at()方法获取第一个或最后一个数组元素。
索引.js
// ✅ split a string and get First element
const str = 'bobby,hadz,com';

const firstElement = str.split(',').at(0);
console.log(firstElement); // 👉️ bobby

如果您需要拆分字符串并获取最后一个数组元素，请访问索引处的数组-1。

索引.js
// ✅ split a string and get Last element
const str = 'bobby,hadz,com';

const lastElement = str.split(',').at(-1);
console.log(lastElement); // 👉️ com

我们使用该String.split()方法来拆分字符串，就像我们在前面的示例中所做的那样。

索引.js
const str = 'bobby,hadz,com';

const arr = str.split(',');
console.log(arr); // 👉️ [ 'bobby', 'hadz', 'com' ]

console.log(arr.at(0)); // 👉️ bobby
console.log(arr.at(1)); // 👉️ hadz

Array.at方法接受一个整数并返回该索引处的项目。

JavaScript 索引是从零开始的，因此数组中的第一个元素的索引为0，最后一个元素的索引为array.length - 1。

我们访问索引处的数组0以获取第一个数组元素。

该Array.at()方法允许正整数和负整数。

您可以使用负整数从数组末尾开始倒数。

索引.js
const str = 'bobby,hadz,com';

const arr = str.split(',');

console.log(arr.at(-1)); // 👉️ com
console.log(arr.at(-2)); // 👉️ hadz

console.log(arr.at(0)); // 👉️ bobby
console.log(arr.at(1)); // 👉️ hadz

例如，-1返回数组中的最后一个元素并-2返回倒数第二个元素。

拆分一个字符串并使用索引获取第一个或最后一个数组元素

这是一个三步过程：

  1. 使用该split()方法将字符串拆分为数组。
  2. 访问索引处的数组元素0以获取第一个数组元素。
  3. 访问索引处的数组元素array.length - 1以获取最后一个数组元素。
索引.js
// ✅ split a string and get the First array element
const str = 'bobby,hadz,com';

const firstElement = str.split(',')[0];
console.log(firstElement); // 👉️ bobby

0拆分字符串后，我们使用括号表示法访问索引处的数组元素。

这是一个拆分字符串并使用索引获取最后一个数组元素的示例。

const str = 'bobby,hadz,com';

const arr = str.split(',');
console.log(arr); // 👉️ [ 'bobby', 'hadz', 'com' ]

const lastElement = arr[arr.length - 1];
console.log(lastElement); // 👉️ com

我们像在前面的示例中所做的那样将字符串拆分为一个数组，并在索引处访问数组array.length - 1以获取最后一个元素。

拆分一个字符串并使用获取第一个或最后一个数组元素slice()

您还可以使用该Array.slice()方法在拆分字符串后获取第一个或最后一个数组元素。

索引.js
// ✅ split a string and get the First array element
const str = 'bobby,hadz,com';

const firstElement = str.split(',').slice(0, 1)[0];
console.log(firstElement); // 👉️ bobby

下面是使用该方法获取拆分后最后一个数组元素的示例。

索引.js
// ✅ split a string and get the Last array element
const str = 'bobby,hadz,com';

const lastElement = str.split(',').slice(-1)[0];
console.log(lastElement); // com

Array.slice方法返回数组一部分的副本。

该方法采用以下 2 个参数：

姓名 描述
起始索引 要包含在返回数组中的第一个元素的索引
结束索引 要从返回的数组中排除的第一个元素的索引

我们使用 的起始索引0和 的停止索引1来获取仅包含原始数组第一个元素的新数组。

索引.js
const str = 'bobby,hadz,com';

// 👇️ [ 'bobby' ]
console.log(str.split(',').slice(0, 1));

最后一步是访问索引处的数组0以获取字符串。

索引.js
const str = 'bobby,hadz,com';

// 👇️ 'bobby'
console.log(str.split(',').slice(0, 1)[0]);

该Array.slice()方法可以通过负索引来倒数。

索引.js
const str = 'bobby,hadz,com';

const arr = str.split(',');
console.log(arr); // 👉️ [ 'bobby', 'hadz', 'com' ]

console.log(arr.slice(-1)); // 👉️ [ 'com' ]
console.log(arr.slice(-2)); // 👉️ [ 'hadz', 'com' ]

A start index of -1 means start at the last array element.

The last step is to access the array at index 0 to get the actual value.

# Split a String and get the Last Array Element using regex

If you need to use the split() method with multiple separators, pass a regular
expression to the method.

The following example splits on every space or underscore.

index.js
const str = 'bobby hadz_com';

// 👇️ [ 'bobby', 'hadz', 'com' ]
console.log(str.split(/[\s_]+/));

const lastElement = str.split(/[\s_]+/).pop();
console.log(lastElement); // 👉️ com

The square brackets [] part is called a character class and matches either one
of the characters between the brackets.

The plus + matches the preceding item (space or underscore) 1 or more
times.

We used the plus + because we consider one or more spaces or underscores next
to one another a single match.

# Additional Resources

You can learn more about the related topics by checking out the following
tutorials: