前端面试题详解整理18|RGB和十六进制颜色表示法，null和undefined双等，三等之类的CSS画三角形，URL能够发现什么信息

金色的雨570
119 阅读14分钟

www.nowcoder.com/feed/main/d…

腾讯秋招前端二面

面试官先迟到了10分钟？ok，fine
然后随随便便面了15分钟，就说今天面试就这样吧，没有开摄像头，也没有反问环节，也没有手撕环节
面试内容，随便问了一下我最近的实习项目，也是我一直在输出，可以听出来面试官不感兴趣。然后随便问了两道题目，后端怎么监听前端请求（？我面前端啊），发送一个异步请求发生的事情（我把浏览器+axios结合了一下，可以听出来不感兴趣）
然后，就结束了？就差把kpi写脸上了是吧，你不想好好面为什么要约二面啊

后端可以通过以下方式监听前端的请求：

  1. HTTP服务器：

    • 后端通常会部署一个HTTP服务器（如Node.js的Express框架、Python的Django框架、Java的Spring框架等），用于监听来自客户端（包括前端）的HTTP请求。
    • 在服务器端，可以通过设置路由来监听特定URL路径的请求，并根据请求的方法（GET、POST等）和参数来执行相应的操作。

  2. 路由设置：

    • 在后端框架中，可以设置路由规则，将特定的URL路径映射到对应的处理函数。
    • 前端发送请求时，可以指定相应的URL路径，后端根据路由规则将请求分发给对应的处理函数进行处理。

  3. 中间件：

    • 后端框架通常支持中间件机制，可以在请求到达处理函数之前进行一些预处理或者拦截操作。
    • 通过中间件，可以实现请求的日志记录、身份验证、权限控制等功能。

  4. WebSocket：

    • 如果需要实时通信，后端也可以使用WebSocket技术，通过WebSocket协议与前端建立长连接，实现双向实时通信。
    • 后端可以通过WebSocket监听前端的消息，并根据消息类型执行相应的操作。

  5. 消息队列：

    • 如果后端需要处理大量的异步请求或者需要进行任务调度，可以使用消息队列技术（如RabbitMQ、Kafka等）。
    • 前端可以将请求发送到消息队列中，后端监听消息队列中的消息，并根据消息内容进行相应的处理。

通过以上方式，后端可以监听前端的请求，并根据请求的内容执行相应的操作，实现前后端之间的通信和数据交互。 发送一个异步请求的过程通常包括以下步骤：

  1. 准备请求数据： 在前端代码中，首先准备需要发送的请求数据，包括URL、请求方法、请求头、请求参数等。

  2. 创建XHR对象或使用fetch API： 在浏览器中，可以通过XMLHttpRequest对象（XHR）或fetch API来发送HTTP请求。XHR对象是一个用于在后台与服务器进行交互的API，fetch API是一种现代的替代方案，提供了更简洁和强大的API。

  3. 配置请求参数： 对于XHR对象，可以使用open()方法配置请求的URL、请求方法等参数，使用setRequestHeader()方法设置请求头，使用send()方法发送请求体数据。 对于fetch API，可以直接调用fetch()方法，并传入请求的URL和配置对象，包括method、headers、body等参数。

  4. 发送请求： 调用XHR对象的send()方法或fetch()方法发送请求。

  5. 等待响应： 在发送请求后，浏览器将会等待服务器的响应。这个过程是异步的，即浏览器可以继续执行后续的代码，而不必等待服务器响应返回。

  6. 处理响应： 一旦服务器返回响应，浏览器将触发一个事件（如XHR对象的readystatechange事件），开发者可以通过事件监听器来处理响应。 对于XHR对象，可以通过onreadystatechange事件来监听状态变化，并在状态为4（完成）时处理响应。 对于fetch API，可以使用then()方法或async/await语法来处理响应。

  7. 解析响应数据： 在处理响应时，通常需要将响应数据解析为合适的格式（如JSON、文本、Blob等），然后在前端页面上进行展示或者进一步处理。

  8. 处理错误： 如果请求过程中发生错误（如网络错误、服务器错误等），浏览器将会触发相应的错误事件（如XHR对象的error事件），开发者可以通过事件监听器来处理错误，并给用户提供相应的提示或者处理方案。

通过以上步骤，前端可以发送异步请求到后端，并处理服务器返回的响应数据，从而实现前后端之间的数据交互和通信。

作者：Yanshsf
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

阿里 淘天 前端一面（凉经）

先是自我介绍，然后问项目和问实习内容，之后深入地问相关的知识
之后就是问基础知识
1、给你一个URL能够发现什么信息，对URL进行了很细致深入的询问，记不得了
当给出一个URL时，可以通过对URL进行分析和检查，获取以下信息：

  1. 主机名（Host）： 通过URL可以获取主机名，即指定服务器的域名或IP地址。

  2. 协议（Protocol）： 可以从URL中获取协议类型，如HTTP、HTTPS、FTP等。

  3. 路径（Path）： URL中的路径部分指定了资源在服务器上的位置。

  4. 查询参数（Query Parameters）： 如果URL包含查询参数，可以解析这些参数，获取到客户端向服务器传递的数据。

  5. 锚点（Hash）： 如果URL包含锚点，可以获取到锚点信息，通常用于页面内跳转。

  6. 端口号（Port）： 如果URL中包含端口号，可以获取到指定的端口号信息，用于确定服务器的端口。

  7. 协议头（Scheme）： 协议头部分包含了协议类型和双斜杠（//），用于指示浏览器应该使用什么协议来访问资源。

  8. 网站路径（Pathname）： URL中的网站路径部分指定了资源在服务器上的相对路径。

  9. 来源（Referrer）： 如果请求是从其他页面跳转而来，可以通过Referer头部获取来源页面的URL。

  10. URL编码（URL Encoding）： URL中的一些特殊字符可能会被编码，可以通过解码获取原始字符。

  11. 跳转信息（Redirect）： 如果URL是一个重定向URL，可以获取重定向目标的URL信息。

  12. 资源类型（Resource Type）： 可以根据URL的后缀来推测资源类型，如.html表示HTML页面，.css表示样式表，.jpg表示图片等。

通过对URL的分析和检查，可以获取到丰富的信息，有助于理解和了解页面的结构、内容和功能。

2、bom相关的，记不得了，然后问到了hash
3、对hash进行深入的问，之后问和history区别
当对URL中的哈希部分进行深入探讨时，通常涉及以下方面：

  1. 前端路由： 在单页面应用程序（SPA）中，通常使用哈希路由来实现前端路由。哈希路由将路由信息存储在URL的哈希部分中（例如#/path/to/route），并通过监听hashchange事件来实现路由的变化和页面的切换，而不会导致整个页面的重新加载。

  2. 跳转锚点： 在网页中，哈希部分可以用于定位到页面的特定位置，例如#section1。当浏览器访问带有哈希的URL时，浏览器会自动滚动到指定的锚点位置。

  3. 前端状态管理： 哈希部分也可以用于前端状态管理，例如在URL中存储用户的选择或操作记录，而不需要向服务器发送请求。这些状态信息可以通过解析哈希部分来获取，并在页面加载时重新应用。

  4. 前端历史记录（history）： 前端历史记录API（history对象）提供了一种在不刷新页面的情况下管理浏览器历史记录的方法。与哈希不同，历史记录API允许通过pushState和replaceState方法修改浏览器的URL，而不会导致页面的刷新。这种方式可以创建更加友好的URL，并支持更自然的导航体验。

  5. 与服务器通信： 哈希部分的变化不会触发浏览器向服务器发送请求，因此哈希路由不会影响服务器端路由。相比之下，通过前端历史记录API修改URL可以触发浏览器向服务器发送请求，从而实现客户端和服务器端的通信。

总的来说，哈希部分可以用于前端路由、跳转锚点、前端状态管理等场景，而前端历史记录API提供了更加灵活和强大的浏览器历史记录管理功能，可以与服务器端路由更好地集成，并实现更加自然和流畅的用户体验。

4、css画三角形以及原理，空心三角形怎么画
可以使用CSS的border属性来创建三角形，原理是利用元素的边框来绘制三角形的边。以下是创建三角形的基本原理和代码示例：

实心三角形

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent; /* 左边框 */
  border-right: 50px solid transparent; /* 右边框 */
  border-bottom: 100px solid red; /* 底部边框 */
}

在上面的示例中，.triangle元素的宽度和高度都设为0，然后通过设置border属性来绘制三角形的边框。通过调整border-width、border-color和border-style可以控制三角形的大小、颜色和形状。

空心三角形

.triangle-hollow {
  width: 0;
  height: 0;
  border-left: 50px solid transparent; /* 左边框 */
  border-right: 50px solid transparent; /* 右边框 */
  border-bottom: 100px solid transparent; /* 底部边框 */
  border-top: 0; /* 顶部边框 */
  border-bottom-color: red; /* 底部边框颜色 */
}

在空心三角形的示例中，通过设置border-bottom-color属性来指定三角形的底部边框颜色，并将border-top属性设为0，使得顶部边框不可见，从而形成空心的效果。

以上代码中，可以根据具体需求调整三角形的大小、颜色、位置等属性，从而实现不同样式的三角形。

5、es6和es5区别，数据类型，null和undefined双等，三等之类的，Boolean原理
在JavaScript中，null和undefined都代表着“空”的概念，但它们有着不同的语义和行为。

双等号（==）比较运算符在比较null和undefined时会返回true，这是因为在类型转换的过程中，它们被视为相等的值。这是JavaScript中的一个特殊规则。

示例：

console.log(null == undefined); // true
console.log(null == null);       // true
console.log(undefined == undefined); // true
console.log(null == 0); // false
console.log(undefined == 0); // false
console.log(null == false); // false
console.log(undefined == false); // false

请注意，尽管双等号比较运算符会将null和undefined视为相等，但在使用严格相等运算符（===）时，它们不会被视为相等。

示例：

console.log(null === undefined); // false
console.log(null === null);       // true
console.log(undefined === undefined); // true

因此，建议在比较null和undefined时使用严格相等运算符（===）以避免潜在的混淆和错误。

在JavaScript中，Boolean是一种数据类型，表示逻辑上的真（true）和假（false）。Boolean类型的原理如下：

  1. 值：

    • Boolean类型有两个可能的值：true和false。true表示逻辑上的真，false表示逻辑上的假。

  2. 布尔运算：

    • 在逻辑运算中，Boolean类型常用于条件判断和逻辑运算。比如，if语句中的条件表达式就需要返回一个布尔值，根据条件表达式的结果来决定执行哪个分支的代码。
    • 布尔运算符包括逻辑与（&&）、逻辑或（||）、逻辑非（!）等，用于对布尔值进行组合和取反。

  3. 转换：

    • JavaScript中的许多内置函数和运算符会将其他数据类型转换为Boolean类型。这种转换通常称为“强制转换”或“隐式转换”。
    • 在条件判断中，JavaScript会将其他数据类型自动转换为布尔值。通常，以下值被转换为false：false、0、空字符串（''）、null、undefined、NaN以及其他任何类型的空值。
    • 除了上述值以外，其他所有值都被转换为true。

  4. 构造函数：

    • Boolean也是一个构造函数，在调用时可以将其他数据类型转换为对应的布尔值。比如，使用Boolean(value)可以将任何值转换为布尔值，返回true或false。

在JavaScript中，Boolean类型的原理非常简单，它用于表示逻辑上的真和假，并且在条件判断和逻辑运算中发挥着重要的作用。

ES6（ECMAScript 2015）和ES5（ECMAScript 5）是JavaScript的两个不同版本，它们之间有一些重要的区别：

  1. 语法特性：

    • ES6引入了许多新的语法特性，如箭头函数、模板字符串、解构赋值、let和const关键字、类、默认参数值、扩展运算符等，使得代码更加简洁、易读。
    • ES5相对于ES6来说，语法更加古老，缺少一些现代JavaScript语言的特性。

  2. 模块化：

    • ES6引入了模块化的概念，通过import和export关键字实现模块的导入和导出，使得JavaScript的代码组织更加模块化、可维护性更高。
    • 在ES5中，通常使用全局变量和立即执行函数模式来实现模块化，但这种方式比较笨重和不直观。

  3. 变量声明：

    • ES6引入了let和const关键字，用于声明块级作用域的变量和常量，解决了变量提升和作用域链等问题。
    • ES5中只有var关键字，声明的变量是函数作用域或全局作用域的。

  4. 面向对象编程：

    • ES6引入了类的概念，通过class关键字定义类，使得JavaScript的面向对象编程更加清晰和易用。
    • 在ES5中，通常使用原型链来实现面向对象编程，语法相对复杂。

  5. Promise和异步编程：

    • ES6引入了Promise对象，用于处理异步操作，解决了回调地狱等问题，使得异步编程更加简单和优雅。
    • 在ES5中，通常使用回调函数来处理异步操作，代码结构不够清晰，容易导致回调地狱。

总的来说，ES6相对于ES5来说，具有更多的语法特性、更好的模块化支持、更方便的变量声明、更清晰的面向对象编程和更优雅的异步编程方式，是JavaScript语言的一次重大升级。

之后出题，然后判断
写一个#和rgb转换函数
下面是一个简单的JavaScript函数，用于将十六进制颜色表示法（如#RRGGBB）转换为RGB颜色表示法（如rgb(255, 0, 0)）和将RGB颜色表示法转换为十六进制颜色表示法的函数。

// 将十六进制颜色表示法转换为RGB颜色表示法
function hexToRgb(hex) {
    // 移除可能存在的'#'符号
    hex = hex.replace('#', '');

    // 分别提取红、绿、蓝分量的十六进制值
    var r = parseInt(hex.substring(0, 2), 16);
    var g = parseInt(hex.substring(2, 4), 16);
    var b = parseInt(hex.substring(4, 6), 16);

    // 返回RGB颜色表示法
    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

// 将RGB颜色表示法转换为十六进制颜色表示法
function rgbToHex(r, g, b) {
    // 将十进制颜色分量转换为十六进制，并保证输出为两位数
    function componentToHex(c) {
        var hex = c.toString(16);
        return hex.length == 1 ? '0' + hex : hex;
    }

    // 返回十六进制颜色表示法
    return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

// 示例
var hexColor = '#ff0000';
var rgbColor = hexToRgb(hexColor);
console.log(rgbColor); // 输出：rgb(255, 0, 0)

var r = 255, g = 0, b = 0;
var hexColor = rgbToHex(r, g, b);
console.log(hexColor); // 输出：#ff0000

这个函数对于转换常见的RGB和十六进制颜色表示法非常实用。

后面由于我太菜了，面试官提前离开了🚬

作者：J1ang12
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

avatar
文章
阅读
粉丝