OTT 前端技术

chat回答面试【一】

2024-04-07 10:42:05

阅读：460
分类:开发工具
标签:chatGPT

你作为前端技术专家岗位面试者，我现在对你进行提问

好的，请问有什么问题需要我回答？

常见的水平垂直居中实现方案有哪些？

  1. 使用 flexbox 实现水平垂直居中

    .parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

  2. 使用 grid 实现水平垂直居中

    .parent {
  display: grid;
  justify-items: center;
  align-items: center;
}

  3. 使用绝对定位实现水平垂直居中

    .parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

  4. 使用 table-cell 实现水平垂直居中

    .parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

什么是 BFC

BFC，即块级格式化上下文（Block Formatting Context），是一个独立的渲染区域，具有一定的渲染规则。

在一个 BFC 中，块级元素会垂直地按照其在文档流中的顺序一个接一个地放置，两个相邻的块级元素之间的间隙由垂直方向的 margin 值决定。同时，一个 BFC 中的元素不会影响到外部元素的布局，外部元素也不会影响到 BFC 内部元素的布局。

BFC 的形成有以下几种情况：

  • 根元素或包含根元素的元素
  • 浮动元素（元素的 float 不为 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • display 属性为 inline-block、table-cell、table-caption、flex、 inline-flex 的元素
  • overflow 属性不为 visible 的元素

BFC 具有以下特性：

  • 内部的 Box 会在垂直方向上一个接一个地放置。
  • Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
  • 每个元素的 margin box 的左边，与包含块 border box 的左边相接触，即使浮动元素也是如此。
  • BFC 的区域不会与浮动元素重叠。
  • BFC 在页面上是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素。

Js 的基础类型，typeof 和 instanceof 的区别

JavaScript 的基础类型有以下几种：Number、String、Boolean、Null、Undefined 和 Symbol（ES6 新增）。

typeof 和 instanceof 都是 JavaScript 中常用的用于判断类型的运算符，它们之间的区别如下：

  1. typeof 运算符可以用来判断一个值的类型，返回值为一个字符串，包含以下几种类型："number"、"string"、"boolean"、"null"、"undefined"、"object"（包括普通对象、数组、函数等）和 "symbol"（ES6 新增）。注意，typeof 运算符对于 null 类型的值会返回 "object"，这是历史遗留问题

    typeof 123; // "number"
typeof "abc"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object"
typeof []; // "object"
typeof {}; // "object"
typeof function () {}; // "function"
typeof Symbol(); // "symbol"

  2. instanceof 运算符可以用来判断一个对象是否是某个类（构造函数）的实例，返回值为一个布尔值

    const str = "abc";
str instanceof String; // false，因为 str 是基础类型的字符串，不是 String 类的实例
const strObj = new String("abc");
strObj instanceof String; // true，因为 strObj 是 String 类的实例

    需要注意的是：instanceof 运算符判断的是一个对象的原型链上是否存在某个构造函数的原型，因此如果是基础类型的值，instanceof 运算符会始终返回 false。

    const num = 123;
num instanceof Number; // false，因为 num 是基础类型的数字，不是 Number 类的实例
const numObj = new Number(123);
numObj instanceof Number; // true，因为 numObj 是 Number 类的实例

数组的方法有哪些区别？常用哪些方法去对数组进行增、删、改？

avaScript 数组提供了很多用于对数组进行增、删、改操作的方法，这里列举其中一些常用的方法及其区别

  1. push、pop：在数组末尾添加或删除一个元素，并返回修改后数组的长度。push 可以添加多个元素，参数以逗号分隔

    const arr = [1, 2, 3];
arr.push(4, 5); // [1, 2, 3, 4, 5]
arr.pop(); // [1, 2, 3, 4]

  2. shift、unshift：在数组开头添加或删除一个元素，并返回修改后数组的长度。unshift 可以添加多个元素，参数以逗号分隔

    const arr = [1, 2, 3];
arr.unshift(0); // [0, 1, 2, 3]
arr.shift(); // [1, 2, 3]

  3. splice：在指定位置插入、删除或替换元素，并返回修改后的数组。第一个参数是插入或删除的起始位置，第二个参数是要删除的元素个数，后面的参数是要插入的元素

    const arr = [1, 2, 3];
arr.splice(1, 1, 4); // [1, 4, 3]
arr.splice(2, 0, 5, 6); // [1, 4, 5, 6, 3]
arr.splice(2, 2); // [1, 4, 3]

  4. slice：返回指定起始位置和终止位置之间的元素组成的新数组，原数组不变

    const arr = [1, 2, 3, 4, 5];
arr.slice(1, 3); // [2, 3]
arr.slice(2); // [3, 4, 5]

  5. concat：将多个数组合并成一个新数组，原数组不变

    const arr1 = [1, 2];
const arr2 = [3, 4];
arr1.concat(arr2); // [1, 2, 3, 4]

  6. map、filter、reduce：这三个方法不会修改原数组，而是返回一个新的数组或值

    // map：对数组中的每个元素执行一次指定的函数，并返回执行结果组成的新数组
const arr = [1, 2, 3];
const newArr = arr.map((item) => item * 2); // [2, 4, 6]

// filter：对数组中的每个元素执行一次指定的函数，将结果为 true 的元素组成新的数组返回
const arr = [1, 2, 3, 4];
const newArr = arr.filter((item) => item % 2 === 0); // [2, 4]

// reduce：对数组中的每个元素执行一次指定的函数，将结果累加起来返回
const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, cur) => (acc += cur), 0); // 10

解释一下闭包和作用域

闭包和作用域都是 JavaScript 中非常重要的概念。

作用域是指变量的可访问范围，JavaScript 采用的是词法作用域，也就是静态作用域。在 JavaScript 中，每个函数都有自己的作用域，作用域链的顶端是全局作用域。在函数内部，可以访问外部作用域的变量，但是外部作用域不能访问函数内部的变量。这就是作用域的基本概念。

闭包是指函数能够访问外部作用域的变量，即使在函数外部，也可以访问函数内部的变量。闭包的实现方式是在一个函数内部定义另一个函数，并且让这个函数能够访问外部函数的变量。由于 JavaScript 的词法作用域规则，内部函数可以访问外部函数的变量，因此就实现了闭包。

闭包的作用主要有以下几个：

  • 封装变量：可以将变量封装在函数内部，避免变量污染全局作用域。

  • 延迟执行：可以在函数内部定义一个函数，然后将它返回，从而实现延迟执行。

  • 可以访问外部作用域的变量：在函数内部可以访问外部作用域的变量，这使得函数具有了更强的灵活性和扩展性。

需要注意的是，由于闭包会将变量一直保存在内存中，如果使用不当会导致内存泄漏的问题。因此，使用闭包时需要注意变量的生命周期，尽量避免出现不必要的闭包。

如何实现继承

在 JavaScript 中，可以通过以下几种方式实现继承：

  1. 原型继承
    原型继承是 JavaScript 中最基本的继承方式。在原型继承中，每个对象都有一个原型对象，可以通过将子类的原型对象指向父类的实例来实现继承。例如：

    function Parent() {}
Parent.prototype.sayHello = function () {
  console.log("Hello");
};

function Child() {}
Child.prototype = new Parent();
Child.prototype.constructor = Child;

  2. 构造函数继承
    构造函数继承是通过在子类的构造函数中调用父类的构造函数来实现继承。例如：

    function Parent(name) {
  this.name = name;
}
Parent.prototype.sayHello = function () {
  console.log("Hello");
};

function Child(name) {
  Parent.call(this, name);
}

  3. 组合继承
    组合继承是原型继承和构造函数继承的结合，它既继承了父类原型对象上的属性和方法，又能够传递参数给父类的构造函数。例如：

    function Parent(name) {
  this.name = name;
}
Parent.prototype.sayHello = function () {
  console.log("Hello");
};

function Child(name) {
  Parent.call(this, name);
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;

  4. 寄生组合继承
    寄生组合继承是组合继承的一种优化方式，它通过使用 Object.create() 方法来创建父类原型对象的副本，避免了重复调用父类构造函数的问题。例如

    function Parent(name) {
  this.name = name;
}
Parent.prototype.sayHello = function () {
  console.log("Hello");
};

function Child(name) {
  Parent.call(this, name);
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

箭头函数和普通函数有什么区别

在 JavaScript 中，箭头函数和普通函数的主要区别在于以下几点：

  1. 语法简洁
    箭头函数的语法比普通函数更加简洁，可以用更少的代码来实现相同的功能。例如，使用箭头函数可以将以下代码

    function double(x) {
  return x * 2;
}
// 改写为
const double = (x) => x * 2;

  2. this 绑定
    箭头函数和普通函数在 this 的处理上有所不同。普通函数的 this 指向调用它的对象，而箭头函数的 this 指向定义它的上下文对象，即箭头函数所在的作用域。因此，在箭头函数中使用 this 时，它会捕获最近的 this 值，而不是指向调用它的对象

  3. arguments 对象
    在普通函数中，可以使用 arguments 对象来访问所有传递给函数的参数。而在箭头函数中，没有自己的 arguments 对象，它会捕获最近的父级函数的 arguments 对象。如果箭头函数没有父级函数，则没有 arguments 对象可用。

  4. 不能用作构造函数
    箭头函数不能用作构造函数，不能通过 new 运算符来实例化一个箭头函数。如果尝试使用 new 运算符来实例化一个箭头函数，会抛出一个类型错误。

总的来说，箭头函数和普通函数各有优缺点，需要根据具体情况来选择使用哪种函数。

请说一下 GET 请求和 POST 请求的区别

  1. 参数传递位置：

    • GET 请求：参数通过 URL 的查询字符串（query string）传递，即将参数附加在 URL 的末尾，使用?符号和&符号分隔参数。例如：http://example.com/path?param1=value1&param2=value2。
    • POST 请求：参数通过请求的消息体（request body）传递，参数被包含在请求的消息体中，不会显示在 URL 中。

  2. 数据长度限制：

    • GET 请求：由于参数附加在 URL 中，URL 的长度存在限制，不同浏览器和服务器对 URL 长度限制的大小有所不同，通常在 2048 个字符左右。
    • POST 请求：由于参数位于请求的消息体中，并没有明确的长度限制，但是服务器和应用程序可能会设置对 POST 请求的大小进行限制。

  3. 安全性：

    • GET 请求：参数暴露在 URL 中，容易被其他人获取和截取，因此不适合传递敏感信息，例如密码等。
    • POST 请求：参数位于请求的消息体中，不会明文暴露在 URL 中，相对于 GET 请求更安全，适合传递敏感信息。

  4. 缓存处理：

    • GET 请求：可以被浏览器缓存，可以被收藏夹保存，可以被浏览器历史记录记录。
    • POST 请求：默认情况下不会被浏览器缓存，不会被收藏夹保存，不会被浏览器历史记录记录。

  5. 幂等性：

    • GET 请求：一般情况下是幂等的，即多次重复请求对资源没有副作用，只是获取资源的操作。
    • POST 请求：一般情况下是非幂等的，即多次重复请求可能对资源产生不同的副作用，例如创建新资源或更新资源。

综上所述，GET 请求适合用于获取数据，传递少量参数，不涉及敏感信息和副作用操作；POST 请求适合用于提交数据，传递大量参数，涉及敏感信息和副作用操作。

token 已经过期，如何刷新

  1. 检查令牌是否过期：在请求需要认证的接口之前，检查令牌的过期时间。如果令牌已经过期，需要进行刷新操作。

  2. 发送刷新令牌请求：向服务器发送刷新令牌的请求。该请求通常需要包含过期的令牌，用于服务器验证和刷新操作。

  3. 服务器验证刷新令牌：服务器接收到刷新令牌的请求后，会验证令牌的合法性。这可能涉及到对令牌的签名验证、令牌是否在有效的令牌列表中等操作。

  4. 生成新的令牌：如果刷新令牌验证通过，服务器会生成一个新的访问令牌（和可选的刷新令牌），用于替换过期的令牌。

  5. 返回新的令牌：服务器将新的令牌作为响应返回给客户端。客户端接收到新的令牌后，可以更新本地存储的令牌，以便后续的请求中使用。

具体的实现方式可能因后端框架、认证机制等而有所不同。通常，刷新令牌的请求可能是一个特殊的接口，例如使用 HTTP POST 方法发送一个包含刷新令牌的请求，并在响应中返回新的访问令牌。

请注意，刷新令牌的操作应该是安全的，并受到适当的安全机制的保护，以防止令牌泄露或被滥用。建议在实现时参考认证机制的文档或使用已有的安全认证库来确保实现的安全性。

评论:

    X

    备案号 皖ICP备19021899号-1  技术支持 © 947968273@qq.com