30秒学会 JavaScript 片段 · 2023年3月2日

30秒学会 JavaScript 片段 – Negative index in JavaScript array

Array.prototype.slice() provides an easy way to access elements from the end of an array, using a negative start value. While this sounds convenient, the resulting value is an array, so it’s necessary to use an index to get an individual element.

This is usually not too bad, but it’s interesting to explore other options to understand the language better. In this case, we can use a Proxy object to allow accessing data in an array using negative indexes. To do so, an appropriate handler needs to be defined for the get trap.

The trap’s second argument corresponds to the passed index, however it’s a string, so it must first be converted to a number using Number(). Then, Array.prototype.length can be used to calculate the position of the actual element. Finally, Reflect.get() can be used to get the value at the specific index, but expects its second argument to be a string.

Putting everything together, this is what this looks like:

代码实现

const handler = {
  get(target, key, receiver) {
    const index = Number(key);
    const prop = index < 0 ? `${target.length + index}` : key;
    return Reflect.get(target, prop, receiver);
  },
};

const createArray = (...elements) => {
  const arr = [...elements];
  return new Proxy(arr, handler);
};

let arr = createArray('a', 'b', 'c');

arr[-1]; // 'c'
arr[-1]; // 'b'

翻译自:https://www.30secondsofcode.org/js/s/proxy-array-negative-index