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

一、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 对象,该构造函数接收一个带有 resolvereject 两个参数的执行器函数作为参数。

  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.题目:

罗马数字包含以下七种字符: IVXLCDM

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

例如, 罗马数字 2 写做 II ,即为两个并列的 1 。12 写做 XII ,即为 X + II27 写做 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;

    }

    复制代码
相关推荐
水银嘻嘻1 小时前
08 web 自动化之 PO 设计模式详解
前端·自动化
CM莫问2 小时前
<论文>(微软)避免推荐域外物品:基于LLM的受限生成式推荐
人工智能·算法·大模型·推荐算法·受限生成
康谋自动驾驶2 小时前
康谋分享 | 自动驾驶仿真进入“标准时代”:aiSim全面对接ASAM OpenX
人工智能·科技·算法·机器学习·自动驾驶·汽车
C++ 老炮儿的技术栈3 小时前
什么是函数重载?为什么 C 不支持函数重载,而 C++能支持函数重载?
c语言·开发语言·c++·qt·算法
Zero1017133 小时前
【详解pnpm、npm、yarn区别】
前端·react.js·前端框架
&白帝&4 小时前
vue右键显示菜单
前端·javascript·vue.js
Wannaer4 小时前
从 Vue3 回望 Vue2:事件总线的前世今生
前端·javascript·vue.js
yychen_java4 小时前
R-tree详解
java·算法·r-tree
羽球知道4 小时前
在Spark搭建YARN
前端·javascript·ajax
MarkHard1234 小时前
Leetcode (力扣)做题记录 hot100(62,64,287,108)
算法·leetcode·职场和发展