如何获取数组的最后一个元素并将其保存到变量中

现有代码问题 #

• 变量名拼写错误：初始声明的变量为personersonId2，后续赋值用的是personId2，二者不匹配
• 未正确指定length属性所属对象：this.personArray[length]中的length未绑定到数组实例，会抛出未定义错误
• 循环逻辑错误：循环终止条件为personId < this.personArray.length - 1，只会遍历到倒数第二个元素，无法取到最后一位
• 数组结构错误：直接将多选框返回的数组整体push进personArray，会形成二维数组，无法直接拿到单个id值

正确实现代码 #

你完全不需要写循环来获取数组最后一个元素，直接通过数组下标即可实现：

场景1：仅需要获取本次多选结果的最后一个元素

// 先获取多选框的返回值
const selectValue = this.form.controls.multiSelectBox.value
// 下标取最后一位，空数组时默认返回0，可根据需求调整默认值
const personId2 = selectValue.length > 0 ? selectValue[selectValue.length - 1] : 0

如果你的运行环境支持ES2022及以上语法，可以用更简洁的at()方法：

// at(-1)直接返回数组最后一位，空数组返回undefined，通过??指定兜底默认值
const personId2 = selectValue.at(-1) ?? 0

场景2：需要先存储每次的多选结果，再取最后一次选择的最后一个id

// 存储本次多选结果
this.personArray.push(this.form.controls.multiSelectBox.value)
// 先取最后一次的选择数组，再取该数组的最后一位
const lastSelectRecord = this.personArray.at(-1) ?? []
const personId2 = lastSelectRecord.at(-1) ?? 0

内容的提问来源于stack exchange，提问作者natyus