【前端面试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;
    

    }

    复制代码
相关推荐
理想不理想v几秒前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云10 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058713 分钟前
web端手机录音
前端
齐 飞18 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
九圣残炎27 分钟前
【从零开始的LeetCode-算法】1456. 定长子串中元音的最大数目
java·算法·leetcode
lulu_gh_yu32 分钟前
数据结构之排序补充
c语言·开发语言·数据结构·c++·学习·算法·排序算法
神仙别闹35 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
丫头,冲鸭!!!1 小时前
B树(B-Tree)和B+树(B+ Tree)
笔记·算法
Re.不晚1 小时前
Java入门15——抽象类
java·开发语言·学习·算法·intellij-idea
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript