迹忆客 专注技术分享

当前位置:主页 > 学无止境 > 编程语言 >

在 TypeScript 中获取数组的最后一个元素

作者:迹忆客 最近更新:2022/11/21 浏览次数:

使用 Array.at() 方法获取 TypeScript 中数组的最后一个元素,例如 const last = arr.at(-1)。 当传递一个负索引时,at() 方法通过从数组末尾倒数返回一个元素。

const arr: string[] = ['a', 'b', 'c'];

// 👇️ const lastAgain: string | undefined
const last = arr.at(-1);
console.log(last); // 👉️ "c"

if (last !== undefined) {
  console.log(last.toUpperCase()); // 👉️ "C"
}

// 👇️ Or use optional chaining
console.log(last?.toUpperCase()); // 👉️ "C"

我们使用 Array.at() 方法来获取 TypeScript 中数组的最后一个元素。

该方法采用的唯一参数是要返回的数组元素的索引。

当传递一个负索引时,该方法通过从数组末尾倒数返回一个元素。

at() 方法返回数组中与提供的索引匹配的元素,如果找不到给定的索引,则返回 undefined

请注意 ,TypeScript 将最后一个变量类型为字符串或未定义。

这是准确的,因为如果数组为空,则返回值将是 undefined

const arr: string[] = [];

// 👇️ const lastAgain: string | undefined
const last = arr.at(-1);
console.log(last); // 👉️ undefined

if (last !== undefined) {
  console.log(last.toUpperCase());
}

// 👇️ Or use optional chaining
console.log(last?.toUpperCase()); // 👉️ undefined

我们可以通过使用简单的类型保护来绕过可能未定义的值。

if 语句和可选的链接 ?. 运算符用作类型保护并排除值未定义的可能性,这使我们能够使用特定于类型的内置方法。

或者,我们可以访问最后一个索引处的数组元素。

要在 TypeScript 中获取数组的最后一个元素,请访问索引为 array.length - 1 的数组,例如 const last = arr[arr.length - 1]。 计算结果为数组中最后一个元素的索引。

const arr: string[] = ['a', 'b', 'c'];

// 👇️ const last: string
const last = arr[arr.length - 1];
console.log(last); // 👉️ "c"

if (last !== undefined) {
  console.log(last.toUpperCase());
}

console.log(last?.toUpperCase());

索引在 JavaScript 中是从零开始的。 这就是为什么我们必须从数组的长度中减去 1 以获得数组中最后一个元素的索引。

请注意 ,最后一个变量的类型为字符串,这可能不是您想要的,因为如果数组为空怎么办。

const arr: string[] = [];

// 👇️ const last: string
const last = arr[arr.length - 1];
console.log(last); // 👉️ undefined

即使数组为空,最后一个变量在 TypeScript 中被键入为字符串。

这可能不是我们想要的,因为如果访问一个属性或对一个未定义的值调用一个方法,我们会得到一个错误。

const arr: string[] = [];

// 👇️ const last: string
const last = arr[arr.length - 1];
console.log(last); // 👉️ undefined

// ⛔️ Cannot read properties of undefined (reading 'toUpperCase')
console.log(last.toUpperCase());

typescript Cannot read properties of undefined

我们可以使用类型保护来解决这个问题。

const arr: string[] = [];

// 👇️ const last: string
const last = arr[arr.length - 1];

if (last !== undefined) {
  console.log(last.toUpperCase());
}

// 👇️ Or use optional chaining
console.log(last?.toUpperCase()); // 👉️ undefined

我们的 if 条件在调用 toUpperCase() 方法之前显式检查最后一个变量是否存储未定义。

我们可以确定最后一个变量在 if 块中存储了一个字符串。

或者,我们可以使用可选的链接 ?. 运算符,如果引用未定义或为空,它会短路而不是抛出错误。

本站文章均为原创或翻译,转载请发邮件至 1244347461@qq.com 进行申请,未经许可,禁止转载。经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便