前端面试之代码输出结果(四)

这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战。

Proxy对数组

var arr = new Proxy([], {
  get: function(obj, prop) {
    return obj[prop] += 1;
  },
  set: function(obj, prop, value) {
    obj[prop] = value + 1
    return true;
  },
});
arr[0] = 0;
console.log(`arr.length = ${arr.length}`)
console.log(`arr.length = ${arr.length}`)
console.log(`arr.length = ${arr.length}`)
arr[1] = 1;
console.log(`arr.length = ${arr.length}`)

答案：2,3,4,5

说明

// 初始化一个代理数组 arr
// 默认 arr = []
var arr = new Proxy([], {
  get: function(obj, prop) {
    // 获取数组arr的属性时候 直接 +1
    return obj[prop] += 1;
  },
  set: function(obj, prop, value) {
    // 设置数组arr的属性时候 直接 +1
    obj[prop] = value + 1
    return true;
  },
});
arr[0] = 0; // 此时 arr.length
// 读取 arr 属性 length 时候，前面代理会被加 1
// 此时会输出 arr.length = 2, arr=[1, null]
console.log(`arr.len = ${arr.length}`)
// 再次 读取 arr.length 此时会+1, 输出 arr.length = 3, arr=[1, null, null]
console.log(`arr.len = ${arr.length}`)
// 再次 读取 arr.length 此时会+1, 输出 arr.length = 4, arr=[1, null, null, null]
console.log(`arr.len = ${arr.length}`)
// 设置数组 arr[1] = 1, arr=[1, 2, null, null]
arr[1] = 1; 
// 再次读取 arr.length, 此时会+1 将污染成 [1, 2, null, null, null]
console.log(`arr.len = ${arr.length}`)

JS对象和数组属性

// 执行以下代码， 会输出什么结果
var arr = ['a', 'b', 'c', 'd'];
var obj = { a: 1, b: 2, c: 3, d: 4 };


var arrProperties = Object.getOwnPropertyNames(arr);
var objProperties = Object.getOwnPropertyNames(obj)


console.log(arrProperties.length === objProperties.length)

答案:false

说明

• Object.getOwnPropertyNames 可以获取对象的属性和原生内置属性
• 数组对象是有length原生内置属性
• Object.getOwnPropertyNames(arr) = ["0", "1", "2", "3", "length"]
• Object.getOwnPropertyNames(obj) = ["a", "b", "c", "d"]

数组的filter

// 执行以下代码， 会输出什么结果
var arr = [0, 1];
arr[4] = 5;
arr[5] = 6;
var arr2 = arr.filter((i) => {
  return i;
})
console.log(arr.length);
console.log(arr2.length);

答案：6和3

说明

• filter 会遍历数组内容，并且在回调参数传入遍历数组的元素
• filter 回调函数的返回值为会创建新数组
• 数组中被删除的或者从未被赋值的索引不会被调用

console.log(arr) //[ 0, 1, <2 empty items>, 5, 6 ],所以arr的长度为6
console.log(arr2) //[ 1, 5, 6 ]，所以arr2的长度为3