5.9号模拟前端面试10问

5.9号模拟前端面试10问

1.html语义化的理解

HTML语义化是指使用具有明确含义的HTML标签来描述内容，而不仅仅是使用<div>和<span>等通用容器标签。语义化的HTML代码更易于阅读和维护，同时也有助于搜索引擎优化（SEO）。

例如，使用<header>、<nav>、<main>、<article>、<section>、<aside>和<footer>等语义化标签，可以清晰地表达页面的结构。这些标签不仅有助于开发者理解代码，还有助于浏览器更好地解析和渲染页面。同时也有助于提高网站的可访问性和搜索引擎排名。

2. < b>和< strong>的区别

和标签在HTML中都用于加粗文本，但它们在语义上有所不同。

标签是用于表示简单的样式变化，它不会给文本增加任何额外的强调或重要性。它只是简单地将文本变为粗体，而不会改变文本的语义。

标签则具有更强的语义含义，它表示文本具有重要的意义或强调。搜索引擎会识别标签并将其视为关键词，有助于提高SEO效果。此外，对于视觉障碍的用户，屏幕阅读器通常会以不同的方式读出标签的内容，使其更加突出。

私信【学习】即可获取前端资料 都整理好啦！！！

在浏览器默认样式中，标签通常没有特殊的视觉差异，而标签可能会显示为更粗的字体或其他强调样式，具体取决于浏览器的默认样式表。

总的来说，标签适用于简单的样式变化，而标签适用于强调或重要的文本。在SEO和可访问性方面，使用标签可以提供更好的效果。

3.对闭包的理解

闭包就是一个函数能够访问它外面的那个作用域里的变量，即使外面的代码已经运行完了。在JavaScript里，我们通过把一个函数放在另一个函数里面，以及利用词法作用域的规则来实现闭包。

闭包的好处在于它能够让函数保留一些信息，这样即使函数被多次调用，它也能记得之前的一些东西。这对于创建只属于函数自己的秘密变量和实现模块化编程等地方特别有用。

下面是一个闭包的代码示例：

function outer() {
  let count = 0;

  function inner() {
    count++;
    console.log(count);
  }

  return inner;
}

const counter = outer();
counter(); // 输出 1
counter(); // 输出 2

在这个例子中，inner函数可以访问outer函数中的count变量，即使outer函数已经执行完毕。每次调用counter时，count的值都会递增。这就是闭包的作用。

4.⼯程中闭包使⽤场景

闭包（closures）是JavaScript中的一个重要概念，它允许一个函数访问并操作其外部作用域中的变量，即使在外部函数已经执行完毕之后。

闭包对内存管理的影响主要体现在它可以让局部变量在函数执行完毕后仍然保留在内存中，因为这些局部变量被外部函数的引用所持有。这有助于实现私有变量和持久化状态，但过度使用闭包可能会导致内存占用过高。

闭包在实际编程中的应用场景包括：

  1. 创建私有变量：通过闭包，我们可以创建只能在特定作用域内访问的变量，从而实现封装和数据隐藏。
  2. 实现模块化：闭包可以帮助我们将代码模块化，每个模块都有自己的独立作用域，不会污染全局作用域。
  3. 实现高阶函数：闭包使得我们可以将函数作为参数传递给其他函数，或者将函数作为返回值返回。

下面是一个利用闭包实现私有变量的代码示例：

function counter() {
  let count = 0;

  function increment() {
    count++;
    return count;
  }

  return increment;
}

const myCounter = counter();
console.log(myCounter()); // 输出 1
console.log(myCounter()); // 输出 2

在这个例子中，counter函数返回了一个内部函数increment，这个内部函数可以访问并修改count变量。当我们调用myCounter时，它会保留上一次调用时count的值，从而实现了计数器的功能。这种实现方式的优势在于，count变量是私有的，不能直接访问和修改，保证了数据的安全性。同时，每次调用myCounter时，都会返回一个新的闭包，实现了多个独立的计数器。

5.介绍this和原型

在JavaScript中，"this"关键字是一个特殊的变量，它在函数内部被自动定义。它的值取决于函数的调用方式。例如，如果一个函数以方法的形式被调用，那么"this"通常指向调用它的对象。如果一个函数以函数的形式被调用（即非方法形式），那么"this"通常指向全局对象（在浏览器中是window）。

原型（prototype）是JavaScript中的一个核心概念，它是实现继承的主要机制。每个JavaScript对象都有一个原型对象，当我们试图访问一个对象的属性时，如果该对象本身没有这个属性，那么JavaScript会去它的原型对象上找。

"this"和原型在JavaScript中非常重要，因为它们是实现面向对象编程的关键。例如，我们可以使用原型来实现共享属性和方法，从而减少内存消耗。同时，"this"关键字可以帮助我们更好地理解和控制函数的行为。

以下是一个代码示例，展示了"this"和原型在实际开发中的应用：

function Person(name, age) {
    this.name = name;
    this.age = age;
}

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

var person1 = new Person("Alice", 20);
person1.sayHello(); // 输出 "Hello, my name is Alice"

在这个例子中，我们定义了一个Person构造函数，并使用"this"关键字来设置其属性。然后，我们在Person的原型上定义了一个sayHello方法，这样所有的Person实例都可以共享这个方法，而不是每个实例都有自己的sayHello方法副本。

私信【学习】即可获取前端资料 都整理好啦！！！

6.使⽤原型最⼤的好处

使用原型的最大好处是实现对象之间的共享和重用。通过将共享的属性和方法定义在原型上，而不是每个实例中，可以减少内存消耗并提高性能。此外，当需要修改或扩展方法时，只需修改原型上的方法即可，所有实例都会自动继承这些更改。

以下是一个代码示例，展示了如何使用原型实现对象之间的共享：

function Person(name) {
    this.name = name;
}

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

var person1 = new Person("Alice");
var person2 = new Person("Bob");

person1.sayHello(); // 输出 "Hello, my name is Alice"
person2.sayHello(); // 输出 "Hello, my name is Bob"

在这个例子中，我们定义了一个Person构造函数，并在其原型上定义了一个sayHello方法。这样，所有的Person实例都可以共享这个方法，而不是每个实例都有自己的sayHello方法副本。

7. react设计思路

在React中进行设计时，我首先会考虑组件化的思想。我会将整个应用划分为多个独立的组件，每个组件负责一个特定的功能或界面部分。这样可以提高代码的可维护性和复用性。

接下来，我会使用状态管理来管理组件之间的数据传递和共享。React提供了Context API和Redux等工具来实现状态管理。通过使用这些工具，我可以确保组件之间能够正确地共享和更新数据。

此外，我会注重组件的可测试性。React提供了一些测试工具，如Jest和Enzyme，可以帮助我编写单元测试和集成测试，确保组件的正确性和稳定性。

最后，我会关注性能优化。React提供了一些性能优化的技巧，如使用虚拟DOM、合理使用 shouldComponentUpdate 生命周期方法等，以提高应用的性能和用户体验。

以下是一个简单的React组件示例：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

在这个示例中，我创建了一个简单的计数器组件。它使用了useState Hook来管理计数器的值，并在点击按钮时增加计数。这个组件可以独立使用，也可以与其他组件进行组合和复用。

8.为什么虚拟DOM⽐真实DOM性能好

私信【学习】即可获取前端资料 都整理好啦！！！

虚拟DOM相较于真实DOM在性能方面的优势主要体现在以下几个方面：

  1. 减少重排和重绘：真实DOM的操作会导致页面的重排和重绘，而虚拟DOM通过对比新旧虚拟DOM的差异，只更新需要改变的部分，从而减少了重排和重绘的次数。

  2. 批量更新：虚拟DOM可以将多次操作合并为一次批量更新，减少了频繁的操作导致的性能损耗。

  3. 跨平台渲染：虚拟DOM可以在不同的平台上进行渲染，如浏览器、服务器等，提高了代码的可移植性和灵活性。

以下是一个使用虚拟DOM的React代码示例：

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default App;

在这个示例中，我们使用了React的useState Hook来管理计数器的值。当点击按钮时，会触发increment函数，通过setCount更新计数器的值。React会自动将新的虚拟DOM与旧的虚拟DOM进行对比，只更新需要改变的部分，从而提高了性能。

9. react常⻅的通信⽅式

在React中，常见的通信方式有以下几种：

  1. 父子组件通信：父组件向子组件传递数据，可以通过props进行传递。子组件向父组件传递数据，可以通过回调函数或者使用context实现。

  2. 跨层级组件通信：可以使用context或者状态管理库（如Redux、MobX）来实现跨层级的组件通信。

  3. 同层级组件通信：可以使用事件总线（Event Bus）或者状态管理库（如Redux、MobX）来实现同层级的组件通信。

以下是一个简单的父子组件通信的代码示例：

import React, { useState } from 'react';

function ChildComponent(props) {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
    props.onChildValueChange(e.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
    </div>
  );
}

function ParentComponent() {
  const [parentValue, setParentValue] = useState('');

  const handleChildValueChange = (value) => {
    setParentValue(value);
  };

  return (
    <div>
      <p>Parent Value: {parentValue}</p>
      <ChildComponent onChildValueChange={handleChildValueChange} />
    </div>
  );
}

export default ParentComponent;

在这个示例中，父组件ParentComponent向子组件ChildComponent传递了一个回调函数handleChildValueChange，子组件通过调用这个回调函数将输入框的值传递给父组件。

10. redux整体的⼯作流程

Redux是一个用于管理JavaScript应用程序状态的库，它遵循函数式编程的思想，使得状态管理变得更加简单、可预测。Redux的整体工作流程如下：

在这里插入图片描述

  1. 首先，用户通过View触发一个Action。
  2. 然后，Dispatcher接收到这个Action，并将其分发给Store。
  3. Store接收到Action后，会调用Reducer函数，传入当前的State和收到的Action。
  4. Reducer函数根据Action的类型和负载，返回一个新的State。
  5. Store将新的State替换旧的State，并将新的State传递给View。
  6. View根据新的State更新界面。

以下是一个简化版的Redux工作流程代码示例：

// 定义Action类型
const INCREMENT = 'INCREMENT';

// 定义Action创建函数
function increment(value) {
  return {
    type: INCREMENT,
    value: value
  };
}

// 定义Reducer函数
function counter(state = 0, action) {
  switch (action.type) {
    case INCREMENT:
      return state + action.value;
    default:
      return state;
  }
}

// 创建Store
const store = createStore(counter);

// 订阅Store的更新
store.subscribe(() => {
  console.log('Current state:', store.getState());
});

// 触发Action
store.dispatch(increment(1)); // 输出：Current state: 1
store.dispatch(increment(1)); // 输出：Current state: 2

在这个示例中，我们定义了一个简单的计数器应用。当触发INCREMENT类型的Action时，Reducer函数会根据Action的负载值更新State，然后Store将新的State传递给View（这里是控制台输出）。

私信【学习】即可获取前端资料 都整理好啦！！！

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/608694.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

前端基础知识-ES6扩展运算符(快速实现数组添加新元素、字符串转为数组、对象添加新属性)

前端基础知识-ES6扩展运算符(快速实现数组添加新元素、字符串转为数组、对象添加新属性)

前言&#xff1a; 扩展运算符又称为Rest运算符&#xff0c;可以实现数组、对象、字符串在语法层面上的展开&#xff0c;达到简化语法的目的&#xff0c;使得我们提高开发效率 主要用法&#xff1a; 在需要解构的变量前加三个点&#xff08;...xxx&#xff09; 具体示例&…
阅读更多...
大数据毕业设计Python+Django地铁客流量预测 时间序列 深度学习 机器学习 人工智能 Python爬虫 计算机毕业设计

大数据毕业设计Python+Django地铁客流量预测 时间序列 深度学习 机器学习 人工智能 Python爬虫 计算机毕业设计

​ 博主介绍&#xff1a;全网粉丝100W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业毕业设计项目实战6年之久&#xff0c;选择我们就是选择放心、选择安心毕业感兴趣的可以先收藏起来&#xff0c;点赞、关注不迷路 西安工程大学本科毕业设计&#xff…
阅读更多...
Xamarin.Android项目网络串口助手怎么通过路由器跟PC网络串口连接

Xamarin.Android项目网络串口助手怎么通过路由器跟PC网络串口连接

AndroidManifest.xml ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/1ae7cd0d03c84343a62bccfd92e45d2c.png)
阅读更多...
Mendix创客访谈录｜助力工业领域，Mendix与IIOT相融合

Mendix创客访谈录｜助力工业领域，Mendix与IIOT相融合

本期创客 汤登揆 太平洋电信股份有限公司 AI 技术支持工程师 大家好&#xff0c;我是汤登揆&#xff0c;帝国理工大学&#xff0c;生态算法专业&#xff0c;主要关注于产品结构分析和产品应用落地。 目前任职于太平洋电信股份有限公司&#xff0c;主要专注于AI大模型的应用落地…
阅读更多...
python3.12.0 在Linux 制作镜像包 部署到docker 全过程

python3.12.0 在Linux 制作镜像包 部署到docker 全过程

项目结构&#xff1a; 比如&#xff0c;在pycharm里需要运行 themain.py 1、上传Linux的目录结构&#xff1a; Dockerfile 文件需要制作&#xff1a; 这里是关键&#xff1a; #基于的基础镜像 FROM python:3.12.0 #代码添加到code文件夹 ADD ./EF_NFCS /code #设置code文…
阅读更多...
工厂的隐性成本有哪些？如何应对？

工厂的隐性成本有哪些？如何应对？

隐性成本是指企业在生产过程中不易被察觉或量化的成本&#xff0c;它们往往隐藏在企业的日常运营中&#xff0c;但同样会对企业的总成本产生影响。 工厂的隐性成本有哪些&#xff1f; 工厂的隐性成本主要包括以下几个方面&#xff1a; 1、停滞资源成本&#xff1a;如闲置的机…
阅读更多...
effective python学习笔记_推导与生成

effective python学习笔记_推导与生成

用推导取代map和filter 序列推导可取代map和filter&#xff0c;优越性有&#xff1a;1可读性强2不需要map的函数 控制推导逻辑的子表达式不要超过2个 即推导的for层数最多建议两层&#xff0c;多了可读性会下降&#xff0c;反而用for循环会清晰 一层for内可连接多个if&…
阅读更多...
LifeCycle之ProcessLifeCycleOwner

LifeCycle之ProcessLifeCycleOwner

问题&#xff1a;想要知道应用程序当前处在前台、后台、或从后台回到前台&#xff0c;想要知道应用的状态&#xff0c; LifeCycle提供了ProcessLifeCycleOwner的类&#xff0c;方便我们知道整个应用程序的生命周期情况 ProcessLifeCycleOwner 使用方法 1.首先添加依赖 imple…
阅读更多...
初学者理解Transformer，本文is all you need

初学者理解Transformer，本文is all you need

要问现在AI领域哪个概念最热&#xff0c;必然是openAI推出chatGPT之后引发的大模型。然而这项技术的起源&#xff0c;都来自一篇google公司员工的神作“Attention Is All You Need”——本文标题也是一种致敬^_^&#xff0c;目前已有近12万的引用(还在增长)。 在“Attention Is…
阅读更多...
【qt】容器的用法

【qt】容器的用法

容器目录 一.QVertor1.应用场景2.增加数据3.删除数据4.修改数据5.查询数据6.是否包含7.数据个数8.交换数据9.移动数据10.嵌套使用 二.QList1.应用场景2.QStringList 三.QLinkedList1.应用场景2.特殊点3.用迭代器来变量 四.QStack1.应用场景2.基本用法 五.QQueue1.应用场景2.基本…
阅读更多...
【设计模式】JAVA Design Patterns——Abstract-document

【设计模式】JAVA Design Patterns——Abstract-document

&#x1f50d; 目的 使用动态属性&#xff0c;并在保持类型安全的同时实现非类型化语言的灵活性。 &#x1f50d; 解释 抽象文档模式使您能够处理其他非静态属性。 此模式使用特征的概念来实现类型安全&#xff0c;并将不同类的属性分离为一组接口 真实世界例子 考虑由多个部…
阅读更多...
【Linux】在Linux中执行命令ifconfig， 报错-bash:ifconfig: command not found解决方案

【Linux】在Linux中执行命令ifconfig， 报错-bash:ifconfig: command not found解决方案

一、报错信息 ifconfig 报错-bash:ifconfig: command not found 同时&#xff0c;通过ip addr查看&#xff0c;也看不到IP信息 二、解决方案 找到ifcfg-ens0文件&#xff0c;此文件的目录在/etc/sysconfig/network-scripts目录下 命令&#xff1a;cd /etc/sysconfig/network…
阅读更多...
89C52单片机+ESP8266做的物联网+反馈 e4a手机客户端源程序

89C52单片机+ESP8266做的物联网+反馈 e4a手机客户端源程序

资料下载地址&#xff1a;89C52单片机ESP8266做的物联网反馈 e4a手机客户端源程序 MCU是89C52单片机 WiFi模块是ESP8266 其他 8路继电器 电源模块 使用贝壳物联做服务器 还有客户端。 也可以用花生壳做内网穿透&#xff0c;8266做服务器&#xff0c;也可以实现物联以及反馈&a…
阅读更多...
vue多选功能

vue多选功能

废话不多说&#xff0c;直接上代码&#xff01;&#xff01;&#xff01; <template><div class"duo-xuan-page"><liv-for"(item, index) in list":key"index"click"toggleSelection(item)":class"{ active: sel…
阅读更多...
[前后端基础]图片详解

[前后端基础]图片详解

[前后端基础]图片传输与异步-CSDN博客 https://juejin.cn/post/6844903782959022093#heading-3 base64、file和blob用JS进行互转的方法大全【前端】_js base64转blob-CSDN博客 后端存储方式 对于第一种存储方式&#xff0c;我们前端直接将存储路径赋值给 src 属性即可轻松显示。…
阅读更多...
react项目中封装一个通用的边界Boundary

react项目中封装一个通用的边界Boundary

# Boundary 通用的边界,同时是一个Suspense 和一个 ErrorBoundary 正常情况不直接用,使用一下几个封装好的: -Boundary.FullSizeLoading: 占满父容器全部高度,居中显示等待动画; -Boundary.Loading: 占满一行,显示一个普通尺寸的等待动画; -Boundary.Blank: 什么都不显示…
阅读更多...
Hadoop3：HDFS的Shell操作（常用命令汇总）

Hadoop3：HDFS的Shell操作（常用命令汇总）

一、简介 什么是HDFS的Shell操作&#xff1f; 很简单&#xff0c;就是在Linux的终端&#xff0c;通过命令来操作HDFS。 如果&#xff0c;你们学习过git、docker、k8s&#xff0c;应该会发现&#xff0c;这些命令的特点和shell命令非常相似 二、常用命令 1、准备工作相关命令…
阅读更多...
let命令

let命令

let 命令 let 与 var 二者区别&#xff1a; 作用域不同&#xff1a;变量提升&#xff08;Hoisting&#xff09;&#xff1a;临时性死区重复声明&#xff1a; 联系&#xff1a;举例说明&#xff1a; 块级作用域 块级作用域的关键字使用 var&#xff08;无块级作用域&#xff09;…
阅读更多...
x64dbg中类似于*.exe+地址偏移

x64dbg中类似于*.exe+地址偏移

在CE和xdb中&#xff0c;形如*.exe数字偏移形式的地址被称为模块地址&#xff0c;CE附加到进程后点击查看内存&#xff0c;显示如下图 这种地址学名叫做模块地址&#xff0c;在x64dbg中显示如下图&#xff1a; CE中可以关闭&#xff0c;从而显示绝对的虚拟地址&#xff0c;如下…
阅读更多...
Hive-URL解析函数

Hive-URL解析函数

Hive-URL解析函数 1.实际工作需求 2.URL的基本组成 3.Hive中的Url解析函数 parse_url函数 parse_url_tuple函数
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站