【前端面试3+1】09 ES6新特性、Promise原理 、浏览器从输入到页面渲染的过程、【罗马数字转整数】

news2024/12/23 22:35:53

一、ES6新特性

ES6(ECMAScript 2015)是JavaScript的一个重要更新版本,引入了许多新特性和语法改进,下面详细说明一些主要的新特性:

1. let 和 const 声明:

  • 使用`let`和`const`关键字可以声明块级作用域的变量,解决了`var`存在的变量提升和作用域问题。

  • `let`声明的变量可以被修改,`const`声明的变量是常量,不可被修改。

2. 箭头函数:

  •  箭头函数提供了一种更简洁的函数定义方式。
  • 箭头函数没有自己的`this`,会捕获所在上下文的`this`值。

3. 模板字符串:

  •    使用反引号(``)来创建字符串模板,可以在其中插入变量和表达式。
  •    提供了更方便的字符串拼接和多行字符串的支持。

4. 解构赋值:

  •   可以轻松地从数组或对象中提取数据并赋值给变量。
  •   提供了更便捷的数据解构和赋值操作。

5. 默认参数值:

  •   可以为函数参数指定默认值,简化了函数的使用。
  •    在调用函数时可以不传递参数,使用默认值。

6. 类:

  •   引入了类的概念,可以更方便地定义对象的构造函数和方法。
  •   提供了更符合面向对象编程的语法。

7. 模块:

  •    引入了模块化的概念,可以将代码分割成独立的文件并导入导出模块。
  •    提供了更好的代码组织和复用性。

8. Promise:

  •    引入了Promise对象,简化了异步操作的处理,避免了回调地狱。
  •    提供了更清晰和可靠的异步编程方式。

9. Generator 函数:

  •    Generator函数是一种可以暂停和恢复执行的函数。
  •    可以通过`yield`关键字实现迭代器的功能,用于简化异步编程。

二、Promise原理 

定义:

        Promise 是 JavaScript 中处理异步操作的一种方式,它是一个代表了异步操作最终完成或失败的对象。Promise 有三种状态:Pending(进行中)、Fulfilled(已成功)和Rejected(已失败)。

原理:

  1. 创建 Promise 对象: 使用 new Promise() 构造函数可以创建一个 Promise 对象,该构造函数接收一个带有 resolve 和 reject 两个参数的执行器函数作为参数。

  2. 执行器函数: 执行器函数会立即执行,其中包含异步操作。当异步操作完成时,可以调用 resolve() 方法将 Promise 状态从 Pending 变为 Fulfilled,或调用 reject() 方法将 Promise 状态从 Pending 变为 Rejected。

  3. 处理 Promise 状态: 可以通过 then() 方法来处理 Promise 的状态变化。then() 方法接收两个参数,第一个参数是处理 Promise Fulfilled 状态的回调函数,第二个参数是处理 Promise Rejected 状态的回调函数。

  4. Promise 链式调用: 可以通过链式调用 then() 方法来处理多个异步操作的顺序执行。每个 then() 方法返回一个新的 Promise 对象,可以继续调用 then() 方法或 catch() 方法处理后续的状态变化。

  5. 错误处理: 可以通过 catch() 方法来捕获 Promise 链中的任何错误。如果 Promise 链中的任何一个 Promise 被拒绝(Rejected),错误会被传递到最近的 catch() 方法中进行处理。

总结:

        Promise 的原理是通过状态的变化和链式调用来处理异步操作,使得异步编程更加清晰和可控。通过 Promise,可以更好地处理异步操作的结果,避免了回调地狱和提供了更优雅的代码结构。

三、 浏览器从输入到页面渲染的过程

  1. 输入 URL: 用户在浏览器地址栏输入网址或点击链接,浏览器接收到 URL 请求。

  2. 发起请求: 浏览器向服务器发送 HTTP 请求,请求网页的资源(HTML、CSS、JavaScript、图片等)。

  3. 接收响应: 服务器接收到请求后,返回相应的资源文件给浏览器。

  4. 构建 DOM 树: 浏览器开始解析 HTML 文件,构建 DOM(文档对象模型)树,表示页面的结构。

  5. 构建 CSSOM 树: 解析 CSS 文件,构建 CSSOM(CSS 对象模型)树,表示页面的样式。

  6. 合并 DOM 和 CSSOM: 浏览器将 DOM 树和 CSSOM 树合并,生成渲染树(Render Tree),用于页面的布局和绘制。

  7. 布局(Layout): 浏览器根据渲染树计算每个节点在页面上的位置和大小,进行布局。

  8. 绘制(Paint): 浏览器根据布局信息,将页面上的内容绘制到屏幕上。

  9. 渲染页面: 浏览器渲染完页面后,显示在用户的屏幕上,用户可以看到页面内容。

  10. 交互和事件处理: 用户可以与页面进行交互,点击链接、按钮等,触发相应的事件处理函数。

简短版:在这个过程中,浏览器会进行网络请求、解析 HTML、构建 DOM 树、解析 CSS、计算布局、绘制页面等操作,最终将页面呈现给用户。

四、【算法】 罗马数字转整数

21.题目:

罗马数字包含以下七种字符: I, V, X, LCD 和 M

字符          数值
I             1
V             5
X             10
L             50
C             100
D             500
M             1000

例如, 罗马数字 2 写做 II ,即为两个并列的 1 。12 写做 XII ,即为 X + II 。 27 写做  XXVII, 即为 XX + V + II 。

通常情况下,罗马数字中小的数字在大的数字的右边。但也存在特例,例如 4 不写做 IIII,而是 IV。数字 1 在数字 5 的左边,所表示的数等于大数 5 减小数 1 得到的数值 4 。同样地,数字 9 表示为 IX。这个特殊的规则只适用于以下六种情况:

  • I 可以放在 V (5) 和 X (10) 的左边,来表示 4 和 9。
  • X 可以放在 L (50) 和 C (100) 的左边,来表示 40 和 90。 
  • C 可以放在 D (500) 和 M (1000) 的左边,来表示 400 和 900。

给定一个罗马数字,将其转换成整数。

2.解题:

        主要思路是遍历输入的罗马数字字符串,根据罗马数字字符对应的数值进行累加,同时根据特殊规则进行相应的减法操作。

具体步骤如下:

  1. 初始化结果变量result为0,前一个字符的值prev为0。
  2. 遍历输入的罗马数字字符串,对每个字符进行判断:
  •           ·根据当前字符的值current进行累加到result中。
    • 如果当前字符的值current大于前一个字符的值prev,则需要减去两倍的前一个字符的值,因为当前字符是由前一个字符减去的,而prev已经在上一步中加过一次了。
  1. 更新prev为当前字符的值,继续下一次循环。
  2. 最终返回result作为转换后的整数值

int romanToInt(char* s) {
    if(s == NULL || *s == '\0') {
        return 0;
    }
    
    int result = 0;
    int prev = 0;
    
    while(*s != '\0') {
        int current = 0;
        
        switch(*s) {
            case 'I':
                current = 1;
                break;
            case 'V':
                current = 5;
                break;
            case 'X':
                current = 10;
                break;
            case 'L':
                current = 50;
                break;
            case 'C':
                current = 100;
                break;
            case 'D':
                current = 500;
                break;
            case 'M':
                current = 1000;
                break;
            default:
                return 0;
        }
        
        result += current;
        
        if(current > prev) {
            result -= 2 * prev;
        }
        
        prev = current;
        s++;
    }
    
    return result;
}
```

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Go-Gin中优雅的实现参数校验,自定义错误消息提示

问题描述 在参数校验的时候我们一般会基于"github.com/go-playground/validator/v10"这个库给结构体加标签实现校验参数,当参数校验错误的时候,他的提示一般是英文的,怎么自定义参数错误提示呢?跟着我一步步来 注册校…

集合的学习

为什么要有集合:集合会自动扩容 集合不能存基本数据类型(基本数据类型是存放真实的值,而引用数据类型是存放一个地址,这个地址存放在栈区,地址所指向的内容存放在堆区) 数组和集合的对比: 集…

什么是js、ajax

1.什么是js JavaScript(简称 JS)是一种轻量级、解释型的编程语言,通常用于在 Web 页面上添加交互性、动态性和动画效果。它是世界上最流行的编程语言之一,也是唯一一种可以在 Web 浏览器中运行的编程语言。 2.什么是AJAX ajax…

华为审核被拒提示: 您的应用存在(最近任务列表隐藏风险活动)的行为,不符合华为应用市场审核标准

应用审核意见: 您的应用存在(最近任务列表隐藏风险活动)的行为,不符合华为应用市场审核标准。 修改建议:请参考测试结果进行修改。 请参考《审核指南》第2.19相关审核要求:https://developer.huawei.com/c…

算法整理:二分查找

1二分查找:在有序集合搜索特定值的过程,每次比较之后将查找空间一分为二。 target:要查找的值 index:当前位置 left,right:维持查找空间的指标 mid:用来确定向左查还是向右查的索引 查找空间: [left,right] 二分查找维护left,right&#xff0…

ElementUI 表格横向滚动条时滚动到指定位置

ElementUI 表格横向滚动条时滚动到指定位置 getColumnOffset(columnProp) {this.$nextTick(() > {const table this.$refs.tableRef.$refs.multipleTable;const columns table.columns;const column columns.find((col) > col.property columnProp);if (column) {// …

Transformer模型-softmax的简明介绍

今天介绍transformer模型的softmax softmax的定义和目的: softmax:常用于神经网络的输出层,以将原始的输出值转化为概率分布,从而使得每个类别的概率值在0到1之间,并且所有类别的概率之和为1。这使得Softmax函数特别适…

rabbitmq死信交换机,死信队列使用

背景 对于核心业务需要保证消息必须正常消费,就必须考虑消费失败的场景,rabbitmq提供了以下三种消费失败处理机制 直接reject,丢弃消息(默认)返回nack,消息重新入队列将失败消息投递到指定的交换机 对于核…

SpringBoot | Spring Boot“整合Redis“

目录: 1. Redis 介绍2. Redis 下载安装3. Redis “服务开启”和“连接配置”4. Spring Boot整合Redis的“前期准备” :① 编写实体类② 编写Repository 接口③ 在“全局配置文件”中添加 “Redis数据库” 的 “相关配置信息” 5. Spring Boot整合“Redis” (案例展示) 作者简介…

【蓝桥杯嵌入式】13届程序题刷题记录及反思

一、题目分析 考察内容: led按键(短按)PWM输出(PA1)串口接收lcd显示 根据PWM输出占空比调节,高频与低频切换 串口接收(指令解析)【中断接收】 2个显示界面 led灯闪烁定时器 二…

Centos8/linux/虚拟机安装docker

docker分为ce版和ee版,像一般的小型团体和个人使用ce版就够了,别问为什么,问就是ee版收费。 1.首先切换到root用户 2.为确保安装时出现不必要的问题,先更新一下yum包 sudo yum update 3.如果之前安装过需要删除之间安装的CE版…

Flutter应用混淆技术原理与实践

在移动应用开发中,保护应用代码安全至关重要。Flutter 提供了简单易用的混淆工具,帮助开发者在构建 release 版本应用时有效保护代码。本文将介绍如何在 Flutter 应用中使用混淆,并提供了相关的操作步骤和注意事项。 📝 摘要 本…

基于深度学习的车牌检测系统(网页版+YOLOv8/v7/v6/v5代码+训练数据集)

摘要:本文深入研究了基于YOLOv8/v7/v6/v5的车牌检测系统,核心采用YOLOv8并整合了YOLOv7、YOLOv6、YOLOv5算法,进行性能指标对比;详述了国内外研究现状、数据集处理、算法原理、模型构建与训练代码,及基于Streamlit的交…

StreamingT2V文本生成视频多模态大模型,即将开源!

1、前言 Picsart人工智能研究所、德克萨斯大学和SHI实验室的研究人员联合推出了StreamingT2V视频模型。通过文本就能直接生成2分钟、1分钟等不同时间,动作一致、连贯、没有卡顿的高质量视频。 虽然StreamingT2V在视频质量、多元化等还无法与Sora媲美,但…

【zlm】音视频流与音频流合并的设计

目录 设想一 设想二 方案三 关键技术 测试语句 测试脚本 参考文档 设想一 //开始录制_option.mp4_save_path custom_path;_option.mp4_max_second max_second;vector<Track::Ptr> mytracks getTracks();auto src MediaSource::find( DEFAULT_VHOST, "1&quo…

基于单片机32X32LED汉字滚动点阵屏显示设计

**单片机设计介绍&#xff0c;基于单片机32X32LED汉字滚动点阵屏显示设计 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机32X32LED汉字滚动点阵屏显示设计是一个融合了硬件、软件以及电子显示技术的综合性项目。以下是对该设计的…

ES8 学习 -- async 和 await / 对象方法扩展 / 字符串填充

文章目录 1. async 和 await1.1 基本语法1.2 使用示例1.3 案例练习 2. 对象方法扩展2.1 Object.values(obj)2.2 Object.entries(obj)2.3 Object.getOwnPropertyDescriptors(obj)使用示例 3. 字符串填充4. 函数参数的末尾加逗号 1. async 和 await async 函数&#xff0c;使得异…

【嵌入式硬件】光耦

1.光耦作用 光耦一般用于信号的隔离。当两个电路的电源参考点不相关时,使用光耦可以保证在两边不共地的情况下,完成信号的传输。 2.光耦原理 光耦的原理图如下所示,其内部可以看做一个特殊的“三极管”; 一般的三极管是通过基极B和发射极E间的电流,去控制集电极C和发射极…

图像处理与视觉感知---期末复习重点(6)

文章目录 一、图像分割二、间断检测2.1 概述2.2 点检测2.3 线检测2.4 边缘检测 三、边缘连接3.1 概述3.2 Hough变换3.3 例子3.4 Hough变换的具体步骤3.5 Hough变换的法线表示形式3.6 Hough变换的扩展 四、阈值处理4.1 概述4.2 计算基本全局阈值算法4.3 自适应阈值 五、基于区域…

视频汇聚/安防监控/EasyCVR平台播放器EasyPlayer更新:新增【性能面板】

视频汇聚/安防监控/视频存储平台EasyCVR基于云边端架构&#xff0c;可以在复杂的网络环境中快速、灵活部署&#xff0c;平台视频能力丰富&#xff0c;可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云…