面试前端八股文十问十答第七期

面试前端八股文十问十答第七期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）flex 布局

使用函数组件和类组件实现简单的 flex 布局：

函数组件：

import React from 'react';

const FlexContainer = () => {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <div style={{ backgroundColor: 'lightblue', padding: '20px' }}>Flex Item 1</div>
      <div style={{ backgroundColor: 'lightgreen', padding: '20px' }}>Flex Item 2</div>
      <div style={{ backgroundColor: 'lightcoral', padding: '20px' }}>Flex Item 3</div>
    </div>
  );
};

export default FlexContainer;

类组件：

import React, { Component } from 'react';

class FlexContainer extends Component {
  render() {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
        <div style={{ backgroundColor: 'lightblue', padding: '20px' }}>Flex Item 1</div>
        <div style={{ backgroundColor: 'lightgreen', padding: '20px' }}>Flex Item 2</div>
        <div style={{ backgroundColor: 'lightcoral', padding: '20px' }}>Flex Item 3</div>
      </div>
    );
  }
}

export default FlexContainer;

函数组件的代码更简洁，不需要定义类，直接返回 JSX 即可。

2）line-height 如何继承？

line-height 是可以继承的 CSS 属性。当应用于父元素时，子元素的 line-height 将会继承父元素的值，除非子元素显式地覆盖了这个值。

3）数据类型

在计算机编程中，常见的数据类型包括：

• 基本数据类型（Primitive Data Types）：代表简单的数据。常见的基本数据类型包括整数（integer）、浮点数（float）、布尔值（boolean）、字符（character）等。不同的编程语言可能有略微不同的命名和实现。
• 复合数据类型（Composite Data Types）：由基本数据类型组合而成的数据类型，如数组、对象、结构体等。它们可以包含多个值，并以某种方式组合在一起。
• 引用数据类型（Reference Data Types）：存储的是指向内存中实际数据的引用（地址），而不是数据本身。常见的引用数据类型包括指针、引用、函数等。
• 特殊数据类型（Special Data Types）：一些语言中可能具有独特的数据类型，如空（null）、未定义（undefined）、字符序列（string）等。

每种数据类型都有其特定的用途和限制，合理选择数据类型可以提高程序的性能和可读性。

4）基本的数据类型介绍，及值类型和引用类型的理解

基本数据类型（Primitive Data Types）：

1. 整数（Integer）：表示整数值，如 -3、0、42 等。
2. 浮点数（Floating-Point Number）：表示有小数点的数字，如 3.14、-0.001 等。
3. 布尔值（Boolean）：表示真或假，只有两个可能的值：true 或 false。
4. 字符（Character）：表示单个字符，如 ‘a’、‘9’、‘!’ 等。
5. 空（Null）：表示不存在的值。
6. 未定义（Undefined）：表示未赋值的变量。

值类型（Value Types）和引用类型（Reference Types）：

• 值类型：存储的是数据的实际值，每个变量都有自己的内存空间，相互独立。基本数据类型通常属于值类型。
• 引用类型：存储的是数据的引用（地址），多个变量可以指向相同的内存空间，修改其中一个变量会影响其他指向同一地址的变量。对象和数组通常属于引用类型。

5）手写深拷贝

以下是一个简单的手写深拷贝函数的示例：

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj; // 如果是基本类型或 null，直接返回
  }

  let result;
  if (Array.isArray(obj)) {
    result = []; // 如果是数组，创建一个新数组
  } else {
    result = {}; // 如果是对象，创建一个新对象
  }

  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      result[key] = deepCopy(obj[key]); // 递归复制每个属性的值
    }
  }

  return result;
}

// 示例用法
const originalObj = { a: 1, b: { c: 2 } };
const copiedObj = deepCopy(originalObj);
console.log(copiedObj); // 输出: { a: 1, b: { c: 2 } }

6）根据 0.1+0.2 !== 0.3，讲讲 IEEE 754 ，如何让其相等？

IEEE 754 是一种用于浮点数的标准，它采用二进制来表示浮点数，但由于二进制是有限的，所以在某些情况下会导致精度损失。

在 JavaScript 中，0.1、0.2 和 0.3 这样的小数值在进行计算时可能会导致精度损失，因为它们的二进制表示是无限循环的。因此，0.1 + 0.2 的结果可能不等于 0.3。

要解决这个问题，可以使用以下方法之一：

1. 使用小数点位数较少的值：将浮点数转换为整数，进行计算后再将结果转换回浮点数，以减少精度损失。
2. 使用库函数：使用像 BigDecimal 这样的库来处理精确的小数计算，这些库能够避免由于浮点数精度问题而导致的计算错误。
3. 使用近似比较：在比较浮点数时，可以使用一个很小的误差范围来判断它们是否相等，而不是直接比较它们的值。

例如，在 JavaScript 中，可以这样比较：

const tolerance = 0.000001; // 定义一个误差范围
if (Math.abs(0.1 + 0.2 - 0.3) < tolerance) {
  console.log("0.1 + 0.2 equals 0.3");
} else {
  console.log("0.1 + 0.2 does not equal 0.3");
}

这样可以避免由于浮点数精度问题而导致的误差。

7）原型和原型链

原型（Prototype）：JavaScript 中的每个对象都有一个原型对象，它是一个指向另一个对象的引用。对象通过原型实现继承，可以访问其原型对象上的属性和方法。每个函数都有一个 prototype 属性，用于指定新创建对象的原型。

原型链（Prototype Chain）：当访问一个对象的属性或方法时，如果该对象本身没有定义该属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法为止。原型链的顶端是 Object.prototype，它是所有对象的根原型。

8）作用域与作用域链

作用域（Scope）：指变量和函数的可访问范围。在 JavaScript 中，作用域由函数定义时所处的位置决定，即词法作用域。JavaScript 中存在全局作用域和局部作用域（函数作用域）。

作用域链（Scope Chain）：当查找变量或函数时，JavaScript 引擎会沿着作用域链向上查找，直到找到为止。作用域链的顶端是当前执行代码所在的作用域，然后依次向上查找直至全局作用域。

9）执行上下文

执行上下文（Execution Context）：是 JavaScript 代码执行时的环境，包括变量对象、作用域链、this 指向等信息。每个函数调用都会创建一个新的执行上下文，并加入到执行栈（Execution Stack）中，当前执行的上下文位于栈顶。

执行上下文包括以下三种类型：

1. 全局执行上下文（Global Execution Context）：默认的全局环境，在代码执行之前被创建。
2. 函数执行上下文（Function Execution Context）：在函数调用时创建，包含函数的局部变量、参数等信息。
3. Eval 执行上下文：eval 函数执行时创建的上下文，通常不推荐使用。

10）闭包

闭包（Closure）：指函数和其相关的引用环境的组合。闭包允许函数访问其外部作用域中的变量，即使函数在外部作用域执行完毕后仍然可以访问这些变量。闭包的核心特点是函数可以记住并访问其词法作用域，即使函数在定义时所处的作用域已经销毁。

闭包常用于实现私有变量、模块化、延迟执行等场景。JavaScript 中的事件处理函数、定时器函数等都是闭包的应用。使用闭包需要注意内存泄漏的问题，因为闭包会持有外部作用域中的变量，导致这些变量无法被垃圾回收。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

Github & Gitee 前后端总计已经 1000+ Star，1.5W+ 访问！

⭐点赞⭐收藏⭐不迷路！⭐