金山云 | 前端校招一面（录屏复盘）

1. Flex 布局中父容器属性和子元素属性分别有哪些？

2. 分析以下代码的执行结果：

var x = 4, y = 5;
{
  let x = 1;
  const y = 2;
}
console.log(x, y);

3. 分析以下浅拷贝代码执行后 original 和 newOne 的属性变化：

const original = {
  name: '小张',
  age: 20,
  address: { city: '武汉', street: '武昌' }
};
const newOne = { ...original };
newOne.name = '小李';
newOne.age = 30;
newOne.address.city = '武汉';

4. 分析以下数组对象浅拷贝代码执行后 baseList[0].value、backup1[0].value、backup2[0].value、backup3[0].value 的值：

const baseList = [{ value: 'old' }];
const backup1 = baseList.map(item => ({ ...item }));
const backup2 = [...baseList];
const backup3 = baseList.map(r => r);

backup1[0].value = 'changed1';
backup2[0].value = 'changed2';
backup3[0].value = 'changed3';

5. 分析以下闭包累加器代码的执行结果：

function createAccumulator(initialValue) {
  let sum = initialValue || 0;
  return function(addValue) {
    if (addValue === undefined) return sum;
    sum += addValue;
    return sum;
  };
}
const totalA = createAccumulator(10);
console.log('A1', totalA(5));
console.log('A2', totalA(2));
console.log('A3', totalA());
console.log('A4', totalA(3));

6. JS 事件循环的执行顺序是什么？

7. 分析以下事件循环代码的执行输出顺序：

console.log('script start');
async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}
async function async2() {
  console.log('async2');
}

Promise.resolve().then(() => {
  console.log('promise then1');
  setTimeout(() => {
    console.log('promise then1 setTimeout');
  });
});
setTimeout(() => {
  console.log('settimeout');
});

async1();
console.log('script end');

8. 分析以下完整版事件循环代码的执行输出顺序：

new Promise((resolve) => {
  console.log('promise1');
  resolve();
  console.log('promise1 end');
}).then(() => {
  console.log('promise2');
});
console.log('script start');
Promise.resolve().then(() => {
  console.log('promise then1');
  setTimeout(() => {
    console.log('promise then1 setTimeout');
  });
});
setTimeout(() => {
  console.log('settimeout');
});
async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}
async function async2() {
  console.log('async2');
}
async1();
console.log('script end');

9. Promise 与 async/await 的关系、写法、异常捕获方式分别是什么？

10. Vue3 中 ref 和 reactive 的区别是什么？

11. 封装过哪些自定义 Hooks？

12. Webpack 和 Vite 的区别是什么？

13. 有哪些打包体积和首屏优化的方法？

14. 拆包为什么能提升首屏速度？

15. Git 常用命令有哪些？