揭开前端面试之代码输出结果的迷雾（四）

2024-01-28 19:59:28

作为一个经验丰富的技术博客作者，我很高兴与大家分享我在前端面试中代码输出结果领域的独到见解。在第四部分中，我们将深入探讨代理（proxy）如何处理数组，以及 JavaScript 对象和数组属性的细微差别。准备好踏上一个启发性的旅程，探索这些概念如何影响代码输出结果。

代理（Proxy）对数组的影响

代理是一个 JavaScript 对象，它可以拦截对另一个对象的操作，并根据需要对其进行修改或扩展。当代理与数组一起使用时，它可以让我们在访问或修改数组元素时执行自定义逻辑。

例如，我们可以创建一个代理来记录每次访问数组元素的时间：

const arr = [1, 2, 3];
const proxy = new Proxy(arr, {
  get: (target, prop) => {
    console.log(`Accessing element at index ${prop}`);
    return target[prop];
  }
});

当我们访问代理数组中的一个元素时，代理将拦截该访问并记录时间：

console.log(proxy[1]); // 输出：Accessing element at index 1

代理还可以用来验证或转换数组元素。例如，我们可以创建一个代理来确保数组中的所有元素都是数字：

const proxy = new Proxy(arr, {
  set: (target, prop, value) => {
    if (typeof value !== 'number') {
      throw new Error('Invalid value: must be a number');
    }
    target[prop] = value;
  }
});

JavaScript 对象和数组属性的细微差别

JavaScript 对象和数组具有不同的属性类型。对象属性是键值对，而数组元素是按索引访问的。这会导致代码输出结果的细微差别。

例如，Object.keys() 方法返回对象中所有可枚举键的数组，而 Array.prototype.keys() 方法返回数组中元素的遍历器对象。

const obj = { a: 1, b: 2 };
const arr = [1, 2, 3];

console.log(Object.keys(obj)); // 输出：["a", "b"]
console.log(Array.prototype.keys(arr)); // 输出：Array Iterator {}

另一个区别是 Object.getOwnPropertyNames() 方法，它返回对象的所有属性，包括不可枚举属性。而 Object.keys() 方法只返回可枚举属性。

const obj = Object.create({}, {
  a: {
    value: 1,
    enumerable: false
  }
});

console.log(Object.getOwnPropertyNames(obj)); // 输出：["a"]
console.log(Object.keys(obj)); // 输出：[]