告别 length-1！用 at() 和 with() 让你的 JS 数组操作更优雅

js
发布日期:   2025-03-28
更新日期:   2025-04-01
文章字数:   603
阅读时长:   2 分

Array.prototype.at()

at() 方法接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组的最后一个元素开始倒数。

语法

1
at(index)
  • index：要返回的数组元素的索引（从零开始），会被转换为整数
  • 特性：负数索引从数组末尾开始计数（当 index < 0 时，实际访问 index + array.length 位置的元素）

使用示例

1
2
3
const arr = ["红", "橙", "黄", "绿", "青", "蓝", "紫"];
arr.at(0);  // "红"
arr.at(-1); // "紫"

与传统写法的比较

1
2
3
4
5
6
7
// 传统写法
arr[0];           // "红"
arr[arr.length - 1]; // "紫"

// at() 写法
arr.at(0);        // "红"
arr.at(-1);       // "紫"

优势：

  • 我们从数组末尾获取的话，会更简洁直观
  • 更高的可读性
  • 链式调用更方便

兼容性

大部分浏览器都支持该方法了，可以放心使用。

Array.prototype.with()

方法说明

with() 是 ECMAScript 2022 新增的数组方法，用于返回一个新数组（不修改原数组），在指定索引位置替换为新值。

语法

1
array.with(index, value)
  • 参数：
    • index：要替换的元素的索引
    • value：要放入指定索引的新值
  • 返回值：包含替换后值的新数组

使用示例

1
2
3
4
const arr = ["红", "橙", "黄", "绿", "青", "蓝", "紫"];
console.log(arr.with(0, "白"));  // ['白', '橙', '黄', '绿', '青', '蓝', '紫']
console.log(arr.with(-1, "黑")); // ['红', '橙', '黄', '绿', '青', '蓝', '黑']
console.log(arr);               // 原数组保持不变 ['红', '橙', '黄', '绿', '青', '蓝', '紫']

与 splice() 的比较

1
2
3
4
5
6
7
// splice 示例
const arr = ["红", "橙", "黄", "绿", "青", "蓝", "紫"];
arr.splice(0, 1, "白", "黑");
console.log(arr); // ['白', '黑', '橙', '黄', '绿', '青', '蓝', '紫']

// with() 示例
const newArr = arr.with(0, "白");
主要区别：
特性 with() splice()
修改方式 返回新数组（不可变） 直接修改原数组
功能 仅替换元素 可添加/删除元素
参数复杂度 简单（索引+值） 复杂（起始位置、删除数量、新增元素）
适用场景 需要保留原数组的情况 需要直接修改数组的情况

兼容性

MDN上这么描述的“Since July 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.”
也就是说当前可以在较新的浏览器上使用。

张鑫旭前辈也说了。在目前的Web开发建议中，数组读取使用at()方法，写值使用with()，相得益彰。

ok，今天的学习分享就到这了。

我的微信公众号： 梨的前端小屋

js
赏
  目录