在 flex 弹性布局中, 可以通过设置容器的 flex-direction 属性更改主轴的方向，当主轴方向为 column 的时候，通过设置 justify-content: center 和 align-items: flex-end 来达到垂直居中且靠右的排列效果。如果需要改变项目的排列顺序时，可以设置项目的 flex-direction: column-reverse 或 row-reverse 属性

以下代码的输出结果

setTimeout(function() {
  console.log(1);
});
new Promise(function(resolve) {
  console.log(2);
  for (var i = 0; i < 10000; i++) {
    if (i == 9999) {
      resolve();
    }
  }
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);

// 23541

关于一个对象 obj 到底包含多少个属性，下面三个 API 检测结果可能不完全一致，加入他们返回的属性个数从大到小排列，恒成立的选项是哪个？

Reflect.ownKeys(obj).length >= Object.getOwnPropertyNames(obj).length >= Object.keys(obj).length

var parent = {};
Object.defineProperty(parent, "a", {
  value: "aaa",
  writable: true,
  enumerable: true,
  configurable: true,
});
Object.defineProperty(parent, "b", {
  value: "bbb",
  writable: true,
  enumerable: false, // 不可枚举
  configurable: true,
});
parent.c = Symbol("ccc");
var d = Symbol("d");
parent[d] = d;
console.log(parent);

var child = {};
Object.defineProperties(child, {
  e: {
    value: "eee",
    wriable: true,
    enumerable: true,
    configurable: true,
  },
  f: {
    value: "fff",
    writable: true,
    enumerable: false, // 不可枚举
    configurable: true,
  },
});
child.g = Symbol("ggg");
var h = Symbol("hhh");
child[h] = h;
console.log(child);
// 让child继承parent
child.__proto__ = parent;
console.log(child);

// 区别
//1. for in  循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）
for (const key in child) {
  console.log(key);
}
//2. Object.keys  返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）
console.log("Object.keys", Object.keys(child));
//3. Object.getOwnPropertyNames  返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举属性）
console.log("Object.getOwnPropertyNames", Object.getOwnPropertyNames(child));
//4. Object.getOwnPropertySymbols  返回一个数组，包含对象自身的所有Symbol属性
console.log(Object.getOwnPropertySymbols(child));
//5. Reflect.ownKeys  返回一个数组，包含对象自身的所有属性，不管是属性名是Symbol或字符串，也不管是否可枚举
console.log("Reflect.ownKeys", Reflect.ownKeys(child));

webpack 中如何指定 chunk name?

1. 在 webpack 配置文件中的 output 中添加 chunkFilename,[name]就是文件名
2. 在动态 import()代码处添加 webpackChunkName 告诉 webpack 打包后的 chunk 的名称，一定要写注释
3. 大多数情况下我们使用动态 import()是通过循环来做的，这样我们就带引入变量[request]来告诉 webpack，这里的值是根据后面传入的字符串来决定的

https://www.jianshu.com/p/2e127f1eab9f (opens new window)

es6 中的 Proxy 被认为是个神器，利用它可以实现很多以前只有魔改 js 引擎底层才能实现的效果(A、B)

A. 原型就是自己的对象——Object.getPrototypeOf(obj) === Obj // true

B. 任意属性都存在的对象——“任意名字的属性” in Obj // true

C. 任意值都是他的实例的对象，甚至 null 和 undefined——undefinded instanceof obj // true

D. 用 Object.prototype.toString()检测出来的对象类型是 haha 对象——Object.prototype.toString.call(obj) === "[object haha]" // true

E. 一元加后的值与加 0 后的值分别恒等于两个不同的数字——比如+obj 始终 === 1 ，但 obj + 0 始终等于 === 10

请简述 CSRF 的攻击步骤

写一个函数，将以下数据结构转换成树形结构对象

// 目标数组
var arr = [
  { id: 3, parent: 2 },
  { id: 1, parent: null },
  { id: 2, parent: 1 },
];

// 期望结果
var obj = {
  id: 1,
  parent: null,
  child: {
    id: 2,
    parent: 1,
    child: {
      id: 3,
      parent: 2,
    },
  },
};

function transformListToTree(list) {
  // 链表
  let temp = {};
  let root;
  list.map((item) => {
    if (item.parent === null) root = item;
    temp[item.id] = item;
  });
  list.map((item) => {
    if (temp[item.parent]) {
      temp[item.parent].child = item;
    }
  });
  return root;
  // 找爸爸
  function findbaba(child) {
    list.map((item) => {
      if (item.id === child.parent) {
        item.child = child;
      }
    });
  }
  list.map((item) => {
    if (item.parent) {
      findbaba(item);
    }
  });
  return list.find((item) => item.parent === null);
  // 找儿子
  const rec = (list) => {
    list.map((parent) => {
      list.map((item) => {
        if (parent.id === item.parent) {
          parent.child = item;
        }
      });
      if (parent.child) {
        rec([parent.child]);
      }
    });
  };
  rec(list);
  return list.find((item) => item.parent === null);
}

React 生命周期

setData

js 为什么是单线程的

https://blog.shenzjd.com/pages/6c3a148245a27/#为什么会出现事件循环 (opens new window)

事件循环

https://blog.shenzjd.com/pages/6c3a148245a27/ (opens new window)