【ES6】- at()方法

71 阅读 0 评论 47 点赞

我是靠谱客的博主彪壮项链，最近开发中收集的这篇文章主要介绍【ES6】- at()方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

        长久以来，JavaScript 不支持数组的负索引，如果要引用数组的最后一个成员，不能写成arr[-1]，只能使用arr[arr.length - 1]。

        这是因为方括号运算符[]在 JavaScript 语言里面，不仅用于数组，还用于对象。对于对象来说，方括号里面就是键名，比如obj[1]引用的是键名为字符串1的键，同理obj[-1]引用的是键名为字符串-1的键。由于 JavaScript 的数组是特殊的对象，所以方括号里面的负数无法再有其他语义了，也就是说，不可能添加新语法来支持负索引。

        为了解决这个问题，现在有一个提案，为数组实例增加了at()方法，接受一个整数作为参数，返回对应位置的成员，支持负索引。这个方法不仅可用于数组，也可用于字符串和类型数组。

 const arr = [5, 12, 8, 130, 44];
 arr.at(2) // 8
 arr.at(-2) // 130

如果参数位置超出了数组范围，at()返回undefined。

slice()、charAt() VS at()

ES5 对字符串对象提供charAt()方法，返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符。


'abc'.charAt(0) // "a"
'?'.charAt(0) // "uD842"

上面代码中，charAt()方法返回的是 UTF-16 编码的第一个字节，实际上是无法显示的。

目前，有一个提案，提出字符串实例的at()方法，可以识别 Unicode 编号大于0xFFFF的字符，返回正确的字符。

'abc'.at(0) // "a"
'?'.at(0) // "?"

slice 也可以查询数组里的值，但是返回的是一个数组，则就需要slice()后面加上 [0]这样虽然也可以，但是本人对于这个就感觉有点繁琐，而ES6提供了at() 方便我们更快的寻找到对应的数据

let arr = [1, 56, 4, 89, 97, 2]
let obj = { name: 'jack', age: 20 }
let data = [
{ name: 'jack', age: 20 },
{ name: 'rose', age: 18 }
]
// console.log(arr.at(-1));
// 2
// console.log(data.slice(-1)[0].name);
// rose
console.log(data.at(-1).name);
// rose