thinking

[xlearns]

什么是工程师，什么是架构师

• 对系统的驾驭边界
  • 高级架构师，边界应该是领域

如何判断两个数组是否相等

function arraysAreEqual(arr1, arr2) {
  // 比较数组长度
  if (arr1.length !== arr2.length) {
    return false;
  }

  // 比较数组元素
  return arr1.every((element, index) => element === arr2[index]);
}

// 示例用法
const array1 = [1, 2, 3];
const array2 = [1, 2, 3];
const array3 = [1, 2, 4];

console.log(arraysAreEqual(array1, array2)); // 输出: true
console.log(arraysAreEqual(array1, array3)); 输出: false

如何判断两个对象是否相等

const objEqual = (obj1, obj2) => {
  const keysArr1 = Object.keys(obj1);
  const keysArr2 = Object.keys(obj2);
  if (keysArr1.length !== keysArr2.length) return false;
  else if (keysArr1.length === 0 && keysArr2.length === 0) return true;
  /* eslint-disable-next-line */ else return !keysArr1.some((key) => obj1[key] != obj2[key]);
};

Array2Tree

Tree2Array

Flat2Nested

Nested2Flat

function flattenData(data, parent = null) {
  let result = [];

  if (data.id) {
    result.push({ id: data.id, parent });
  }

  if (data.children && data.children.length > 0) {
    for (let child of data.children) {
      result = result.concat(flattenData(child, data.id));
    }
  }

  return result;
}

const input = {
  id: 1,
  children: [
    {
      id: 11,
      children: [
        {
          id: 111
        }
      ]
    },
    {
      id: 12
    }
  ]
};

const output = flattenData(input);
console.log(output);

Tree Crud

拦截String

String.prototype.fn = function(){
   return this.toString()
}

拦截Array

Array.prototype.fn = function(){
   return this
}

拦截Class

ClassName.prototype.fn = function(){
   return xx
}

对一颗Tree进行CRUD操作

• first
• all
• path
• add
• drop

  实现一个健壮的深拷贝

框架

什么是组件

• 组件说白了也就是将一部分的HTML+CSS+Javascript 代码组合成一个可复用、更简洁表达的代码片段。简单来说，组件可以扩展 HTML 元素，封装可重用的代码。

• Vue Web Component 的定义

  • 是一组 web 原生 API 的统称，允许开发者创建可复用的自定义元素 (custom elements)

• MDN Web Component 的定义