工作经验半年，第一次参加社招，滴滴，高级前端工程师,历经一个小时 主打就是简洁

js数据类型

我的答案

number, string ,null ,undefined ,symbol，boolean

GPT 回答

在 JavaScript 中，数据类型主要分为以下几种：

基本数据类型（原始类型）：
- 数值（Number）：例如，42, 3.14 等。
- 字符串（String）：例如，"Hello", 'World' 等。
- 布尔值（Boolean）：true 或 false。
- 空值（Null）：表示为空的特殊值。
- 未定义（Undefined）：表示变量未被赋值的特殊值。
引用数据类型（复杂类型）：
- 对象（Object）：如普通对象、数组、函数等。例如：{ name: 'John', age: 30 }。
- 数组（Array）：例如，[1, 2, 3]。
- 函数（Function）：例如，function add(a, b) { return a + b; }。
- 正则表达式（RegExp）：例如，/\d+/。
特殊类型：
- NaN（Not a Number）：表示非数值的特殊值，例如，0 / 0 的结果为 NaN。
- Infinity：表示正无穷大的特殊值，例如，1 / 0 的结果为 Infinity。
- -Infinity：表示负无穷大的特殊值，例如，-1 / 0 的结果为 -Infinity。

在 JavaScript 中，变量的类型是动态的，即在运行时可以改变变量的数据类型。这意味着同一个变量在不同的时间点可以保存不同类型的值。例如：

let age = 30; // age 是一个数值类型
age = "thirty"; // 现在 age 变成了一个字符串类型

这种动态类型特性是 JavaScript 的一个重要特点，也是需要谨慎使用的地方，因为在不注意的情况下可能会导致意外的结果或错误。

null与undefined的区别

我的答案

undefined是未定义的，null是后期致空的

GPT答案

null 和 undefined 是 JavaScript 中两个特殊的值，表示没有值或未定义的值。虽然它们有一些相似之处，但也有一些区别。

定义和类型：
- null：表示一个空值，是一个表示“空”的对象指针，它是一个对象类型。
- undefined：表示一个未定义的值，是一个原始类型。
赋值：
- null：通常由程序员显式地赋值给变量，表示故意让变量为空。
- undefined：在以下情况下，变量的值会自动变为 undefined：
  - 变量声明了但未赋值。
  - 访问对象属性或数组元素时，如果该属性或元素不存在。
  - 函数没有返回值时，默认返回 undefined。
类型判断：
- typeof null 的结果是 "object"，这是一个历史遗留问题，实际上 null 是一个原始类型。但是，由于历史原因，typeof null 返回的是 "object"。
- typeof undefined 的结果是 "undefined"，表示该变量未定义。
在条件判断中：
- null 在条件判断中会被认为是假值（false），即当出现在条件判断时，会被视为 false。
- undefined 在条件判断中也会被认为是假值（false），即当出现在条件判断时，会被视为 false。
用途：
- null 通常用于主动将变量设置为空，表示空值或占位符。
- undefined 通常表示变量未定义或者对象属性不存在等情况。

总结：null 和 undefined 都表示没有值，但是在使用时要根据具体场景来选择使用哪一个。如果需要明确表示一个空值，可以使用 null；如果变量未定义或者需要判断某个属性是否存在，可以使用 undefined。在条件判断时，它们都会被视为假值（false）。

判断null于undefinde的类型

我的答案

Object.prototype.toString.call()

GPT回答

在 JavaScript 中，我们可以使用 typeof 运算符来判断一个变量的类型，包括 null 和 undefined。typeof 运算符返回一个字符串，表示变量的类型。

const value1 = null;
const value2 = undefined;

console.log(typeof value1); // 输出 "object"
console.log(typeof value2); // 输出 "undefined"

需要注意的是，typeof null 的结果是 "object"，这是一个历史遗留问题，实际上 null 是一个原始类型，而不是对象。但由于历史原因，typeof null 返回的是 "object"。

对于 undefined，typeof 运算符会返回 "undefined"，表示该变量未定义。

在判断变量的类型时，可以根据 typeof 的返回值进行条件判断，例如：

const value = null;

if (typeof value === "object") {
  console.log("value is null");
} else if (typeof value === "undefined") {
  console.log("value is undefined");
} else {
  console.log("value is something else");
}

上述代码会输出 "value is null"，因为 value 的类型是 "object"，符合第一个条件。

手写es5的继承

我的答案

function Father(name) {
  this.name = name
}
Father.prototype.func = function(){
  console.log('Father')
}

function Son(name) {
  Father.call(this,name)
}
Son.prototype = Father.prototype
Son.prototype.contructor = Son

const son = new Son('father')

GPT回答

// 定义父类（基类）
function Parent(name) {
  this.name = name;
}

Parent.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

// 定义子类（派生类）
function Child(name, age) {
  // 调用父类构造函数，并设置子类的属性
  Parent.call(this, name);
  this.age = age;
}

// 将子类的原型设置为父类的实例，建立原型链
Child.prototype = Object.create(Parent.prototype);

// 设置子类的构造函数指向子类本身，否则会指向父类
Child.prototype.constructor = Child;

// 子类可以定义自己的方法
Child.prototype.sayAge = function() {
  console.log('I am ' + this.age + ' years old.');
};

// 创建子类的实例并调用方法
const child1 = new Child('Alice', 5);
child1.sayHello(); // 输出：Hello, my name is Alice
child1.sayAge();   // 输出：I am 5 years old.

创建对象的方式

我的答案

let obj = {} let obj = Object.create()

GPT回答

在 JavaScript 中，有多种方式可以创建对象。以下是一些常见的创建对象的方式：

对象字面量（Object Literal）：使用花括号 {} 来直接创建一个对象，并在花括号中定义属性和属性值。

   const person = {
     name: 'John',
     age: 30,
     gender: 'male'
   };

构造函数（Constructor）：使用构造函数来创建对象，通过 new 关键字实例化构造函数，并给属性赋值。

   function Person(name, age, gender) {
     this.name = name;
     this.age = age;
     this.gender = gender;
   }
   
   const person = new Person('John', 30, 'male');

Object.create() 方法：使用 Object.create() 方法可以创建一个新对象，并指定新对象的原型。

   const personProto = {
     sayHello() {
       console.log('Hello, my name is ' + this.name);
     }
   };
   
   const person = Object.create(personProto);
   person.name = 'John';
   person.age = 30;
   person.gender = 'male';

工厂函数（Factory Function）：使用工厂函数返回一个新的对象，这样可以封装对象的创建逻辑。

   function createPerson(name, age, gender) {
     return {
       name: name,
       age: age,
       gender: gender
     };
   }
   
   const person = createPerson('John', 30, 'male');

ES6 的 class 语法：使用 class 语法定义一个类，并通过 new 关键字实例化类创建对象。

   class Person {
     constructor(name, age, gender) {
       this.name = name;
       this.age = age;
       this.gender = gender;
     }
   }
   
   const person = new Person('John', 30, 'male');

手写new的实现

我的答案

function myNew(fn) {
  const obj = {}
  obj.__proto__ = fn.prototype
  fn.apply(this)
  if (typeof fn === 'object') {
    return fn
  }
  return obj
}

网上答案

function myNew(fn,...arg) {
  let obj = {};
  obj.__proto__ = fn.prototype;
  let res = fn.apply(this,arg);
  return res instanceof Object ? res : obj;
}

typeof 判断数据类型原理

我的答案

只能判断基础类型的，对于引用的对象，除了Function，其他都是object

GPT回答

typeof 是 JavaScript 中的一个运算符，用于判断一个值的数据类型。它返回一个表示值的数据类型的字符串。

typeof 运算符的原理如下：

如果值是 undefined，则返回字符串 "undefined"。
如果值是 null，则返回字符串 "object"。这是一个历史遗留问题，实际上 null 是一个原始类型，但由于历史原因，typeof null 返回的是 "object"。
如果值是布尔值（true 或 false），则返回字符串 "boolean"。
如果值是一个数值，无论是整数还是浮点数，都返回字符串 "number"。
如果值是一个字符串，返回字符串 "string"。
如果值是一个 Symbol（ES6 引入的数据类型），返回字符串 "symbol"。
如果值是一个函数，返回字符串 "function"。
如果值是一个对象或数组，返回字符串 "object"。

需要注意的是，typeof 运算符对于对象和数组返回的都是 "object"，无法区分它们。如果需要进一步区分对象和数组，可以使用其他方法，如 Array.isArray() 来判断是否是数组。

另外，对于函数，typeof 返回的是 "function"，这是函数在 JavaScript 中被视为一种特殊的对象类型。但在实际编程中，通常将函数看作一种特殊的数据类型，用于执行特定的操作。

[1, 2, 3].map(parseInt)输出,为啥

我的答案

parseInt(1,0) 1
parseInt(2,1) NaN
parseInt(3,2) NaN

GPT 回答

在执行 [1, 2, 3].map(parseInt) 时，输出结果并不是预期的 [1, 2, 3]。实际输出的结果是 [1, NaN, NaN]。这是因为 Array.prototype.map 方法会依次遍历数组中的每个元素，并对每个元素调用指定的回调函数，然后将回调函数的返回值组成一个新的数组。

parseInt 函数是 JavaScript 的全局函数，用于解析字符串并返回一个整数。parseInt 函数可以接收两个参数，第一个参数是要解析的字符串，第二个参数是进制数（可选，默认为 10）。在 map 方法中，parseInt 函数被作为回调函数使用，实际上被调用了三次，分别传入了以下参数：

parseInt('1', 0)：第一个参数 '1' 是要解析的字符串，第二个参数 0 是进制数，但进制数为 0 时表示按照字符串内容自动判断进制（这里按照 10 进制处理）。所以将字符串 '1' 解析成 10 进制数，结果为 1。
parseInt('2', 1)：第一个参数 '2' 是要解析的字符串，第二个参数 1 是进制数，但 1 是一个无效的进制数，所以返回的结果为 NaN。
parseInt('3', 2)：第一个参数 '3' 是要解析的字符串，第二个参数 2 是进制数，但 3 不是一个有效的 2 进制数，所以返回的结果为 NaN。

因此，最终的输出结果为 [1, NaN, NaN]。

for in for of 的实现原理,可以遍历的数据类型

我的答案

for in 数组索引 for of 数组是值 for in 对象是key for of 遍历obj会抱错

GPT回答

for...in 和 for...of 是 JavaScript 中用于遍历数据的两种不同的遍历方式。

for...in 循环：

for...in 循环用于遍历对象的可枚举属性（包括自身属性和继承的属性）。语法如下：

   for (const key in object) {
     // 执行循环体
   }

for...in 循环的实现原理是遍历对象的原型链上的所有可枚举属性，并将属性名赋值给变量 key，然后执行循环体。

注意：for...in 循环不应该用于遍历数组，因为它会遍历数组的索引，可能会包括一些数组原型链上的属性，而且遍历的顺序也不一定是按照数组元素的顺序。

for...of 循环：

for...of 循环用于遍历可迭代对象（例如数组、字符串、Set、Map 等）的元素。语法如下：

   for (const element of iterable) {
     // 执行循环体
   }

for...of 循环的实现原理是使用对象的迭代器（iterator）来依次获取可迭代对象的每个元素，并将元素赋值给变量 element，然后执行循环体。

可以遍历的数据类型包括：

数组（Array）
字符串（String）
Set
Map
TypedArray（例如 Uint8Array、Int32Array 等）
Generator 等实现了迭代器接口的对象

注意：for...of 循环不能用于遍历普通对象，因为普通对象并没有实现迭代器接口。

综上所述，for...in 循环适用于遍历对象的属性，而 for...of 循环适用于遍历可迭代对象的元素。对于数组和字符串等可迭代对象，推荐使用 for...of 循环，而不是 for...in 循环。

set map weakmap weakset

我的答案

es6 新增的数据类型，说了map和普通的obj的区别，set，不重复，weakMap key是对象，未使用自动回收内存

GPT答案

在 JavaScript 中，Set、Map、WeakMap 和 WeakSet 是四种不同的集合（collection）类型，用于存储一组唯一的值或键值对。它们的特点和用途如下：

Set（集合）：
- Set 是一种无序且不重复的集合，它可以存储各种类型的值。
- Set 中的值不允许重复，每个值在 Set 中只能出现一次。
- Set 是可迭代的，可以使用 for...of 循环遍历其中的值。
- Set 提供了一些方法来增加、删除、查找和判断值是否存在，如 add()、delete()、has() 等。
Map（映射）：
- Map 是一种键值对的集合，其中每个键对应一个值，键和值可以是各种类型的数据。
- Map 中的键是唯一的，每个键只能对应一个值。
- Map 是可迭代的，可以使用 for...of 循环遍历其中的键值对。
- Map 提供了一些方法来增加、删除、查找和判断键值对是否存在，如 set()、delete()、get() 等。
WeakMap（弱映射）：
- WeakMap 是一种特殊的 Map，它只能使用对象作为键，而且这些键是弱引用的。
- 当对象作为键在其他地方没有被引用时，它们会被自动垃圾回收，这使得 WeakMap 在处理对象的生命周期时非常有用。
- WeakMap 不可迭代，不能遍历其中的键值对。
- WeakMap 不提供直接的方法来判断键值对是否存在。
WeakSet（弱集合）：
- WeakSet 是一种特殊的 Set，它只能使用对象作为值，而且这些值是弱引用的。
- 当对象作为值在其他地方没有被引用时，它们会被自动垃圾回收，这使得 WeakSet 在处理对象的生命周期时非常有用。
- WeakSet 不可迭代，不能遍历其中的值。
- WeakSet 不提供直接的方法来判断值是否存在。

需要注意的是，WeakMap 和 WeakSet 之所以称为“弱”的原因是它们不会阻止对象被垃圾回收，也就是说，如果一个对象只被 WeakMap 或 WeakSet 引用，而在其他地方没有被引用，那么该对象会被垃圾回收器回收，即使它存在于 WeakMap 或 WeakSet 中。这使得 WeakMap 和 WeakSet 更适合处理对象生命周期较短或临时的情况。

垃圾回收机制

我的答案

标记法

GPT回答

标记清除：标记清除是目前主流的垃圾回收算法。它通过一个“垃圾收集器”定期扫描所有的对象，标记所有活动对象（即还在使用的对象），然后清除所有未标记的对象（即不再使用的对象）。标记阶段会从全局作用域开始，递归遍历所有对象，标记所有被引用的对象。清除阶段会扫描所有对象，并清除未被标记的对象的内存。

实现布局

<div>
 <div>左边宽度300px</div>
 <div>右边自适应</div>
</div>

我的答案

flex ,float,absolute

.container {
  display: flex;
}

.left {
  width: 300px;
  background-color: #f0f0f0;
}

.right {
  flex: 1;
  background-color: #e0e0e0;
}

css布局方式

我的答案

position各个属性

GPT回答

在 CSS 中，常用的布局方式有以下几种：

块级布局（Block Layout）：
- 使用块级元素来布局，每个元素独占一行，垂直排列。
- 块级元素的默认宽度是父容器的 100%。
- 常见的块级元素有 <div>, <p>, <h1>~<h6>, <ul>, <ol>, <form> 等。
行内布局（Inline Layout）：
- 使用行内元素来布局，元素在同一行内水平排列。
- 行内元素只占用它们实际内容的宽度，不会强制换行。
- 常见的行内元素有 <span>, <a>, <strong>, <em>, <img> 等。
浮动布局（Float Layout）：
- 使用 float 属性来让元素浮动在父容器的左侧或右侧。
- 浮动的元素会脱离正常的文档流，但会影响其他元素的布局。
- 常用于实现多列布局，如网页的导航栏和侧边栏。
弹性布局（Flexbox Layout）：
- 使用 Flexbox 布局可以轻松实现灵活的一维布局（行或列）。
- 通过设置容器的 display: flex;，容器内的子元素会自动排列在一行或一列上，并根据容器的属性进行灵活布局。
网格布局（Grid Layout）：
- 使用 Grid 布局可以实现复杂的二维布局，将容器划分为行和列，并将子元素放置在网格中。
- 通过设置容器的 display: grid;，容器内的子元素可以精确地放置在网格中的指定位置。

这些布局方式可以单独使用，也可以结合使用，根据具体的布局需求选择合适的方式来实现页面布局。其中，Flexbox 和 Grid 布局是现代 Web 开发中最常用的布局方式，它们提供了更灵活和强大的布局功能。

background-size

我的答案

cover：保持图片比例并使图片尽量覆盖整个元素区域。可能会裁剪图片的一部分。 contain：保持图片比例并使图片完全包含在元素区域内。可能会留白元素区域。

GPT回答

background-size 是一个 CSS 属性，用于设置元素背景图片的尺寸大小。通过 background-size 属性，可以控制背景图片的宽度和高度，使其适应元素的大小或保持原始比例。

该属性可以使用以下值：

auto：背景图片保持原始尺寸。
<length>：可以设置具体的长度值（如像素、百分比等）来指定背景图片的宽度和高度。
<percentage>：相对于元素的宽度来设置背景图片的尺寸。
cover：保持图片比例并使图片尽量覆盖整个元素区域。可能会裁剪图片的一部分。
contain：保持图片比例并使图片完全包含在元素区域内。可能会留白元素区域。

使用方式如下：

/* 设置背景图片尺寸为100px宽，200px高 */
div {
  background-image: url('path/to/image.jpg');
  background-size: 100px 200px;
}

/* 设置背景图片宽度为100%，高度保持原始比例 */
div {
  background-image: url('path/to/image.jpg');
  background-size: 100% auto;
}

/* 设置背景图片保持原始尺寸 */
div {
  background-image: url('path/to/image.jpg');
  background-size: auto;
}

/* 设置背景图片尺寸为cover，尽量覆盖整个元素区域 */
div {
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

/* 设置背景图片尺寸为contain，使图片完全包含在元素区域内 */
div {
  background-image: url('path/to/image.jpg');
  background-size: contain;
}

background-size 属性通常与 background-image 属性一起使用，用于控制元素的背景图片尺寸和显示效果。根据具体的设计需求，可以选择合适的 background-size 值来达到所期望的背景图片效果。

vue2 响应式原理

我的答案

数据劫持 Object.defineProperty()

GPT回答

Vue 2 中的响应式原理是通过数据劫持和依赖追踪实现的。当你在 Vue 2 中定义一个响应式数据（Reactive Data），当数据发生变化时，Vue 会自动更新相关的 DOM 元素，从而实现数据和视图的自动同步。

具体来说，Vue 2 的响应式原理如下：

数据劫持（Data Proxy）：
- 在 Vue 2 中，当你创建一个 Vue 实例时，Vue 会遍历该实例的所有 data 属性，并使用 JavaScript 的 Object.defineProperty 方法将这些属性转换为“响应式”的属性。
- 通过 Object.defineProperty 可以定义一个属性的 getter 和 setter，在获取和设置属性时进行拦截，从而实现对属性的监控和响应。
依赖追踪（Dependency Tracking）：
- 当一个 Vue 组件渲染时，Vue 会自动追踪数据属性的依赖关系。也就是说，Vue 会记录每个属性被哪些组件所使用。
- 当响应式数据发生变化时，Vue 会通过依赖追踪，找到所有依赖该数据的组件，并通知它们更新。
更新视图：
- 当响应式数据发生变化时，Vue 会自动更新相关的 DOM 元素，使视图和数据保持同步。

这种响应式原理使得你在使用 Vue 2 编写应用程序时，不需要手动操作 DOM，而是通过操作数据，Vue 会自动帮你处理视图的更新。

需要注意的是，这种响应式原理仅适用于在 Vue 实例中定义的 data 属性。如果你后续添加新的属性，Vue 不会将其转换为响应式属性。如果需要使新的属性也具有响应式特性，你可以使用 Vue.set 方法或者在创建 Vue 实例时使用 data 函数返回响应式对象。

keep-alive原理

我的答案

讲了生命周期，原理不知道

GPT回答

<keep-alive> 是 Vue.js 中的一个抽象组件，用于缓存动态组件。它可以将动态组件中的状态保存在内存中，不被销毁，从而在组件切换时保持状态和避免重复渲染。

<keep-alive> 组件的原理如下：

缓存组件：当 <keep-alive> 包裹的动态组件（使用 v-if 或动态组件的 <component> 标签）被渲染时，会将该组件的实例缓存起来，而不是直接销毁。
离开时缓存：如果组件在 <keep-alive> 中被销毁（例如通过 v-if 条件不满足），那么它的实例将被缓存起来，而不是被完全销毁。
激活时恢复：如果组件再次需要渲染（例如条件重新满足），则会从缓存中取出组件的实例，并重新挂载到 DOM 上，不会重新创建新的组件实例。
生命周期钩子：缓存的组件在激活时会触发一些特定的生命周期钩子，如 activated 和 deactivated，这允许你在组件激活和失活时执行特定的操作。

webpack 热更新原理

我的答案

更加模块id通知本地开发服务器更新相应的模块

GPT回答

Webpack 热更新（Hot Module Replacement，HMR）是 Webpack 提供的一项功能，它允许在开发过程中，在不刷新整个页面的情况下实时更新修改过的模块，从而加快开发效率。Webpack 热更新的原理如下：

HMR Runtime（运行时）：在应用程序启动时，Webpack 会在浏览器中注入 HMR Runtime，这是一个小型的 JavaScript 文件。HMR Runtime 负责监听模块的变化，并与开发服务器建立 WebSocket 连接。
HMR Server（开发服务器）：在开发过程中，Webpack 启动一个开发服务器，用于监听文件的变化。当文件发生变化时，Webpack 会编译更新的模块，并将更新的模块代码通过 WebSocket 通知 HMR Runtime。
HMR Runtime 和模块更新：当 HMR Runtime 接收到模块更新的通知后，它会根据更新的信息，使用 AJAX 请求获取更新的模块代码，并在不刷新整个页面的情况下，将更新的模块应用到当前的页面中。
模块更新过程：在 HMR 中，模块更新的过程分为三个阶段：
- Check（检查）：检查哪些模块发生了变化，并发送更新的请求。
- Download（下载）：下载更新的模块代码。
- Apply（应用）：将更新的模块应用到当前的页面中，实现热更新。

热更新过程是在开发环境中进行的，生产环境的打包文件不会包含 HMR 相关的代码，确保在生产环境中不会影响性能。

Ajax于Fetch的区别

我的答案

不知道

GPT回答

Ajax（Asynchronous JavaScript and XML）和 Fetch 都是用于在客户端（通常是浏览器）与服务器进行数据交互的技术，但它们有一些区别：

发展历史：
- Ajax 是一种较早的技术，它在早期被广泛用于在前端与后端进行异步数据交互，以更新页面内容而无需刷新整个页面。
- Fetch 是基于 Promise 的现代 API，是 ES6 的新特性，更加简洁、易于使用，它提供了一种更现代的方式来进行数据的异步获取。
编程模型：
- Ajax 是通过 XMLHttpRequest 对象来发送异步请求和处理响应，需要编写相对复杂的回调函数来处理异步操作。
- Fetch 使用 Promise 来处理异步操作，它提供了更加简洁的链式语法，使得异步请求的编码更加直观和易于理解。
请求和响应处理：
- Ajax 可以通过设置不同的属性（如 method、url、data 等）来配置请求，也可以通过设置回调函数来处理响应。
- Fetch 使用 fetch() 函数发送请求，并使用 Promise 来处理响应。它使用了更现代的 API，并提供了更多的内置功能，如请求头的设置、请求的拦截、响应的转换等。
跨域请求：
- Ajax 的跨域请求受到同源策略的限制，需要使用 CORS（跨域资源共享）等技术来进行跨域请求。
- Fetch 同样受到同源策略的限制，但可以通过设置 mode: 'cors' 或使用 credentials: 'include' 来进行跨域请求。

虽然 Fetch 在许多方面都比 Ajax 更先进和便利，但由于它是 ES6 的新特性，因此在一些旧的浏览器中可能不被完全支持。为了兼容性，如果你的项目需要支持旧版本的浏览器，仍然需要考虑使用 Ajax。否则，Fetch 是更好的选择，它提供了更简单、直观且现代的 API，使异步数据交互变得更加方便。

有接触过webpack5吗

我的答案

没有

做了哪些工程化

我的答案

搞错了我讲优化说了一通

GPT回答

当面试官问你做了哪些工程化时，你可以回答以你在项目中使用的工程化工具和实践为主。工程化是为了提高项目开发效率、代码质量和可维护性，常见的工程化工具和实践包括：

版本管理工具：例如 Git，用于团队协作、代码版本控制和分支管理。
包管理工具：例如 npm 或 yarn，用于管理项目的依赖包和版本。
自动化构建工具：例如 Webpack、Gulp 或 Grunt，用于自动化构建、打包和优化项目代码。
模块化开发：使用 ES6 的模块化语法或 CommonJS 等规范，将代码拆分成模块，提高代码复用性和可维护性。
代码规范和静态检查：使用 ESLint、Prettier 等工具来规范代码风格和进行静态代码检查，确保代码质量和一致性。
单元测试和集成测试：使用 Jest、Mocha、Karma 等测试框架进行单元测试和集成测试，保证代码质量和可靠性。
持续集成和持续交付：使用 CI/CD 工具如 Jenkins、Travis CI、CircleCI 等，实现代码的持续集成和持续交付，自动化构建、测试和部署。
代码分析和性能优化：使用性能分析工具（如 Chrome 开发者工具、Lighthouse 等）来分析项目性能，并进行优化，提高页面加载速度和性能表现。
代码分割和懒加载：通过 Webpack 的代码分割功能和动态导入（Dynamic Import）来实现懒加载，减少初始加载时间。
CSS 预处理器：使用 LESS、Sass 或 Stylus 等 CSS 预处理器，增强 CSS 的可维护性和复用性。

当回答时，可以结合你在具体项目中使用的工程化工具和实践，阐述如何利用这些工具和实践提高了项目的开发效率、代码质量和可维护性。同时，可以分享一些工程化所带来的好处和你在项目中遇到的挑战及如何解决的经验，这样能更好地展示你对工程化的理解和实践能力。

网络状态码

我的答案

200 204 206 301 302 304 400 401 403 404 501

ssr服务端渲染原理

我的答案

不知道

GPT回答

SSR（Server-Side Rendering，服务端渲染）是一种将页面的渲染工作从客户端移至服务器端的技术。它的原理是在服务器端生成完整的 HTML 页面，并将该页面发送给客户端展示，而不是在客户端使用 JavaScript 动态渲染页面。SSR 的原理如下：

客户端发起请求：当用户在浏览器中访问一个 SSR 应用时，浏览器会向服务器发起请求，请求页面的 URL。
服务器端处理请求：服务器端接收到请求后，会根据请求的 URL 和路由规则找到对应的页面组件，并执行相应的数据获取逻辑（如调用 API 请求数据）。
数据预取：在服务器端执行数据获取逻辑时，会预先获取页面所需的数据，并将数据注入到页面组件中。
渲染页面：服务器端使用注入数据后的页面组件生成完整的 HTML 页面，并将该页面作为响应发送给客户端。
客户端接收响应：客户端接收到服务器返回的 HTML 页面，此时页面已经包含了所需的数据。
页面展示：客户端直接展示服务器返回的 HTML 页面，无需再等待数据获取和页面渲染过程。

SSR 的优势在于首次加载页面时，用户可以立即看到完整的内容，无需等待客户端渲染完成。这有助于提高页面的首次加载速度和搜索引擎优化（SEO），因为搜索引擎可以直接获取页面的完整内容。

与传统的客户端渲染（CSR）相比，SSR 也有一些劣势，例如服务器压力增大，首次加载时服务器需要处理页面的渲染，而不仅仅是简单地提供静态文件。但这些劣势通常可以通过服务器的性能优化和缓存等手段来解决。

要实现 SSR，可以使用框架如 Nuxt.js（基于 Vue.js）、Next.js（基于 React）、Angular Universal（基于 Angular）等，它们都提供了便捷的 SSR 解决方案，简化了 SSR 的实现过程。

css文件放在head标签里和body的区别

我的答案

加载顺序不一样可能导致页面不一样

GPT回答

将 CSS 文件放置在 <head> 标签和 <body> 标签中有一些区别，主要涉及页面加载和样式渲染的方式。下面是两种方式的区别：

放置在 <head> 标签中：
- CSS 文件放置在 <head> 标签中时，会在页面开始加载时首先加载和解析 CSS 文件。
- 当浏览器遇到 <link> 标签引用的 CSS 文件时，会立即发起 CSS 文件的请求，并开始下载和解析该文件。
- 由于 CSS 文件在 <head> 标签中，所以在 CSS 文件加载和解析完成之前，页面的 HTML 结构会开始渲染，但是页面内容的样式可能会延迟显示，直到 CSS 文件加载并应用到页面中。
放置在 <body> 标签中：
- CSS 文件放置在 <body> 标签中时，会在页面开始加载时先加载和解析 HTML 结构，然后再加载和解析 CSS 文件。
- 当浏览器遇到 <link> 标签引用的 CSS 文件时，会在页面加载完 HTML 结构后再开始下载和解析该文件。
- 由于 CSS 文件在 <body> 标签中，所以页面内容的样式会在 CSS 文件加载并应用到页面后立即显示，不会出现样式延迟显示的情况。

总体来说，将 CSS 文件放置在 <head> 标签中可以实现较早的样式加载和渲染，但可能会导致页面内容的样式延迟显示。而将 CSS 文件放置在 <body> 标签中可以实现更早的页面内容显示，但样式加载可能会稍微延迟。

通常，为了更好的用户体验和页面性能，CSS 文件会放置在 <head> 标签中，以实现样式的尽早加载和渲染，而其他 JavaScript 文件通常放置在 <body> 标签底部，以避免阻塞页面内容的加载。另外，可以使用异步加载、延迟加载或通过代码拆分等技术来优化页面加载和渲染过程。

浏览器渲染过程

我的答案

css树 dom树渲染树

GPT回答

浏览器的渲染过程主要包括以下几个步骤：

解析HTML：浏览器从服务器获取到HTML文件后，首先会对HTML进行解析。解析器会将HTML代码解析成DOM树，DOM树表示了页面的结构和层次关系。
构建DOM树：解析器在解析HTML时，会根据HTML标签的嵌套关系构建DOM树。DOM树由DOM元素节点、文本节点和属性节点组成，它表示了HTML页面的层次结构。
解析CSS：浏览器会继续解析页面中的CSS样式文件。解析器会将CSS代码解析成CSS规则树（CSS Rule Tree），CSS规则树表示了页面中的样式规则。
构建CSS规则树：在解析CSS时，浏览器会根据CSS选择器和样式声明构建CSS规则树。CSS规则树表示了页面中的样式信息。
合并DOM树和CSS规则树：浏览器会将DOM树和CSS规则树合并成一个渲染树（Render Tree）。渲染树只包含需要显示在页面上的DOM元素，并且已经计算了每个元素的样式信息。
布局（Layout） ：渲染树合并后，浏览器会进行布局过程，计算出每个DOM元素在页面上的大小和位置。这个过程也被称为重排（reflow）。
绘制（Painting） ：在布局完成后，浏览器会对渲染树进行绘制，将每个元素的内容显示在屏幕上。这个过程也被称为重绘（repaint）。
显示（Display） ：绘制完成后，页面内容会显示在浏览器窗口中，用户可以看到页面的内容。
交互响应：当页面渲染完成后，用户可以与页面进行交互，如点击链接、按钮或滚动页面等。浏览器会监听用户的交互事件，并根据事件响应进行相应的操作。

以上是浏览器渲染过程的主要步骤。值得注意的是，由于渲染过程是一个逐步完成的过程，所以在渲染过程中如果修改了DOM元素的样式或属性，可能会触发重新渲染（重排和重绘），从而影响页面的性能。为了优化页面渲染性能，需要避免频繁的DOM操作和样式改变。

vue3 新特性

我的答案

proxy 深监听，浅监听，只读属性等，多根节点等，

GPT回答

Vue.js 3 是 Vue.js 的最新版本，带来了许多新的特性和改进，下面列举了一些 Vue.js 3 的新特性：

Composition API（组合 API） ： Composition API 是 Vue.js 3 中最显著的新增特性，它是一组基于函数的 API，使得组件逻辑可以更好地组织和复用。与 Vue 2.x 的 Options API 相比，Composition API 提供更灵活和更好维护的代码结构，能够更好地处理复杂的业务逻辑。
Teleport（传送门） ： Teleport 是 Vue.js 3 中新增的特性，它允许你在组件内部将内容渲染到 DOM 中的不同位置。Teleport 可以用于创建弹出框、对话框和模态框等组件，使得组件的渲染更加灵活。
Fragments（片段） ： Fragments 是 Vue.js 3 中的一个新特性，它允许你在组件中返回多个根元素而无需包裹在一个父元素中。在 Vue 2.x 中，组件的 template 中必须有一个根元素，而 Fragments 可以解决这个限制。
新的响应式系统： Vue.js 3 使用 Proxy 来实现响应式系统，与 Vue 2.x 中的 Object.defineProperty 相比，Proxy 提供了更强大和更高效的响应式能力，使得 Vue.js 3 的响应式系统更加稳健和灵活。
性能优化： Vue.js 3 做了许多性能优化，包括更快的渲染速度和更小的包体积，提高了整体性能。
TypeScript 支持： Vue.js 3 对 TypeScript 提供了更好的支持，内置了 TypeScript 类型声明文件，使得在 Vue 项目中使用 TypeScript 更加便捷。
Suspense 和 Error Boundary： Vue.js 3 引入了类似于 React 的 Suspense 和 Error Boundary 的概念，用于处理异步组件加载和错误处理，提供了更好的用户体验和错误处理能力。
自定义渲染器： Vue.js 3 提供了更灵活的自定义渲染器 API，允许你实现自定义的渲染逻辑，比如将 Vue 组件渲染到 canvas 或其他环境中。

这些是 Vue.js 3 中一些主要的新特性，它们使得 Vue.js 在开发体验、性能和扩展性方面得到了进一步的提升，并为开发者提供了更好的工具和灵活性来构建复杂的应用程序。

proxy会全部属性代理吗

我的回答

没了解过

GPT回答

Proxy 是 JavaScript 中的一个高级特性，它可以用于创建一个代理对象，用来拦截目标对象的操作。Proxy 可以拦截并重定义目标对象的一系列操作，包括属性访问、属性赋值、方法调用等。

具体来说，Proxy 可以代理目标对象的以下操作：

属性访问：拦截对目标对象属性的读取操作（例如 obj.name）。
属性赋值：拦截对目标对象属性的写入操作（例如 obj.name = 'John'）。
属性删除：拦截对目标对象属性的删除操作（例如 delete obj.name）。
in 操作符：拦截对目标对象使用 in 操作符的操作（例如 'name' in obj）。
方法调用：拦截对目标对象方法的调用操作（例如 obj.sayHello()）。
构造函数：拦截对目标对象作为构造函数（使用 new 关键字）的操作。

需要注意的是，Proxy 并不是全部属性都会被代理的。默认情况下，Proxy 只会代理目标对象的直接属性，即目标对象自身的属性。对于目标对象的原型链上的属性，Proxy 不会进行拦截。

举个例子：

const target = {
  name: 'John',
  age: 30
};

const proxy = new Proxy(target, {
  get(target, prop) {
    console.log(`Getting property "${prop}"`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting property "${prop}" to "${value}"`);
    target[prop] = value;
  }
});

proxy.name; // 输出：Getting property "name"
proxy.name = 'Alice'; // 输出：Setting property "name" to "Alice"

proxy.toString(); // 不会输出 "Getting property "toString""，因为 toString 是 Object 的原型上的方法

在上面的例子中，对于 proxy.name 和 proxy.name = 'Alice' 的操作会被 Proxy 拦截，而对于 proxy.toString() 的操作不会被拦截。这是因为 toString() 是 Object 的原型上的方法，不是目标对象 target 自身的属性。

diff算法为啥key的唯一性

我的答案

key 的唯一性是为了更准确地标识每个子节点,减少没必要的更新

GPT回答

在 Virtual DOM 的 diff 算法中，key 的唯一性是为了更准确地标识每个子节点，并且帮助 Vue 在列表渲染时进行高效的更新。没有唯一的 key 值可能会导致一些问题，让 Vue 在进行 Virtual DOM 的比较时无法准确地确定节点的变化，从而可能出现错误的更新行为或性能下降。

以下是为什么 key 的唯一性很重要的几个原因：

更准确的标识节点：在 Virtual DOM 的比较过程中，Vue 使用 key 来唯一标识每个子节点。通过 key，Vue 可以区分每个子节点，而不是简单地依赖于节点在数组中的索引。这样可以确保在列表中插入、移动、删除等操作时，Vue 可以更精确地找到需要更新的节点，避免不必要的更新操作，提高性能。
优化列表渲染：在使用 v-for 渲染列表时，每个列表项都应该有一个唯一的 key 值。如果没有唯一的 key，当列表发生变化时，Vue 将无法正确追踪每个列表项的状态，可能导致列表项的错位、重复渲染等问题。
解决复用问题：在列表中添加、删除、移动元素时，使用唯一的 key 值可以确保 Vue 可以正确地识别新节点与旧节点之间的对应关系。这样，Vue 可以尽可能地复用已存在的 DOM 节点，减少不必要的 DOM 操作，提高渲染性能。

需要注意的是，key 只需要在列表渲染中使用，对于其他类型的节点，如普通的组件节点，不一定需要设置 key。同时，使用 key 时需要确保 key 具有唯一性和稳定性，不应该是随机生成的或会频繁变动的值，以免导致更新不稳定或效果不理想。

vue3 diff算法的优化

我的答案

不了解

GPT回答

在 Vue 3 中，引入了一种名为“静态树”的优化机制，用于优化 diff 算法。静态树是指在编译阶段，Vue 可以检测到某个节点及其子树是稳定的，不会发生变化的。这样，在更新阶段，Vue 可以直接跳过这些静态子树的比较，从而减少 diff 的开销，提高性能。

具体的优化方式如下：

静态提升（Static Hoisting）：在编译阶段，Vue 会检测整个组件树，并将稳定的子树提升为静态节点。这些静态节点在更新时不需要进行比较，可以直接复用之前的 DOM 结构，从而减少了不必要的 DOM 操作。
静态节点跳过：在更新阶段，当 Vue 发现一个节点是静态的，它会直接跳过这个节点及其子树的比较，从而减少了 diff 的开销。这种跳过机制大大提高了组件的更新性能。
缓存节点：Vue 3 在内部维护了一个缓存，用于存储静态节点的 VNode。当需要创建新的 VNode 时，Vue 会首先查找缓存，如果发现之前已经存在相同的静态节点，就直接复用之前的 VNode，避免了重复创建 VNode 的开销。
预编译：Vue 3 使用了预编译技术，将模板编译为渲染函数，这样可以在编译阶段进行静态节点的识别和优化，避免了运行时的开销。

以上优化措施使得 Vue 3 的 diff 算法在更新时更加高效，尤其在处理包含大量静态节点的组件时，性能提升更为显著。这些优化使得 Vue 3 在性能方面比 Vue 2 有了明显的改进，提供了更流畅的用户体验。

实现add(1)(2)(3)(4)

我的答案

function add(num){
  function func(nextNum){
    num += nextNum
    return func 
  }
  func.toString = function(){
    return num
  }
  return func
}
console.log(add(1)(2)(3)(4))

不知道为啥答案输出的不是10，问面试官自己下去看看

网上的答案

function add(a) {
    function s(b) {
        a = a + b    return s
    }
    s.toString = function() {
        return a
    }
    return s
}
console.log(add(1)(2)(3)(4)) // f 10