JS 更改树状数据的几种方式

示例数据

let testData = [
  {
    id: 1,
    children: [
      {
        id: 2,
        children: [
          {
            id: 3,
            children: [
              {
                id: 4,
              },
              {
                id: 5,
              },
            ],
          },
        ],
      },
    ],
  },
];

期望更改树状数据中的 children 为 erzi，或者访问 erzi 能够获取到 children

递归

检测对象的方式用 prop in object

function testIn(params) {
  for (let index = 0; index < params.length; index++) {
    const element = params[index];
    if (
      Object.prototype.toString.call(element) === '[object Object]' &&
      'children' in element
    ) {
      element.erzi = testIn(element.children);
    }
  }
  return params;
}

检测对象的方式用 Object.prototype.hasOwnProperty

function testHasOwnProperty(params) {
  for (let index = 0; index < params.length; index++) {
    const element = params[index];
    if (
      Object.prototype.toString.call(element) === '[object Object]' &&
      Object.prototype.hasOwnProperty('element')
    ) {
      element.erzi = testHasOwnProperty(element.children);
    }
  }
  return params;
}

这个情况下 Object.prototype.hasOwnProperty 方法比 prop in object 更快，基准测试中 hasOwnProperty 比 in 快 3 倍

JSON.stringify 的递归特性

function testJSONStringify(params) {
  JSON.stringify(params, (k, v) => {
    if (
      Object.prototype.toString.call(v) === '[object Object]' &&
      'children' in v
    ) {
      const c = v.children;
      v.erzi = c;
    }
    return v;
  });
  return params
}

使用 Proxy

function testProxy(params) {
  const handler = {
    get: function (target, key) {
      if (typeof target[key] === 'object' && target[key] !== null) {
        const newObj = new Proxy(target[key], handler)
        return newObj
      } else {
        if (key === 'erzi') {
          if (typeof target.children === 'object' && target.children !== null) {
            return new Proxy(target.children, handler)
          }
        }
        return target[key]
      }
    },
  };
  return new Proxy(params, handler);
}

基准测试结果

testIn x 20,683,532 ops/sec ±0.32% (67 runs sampled)
testHasOwnProperty x 51,614,627 ops/sec ±0.66% (66 runs sampled)
testJSONStringify x 220,394 ops/sec ±0.50% (66 runs sampled)
testProxy x 2,274,395 ops/sec ±0.38% (67 runs sampled)
html.js:122 Fastest is testHasOwnProperty

其中 testHasOwnProperty 方法最快，testJSONStringify 方法比较慢，差了 100 倍的差距