新技术篇 - Array.prototype.at()函数

Posted 2021-09-03 前端学长Joshua

<!-- TOC -->

• 相对索引方法之.at函数
• 对字符串的补充
• 参考：

• 社交信息 / Social Links:

  • (Welcome to pay attention, 欢迎关注)

<!-- /TOC -->

Array.prototype 上的新的新方法 --- at 函数，可以让我们更加方便的访问到数组 和 字符串末尾的元素。

在实际开发中，我经常需要去访问到数组或者是字符串中末尾的某个元素的。

但是吧，通常使用的法子不是很好的，比如 my_array[my_array.length - N]。

或者是

使用可能没有什么性能的操作，比如 my_array.slice(-N)[0]。

使用这个新的函数方法 .at() ,它更加符合我们人自身的常规思考。它是这样的，它将负指数解释为“从最后”。

什么意思呢？

就是，参数是负数，就表示倒数第几个; 正数就表示正数第几个，相当于普通的属性访问。

前面的示例可以表示为 my_array.at(-N)。

比如：

var arr = [1, 2, 5, 9, 78]

// 第0个
console.log(arr.at(0)) // 1

// 正数第一个
console.log(arr.at(1)) // 2

// 倒数第一个
console.log(arr.at(-1)) // 78

// 倒数第二个
console.log(arr.at(-2)) // 9

是不是很符合我们的思考逻辑呢？

这个新方法足够小，它的完整语义可以被下面这个兼容的 polyfill 实现理解：

function at(n) {
  // Convert the argument to an integer
  n = Math.trunc(n) || 0; // 去掉小数点
  // Allow negative indexing from the end
  if (n < 0) n += this.length;
  // Out-of-bounds access returns undefined
  if (n < 0 || n >= this.length) return undefined;
  // Otherwise, this is just normal property access
  return this[n];
}

对字符串的补充

由于 at 最终执行普通索引，因此在字符串值上调用 at 会返回对应索引的字符。 就像字符串上的普通索引一样，这返回的字符可能不是您想要的 Unicode 字符！ 请考虑 String.prototype.codePointAt() 是否更适合您的用例。

使用 codePointAt():

\'ABC\'.codePointAt(1);          // 66
\'\\uD800\\uDC00\'.codePointAt(0); // 65536

\'XYZ\'.codePointAt(42); // undefined

动下小手

• 欢迎关注我的GitHub：@huangyangquang ⭐⭐
• 欢迎关注我的公众号：前端学长Joshua