面试前端八股文十问十答第七期
相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新!
⭐点赞⭐收藏⭐不迷路!⭐
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):
- 整数(Integer):表示整数值,如 -3、0、42 等。
- 浮点数(Floating-Point Number):表示有小数点的数字,如 3.14、-0.001 等。
- 布尔值(Boolean):表示真或假,只有两个可能的值:true 或 false。
- 字符(Character):表示单个字符,如 ‘a’、‘9’、‘!’ 等。
- 空(Null):表示不存在的值。
- 未定义(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。
要解决这个问题,可以使用以下方法之一:
- 使用小数点位数较少的值:将浮点数转换为整数,进行计算后再将结果转换回浮点数,以减少精度损失。
- 使用库函数:使用像
BigDecimal
这样的库来处理精确的小数计算,这些库能够避免由于浮点数精度问题而导致的计算错误。 - 使用近似比较:在比较浮点数时,可以使用一个很小的误差范围来判断它们是否相等,而不是直接比较它们的值。
例如,在 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)中,当前执行的上下文位于栈顶。
执行上下文包括以下三种类型:
- 全局执行上下文(Global Execution Context):默认的全局环境,在代码执行之前被创建。
- 函数执行上下文(Function Execution Context):在函数调用时创建,包含函数的局部变量、参数等信息。
- Eval 执行上下文:eval 函数执行时创建的上下文,通常不推荐使用。
10)闭包
闭包(Closure):指函数和其相关的引用环境的组合。闭包允许函数访问其外部作用域中的变量,即使函数在外部作用域执行完毕后仍然可以访问这些变量。闭包的核心特点是函数可以记住并访问其词法作用域,即使函数在定义时所处的作用域已经销毁。
闭包常用于实现私有变量、模块化、延迟执行等场景。JavaScript 中的事件处理函数、定时器函数等都是闭包的应用。使用闭包需要注意内存泄漏的问题,因为闭包会持有外部作用域中的变量,导致这些变量无法被垃圾回收。
开源项目地址:https://gitee.com/falle22222n-leaves/vue_-book-manage-system
Github & Gitee 前后端总计已经 1000+ Star,1.5W+ 访问!
⭐点赞⭐收藏⭐不迷路!⭐