青葡萄科技前端实习笔试

考得很杂，有点难受,错了几个简单题，应该寄了

选择题：
1.网络双方需要明文查看等等数据，在网络传输时为保证安全需要进行加密，那么下面哪些算法适合用于加密这种数据？

对于需要在网络传输时进行加密以保证安全的数据，可以使用以下一些常见的加密算法：

对称加密算法：
- 对称加密算法使用相同的密钥进行加密和解密，速度较快，适合加密大量数据。
- 常见的对称加密算法有AES（高级加密标准）、DES（数据加密标准）和3DES等。
非对称加密算法：
- 非对称加密算法使用一对密钥（公钥和私钥）进行加密和解密，安全性更高，适合在网络传输中交换密钥。
- 常见的非对称加密算法有RSA、DSA和ECC等。
哈希函数：
- 哈希函数是一种将任意长度的数据映射为固定长度哈希值的算法，不可逆，主要用于数据完整性验证和数字签名等。
- 常见的哈希函数有MD5、SHA-1、SHA-256等。
数字签名算法：
- 数字签名算法是一种利用非对称加密和哈希函数实现的技术，用于验证数据的来源和完整性。
- 常见的数字签名算法有RSA、DSA和ECDSA等。
HTTPS协议：
- HTTPS是在HTTP基础上加入SSL/TLS协议进行加密通信的安全HTTP协议，可以保证数据在传输过程中的安全性和完整性。

根据具体的需求和场景，可以选择合适的加密算法来保护数据的安全。通常情况下，对称加密算法适合加密大量数据，而非对称加密算法和数字签名算法适合保护密钥和验证数据的来源和完整性。

2.IE内核有哪些？
Internet Explorer（IE）是微软公司开发的一款浏览器，其内核经历了多个版本的演变。以下是主要的IE内核版本：

Trident（三叉戟）：
- Trident是IE浏览器的最初内核，自IE1到IE11版本都使用了Trident内核。
- Trident内核在渲染网页时存在一些兼容性问题，导致许多网站需要为IE单独进行优化。
EdgeHTML：
- EdgeHTML是微软为Edge浏览器（原名Microsoft Edge）开发的新内核，取代了旧版的Trident内核。
- EdgeHTML内核基于Trident，但对其进行了重写和改进，提供了更好的性能和更好的Web标准支持。
- Edge浏览器在Windows 10中作为默认浏览器，使用EdgeHTML内核。
Blink：
- 从Edge浏览器的更新版本开始，微软宣布放弃EdgeHTML内核，改用Chromium项目中的Blink内核。
- Blink是由Google开发的一款高性能渲染引擎，是Chromium项目的核心组件之一。
- Edge浏览器使用Blink内核后，与其他基于Chromium的浏览器（如Google Chrome、Opera等）具有更好的兼容性和性能。

综上所述，主要的IE内核包括Trident和EdgeHTML，而Edge浏览器后续版本使用了Chromium项目的Blink内核。

3.看代码选出运行结果（感觉考的是作用域）

4.HTML5新标签

HTML5引入了许多新的语义化标签，用于更清晰地描述页面内容和结构，提高页面的可读性和可访问性。以下是一些HTML5新增的主要标签：

<header>：定义页面或区块的页眉，通常包含导航链接、logo等内容。
<footer>：定义页面或区块的页脚，通常包含版权信息、联系方式等内容。
<nav>：定义导航链接的容器，用于组织网站的主要导航菜单。
<article>：定义独立的内容区块，如新闻文章、博客文章等。
<section>：定义页面的一个区域或部分，通常用于组织相关的内容。
<aside>：定义页面的侧边栏内容，通常包含与主要内容相关的补充信息。
<main>：定义页面的主要内容区域，通常包含页面的核心内容。
<figure>：用于包含一组相关的多媒体内容，如图片、图表、视频等，通常与<figcaption>配合使用。
<figcaption>：定义<figure>元素的标题，描述相关的多媒体内容。
<details>：定义一个可展开的内容部分，通常包含一些细节信息，初始状态是折叠的，通过点击可以展开查看。
<summary>：定义<details>元素的摘要或标题，点击摘要可以展开或关闭相关的内容。

这些新标签使得开发者能够更加语义化地描述页面内容和结构，同时提高了页面的可读性、可访问性和SEO优化效果。

5.选出结果为真的表达式（null == undefined, null === undefined, null instanceof Object）
在JavaScript中，有以下几点需要注意：

null == undefined 会返回 true，因为它们都代表着空值。
null === undefined 会返回 false，因为严格相等运算符 === 不会进行类型转换，而 null 和 undefined 是不同类型的值。
null instanceof Object 会返回 false，因为 null 不是任何对象的实例，它代表空值，而不是对象。

因此，选出结果为真的表达式是：null == undefined。

6.数学逻辑题（跟个奥数题一样.....）
7.执行结果（parseInt(3,10); parseInt(3,2); parseInt(3,0);）写错了这题啊啊啊啊让我们逐一解释这三个 parseInt 的调用：

parseInt(3,10)：这个函数调用将字符串 '3' 解析为一个整数。第二个参数 10 表示使用十进制解析。因此，结果是数字 3。
parseInt(3,2)：这个函数调用将字符串 '3' 解析为一个整数。第二个参数 2 表示使用二进制解析。但是 '3' 不是一个有效的二进制数，因为二进制数只包含 0 和 1。因此，解析会停在第一个非法字符 '3'，并返回结果 3。
parseInt(3,0)：这个函数调用将字符串 '3' 解析为一个整数。第二个参数 0 表示根据输入字符串的格式自动选择解析的基数。由于 '3' 没有前缀，因此会被解析为十进制数。因此，结果是数字 3。

综上所述，这三个 parseInt 调用的执行结果分别是 3，3，3。

8.浏览器打开网页的过程中会使用到的网络协议

在浏览器打开网页的过程中，可能会涉及多种网络协议，主要包括以下几种：

HTTP（HyperText Transfer Protocol）：
- 用于在客户端和服务器之间传输超文本（例如HTML、CSS、JavaScript等）的应用层协议。
- 它是浏览器与Web服务器之间通信的基础协议，用于获取网页内容、发送表单数据等。
HTTPS（HTTP Secure）：
- 基于HTTP的安全传输协议，通过SSL/TLS加密通信内容，提供更安全的数据传输方式。
- 在浏览器打开网页时，如果网站支持HTTPS，浏览器会使用HTTPS协议与服务器进行通信。
TCP（Transmission Control Protocol）：
- 传输控制协议，位于网络协议栈的传输层，提供可靠的、面向连接的数据传输服务。
- 在浏览器与Web服务器之间建立TCP连接，用于传输HTTP或HTTPS协议的数据。
IP（Internet Protocol）：
- 互联网协议，位于网络协议栈的网络层，负责将数据包从源主机发送到目标主机。
- 在浏览器与Web服务器之间进行数据传输时，需要经过IP协议进行数据包的路由和转发。
DNS（Domain Name System）：
- 域名系统，用于将域名（如www.example.com）解析为对应的IP地址。
- 在浏览器打开网页时，需要通过DNS协议查询域名对应的IP地址，然后才能建立与Web服务器的连接。

以上是浏览器打开网页过程中可能涉及的一些网络协议，它们共同构成了浏览器与Web服务器之间的通信链路，保障了网页内容的传输和展示。

9.看代码选出运行结果
10.看代码选出运行结果

填空题：
1.‘6’+2的结果 ‘6’-2的结果
在 JavaScript 中，使用加号运算符（+）时，如果其中一个操作数是字符串，则会将另一个操作数转换为字符串，然后进行字符串拼接。而减号运算符（-）只用于数字运算。下面是这两个表达式的结果：

'6' + 2 的结果是 '62'。因为 '6' 是字符串，所以数字 2 会被转换为字符串，然后进行字符串拼接，得到 '62'。
'6' - 2 的结果是 4。因为 '6' 是字符串，但是减号运算符（-）只用于数字运算，所以字符串 '6' 会被转换为数字 6，然后进行数字运算，得到结果 4。

2.看代码写出运行结果

var User = {  
        count:5,  
        getCount:function(){  
              return this.count  
        }  
    }  
    console.log(User.getCount())  
    var func = User.getCount  
    console.log(func())  
    运行结果如下：

5
undefined

解释如下：

console.log(User.getCount())：首先调用了 User 对象的 getCount() 方法，该方法返回 User 对象的 count 属性的值，即 5，然后将其输出到控制台，因此输出结果为 5。
var func = User.getCount：这一行将 User.getCount 方法赋值给变量 func。
console.log(func())：因为 func 只是将 User.getCount 方法的引用赋给了变量，所以此时调用 func() 实际上是在全局作用域中调用函数，而不是在 User 对象上下文中。因此，在全局作用域中，this 不再指向 User 对象，而是指向全局对象（在浏览器中为 window 对象），由于全局对象上并没有 count 属性，所以返回 undefined。

3.按要求写一个正则表达式
4.对于快速排序来说，其最好情况下的时间复杂度是（），最坏情况是（）
快速排序的时间复杂度取决于划分的平衡性。在最好的情况下，每次划分都能将数组分成两个长度相近的子数组，这时快速排序的时间复杂度为O(n log n)。而在最坏的情况下，每次划分都只能将数组分成一个很小的子数组和一个很大的子数组，这时快速排序的时间复杂度为O(n^2)。

因此，快速排序的最好情况时间复杂度为O(n log n)，最坏情况时间复杂度为O(n^2)。

问答题：
1.一次完整的HTTP事务是怎样的一个过程
一个完整的HTTP事务是指客户端发送HTTP请求并接收到服务器响应的整个过程。下面是一个简化的HTTP事务的过程：

建立连接：
- 客户端（如浏览器）向服务器发起TCP连接请求。如果是HTTP/1.1，可能会使用持久连接（Keep-Alive）。
- 服务器接受连接请求，并建立TCP连接。
发送请求：
- 客户端构造HTTP请求消息，包括请求行（Request Line）、请求头部（Headers）和请求体（Body）。
- 请求行包括请求方法（GET、POST等）、请求URI和协议版本。
- 请求头部包括一些附加信息，如Host、User-Agent、Content-Type等。
- 如果是POST请求，还会包含请求体，其中可能包含表单数据或者文件等信息。
- 客户端通过建立的TCP连接将请求消息发送给服务器。
处理请求：
- 服务器接收到请求消息后，根据请求行中的URI等信息确定处理的资源。
- 服务器根据请求头部中的信息进行相关处理，如验证权限、解析Cookie等。
- 服务器处理完请求后，根据请求方法执行相应的操作，可能是获取资源、修改资源状态或者其他操作。
发送响应：
- 服务器构造HTTP响应消息，包括响应行（Status Line）、响应头部和响应体。
- 响应行包括协议版本、状态码和状态消息。
- 响应头部包括一些附加信息，如Server、Content-Type、Content-Length等。
- 响应体包含服务器返回的数据，如HTML、JSON等。
- 服务器通过TCP连接将响应消息发送给客户端。
接收响应：
- 客户端接收到服务器发送的响应消息。
- 客户端解析响应消息，根据状态码判断请求是否成功，并获取响应头部和响应体中的信息。
关闭连接：
- 客户端和服务器根据需要决定是否关闭TCP连接。
- 在HTTP/1.1中，可能会使用持久连接（Keep-Alive）来保持连接复用，提高性能。
处理数据：
- 客户端根据接收到的响应数据进行相应的处理，可能是渲染页面、执行脚本或者其他操作。

以上是一个简化的HTTP事务的过程，实际中可能还包括一些额外的步骤和复杂的情况。

2.IE与火狐的事件机制有什么区别？如何阻止冒泡？

IE和火狐（以及其他现代浏览器）的事件机制在一些方面有所不同，但在很多方面又是相似的。主要的区别和阻止冒泡的方法如下：

事件模型：
- IE8及之前版本使用的是传统的事件模型，也称为IE事件模型或冒泡事件模型。事件从目标元素开始向上冒泡，直到达到根元素或者某个处理程序调用了stopPropagation()方法。
- 火狐（以及其他现代浏览器）使用的是DOM2级事件模型或者称为标准事件模型。它也是冒泡事件模型，但是支持更多的事件类型，并且更加规范和强大。
阻止冒泡：
- 在IE中，可以使用事件对象的 cancelBubble 属性来阻止事件的冒泡。将其设置为 true 即可阻止事件继续冒泡。
- 在火狐（以及其他现代浏览器）中，可以调用事件对象的 stopPropagation() 方法来阻止事件的冒泡。这是一个更规范和推荐的做法。

示例代码：

// IE中阻止事件冒泡
function stopPropagationIE(event) {
    event.cancelBubble = true;
}

// 火狐及其他现代浏览器中阻止事件冒泡
function stopPropagationStandard(event) {
    event.stopPropagation();
}

综上所述，虽然IE和火狐（以及其他现代浏览器）的事件机制有些许不同，但是可以通过相应的属性或方法来实现阻止冒泡。

3.用纯CSS画一个三角形
你可以使用 CSS 的 border 属性来创建一个三角形。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Triangle with Pure CSS</title>
<style>
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent; /* 左边框 */
  border-right: 50px solid transparent; /* 右边框 */
  border-bottom: 100px solid blue; /* 底部边框 */
}
</style>
</head>
<body>

<div class="triangle"></div>

</body>
</html>

在这个示例中，我们创建了一个 div 元素，并给它添加了一个名为 triangle 的类。然后，通过设置 div 元素的 border 属性，我们创建了一个底边长为 100px，高为 100px 的蓝色三角形。具体地，我们将左右两侧的边框设置为透明，底部边框设置为蓝色，然后调整边框的宽度和高度，使其形成一个三角形。

4.X86平台中，两个指针p1和p2值相同，为什么p1和p2的值不同
在X86平台中，如果两个指针p1和p2指向相同的地址，但是p1和p2的值不同，这可能是由于以下几种情况导致的：

数据类型不同：如果p1和p2的类型不同，即使它们指向相同的地址，它们所解引用的值也可能不同。例如，一个指针指向一个整数类型的数据，而另一个指针指向一个字符类型的数据，那么即使它们指向相同的地址，所得到的值也可能不同。
指针未初始化：如果指针p1和p2未正确初始化，它们可能会指向内存中的随机位置，这可能导致p1和p2的值不同。
指针越界访问：如果指针p1和p2指向的地址超出了其所指向内存块的范围，那么p1和p2的值可能不同。这种情况可能导致内存越界访问，产生未定义的行为。
指针所指向的内存被修改：如果在p1和p2指向的内存地址上进行了修改，那么p1和p2的值可能会不同。例如，一个指针对所指向的内存进行了写入操作，而另一个指针对同一内存进行了读取操作，那么它们得到的值可能不同。

综上所述，当两个指针p1和p2指向相同的地址，但是p1和p2的值不同时，需要检查数据类型是否相同，指针是否正确初始化，是否存在内存越界访问等情况。

编程题：
1.给object数组进行排序（排序条件是每个元素对象的属性个数）
你可以使用数组的 sort() 方法来对包含对象的数组进行排序，排序条件是对象的属性个数。下面是一个示例代码：

// 示例对象数组
const objects = [
  { name: 'Alice', age: 30, gender: 'female' },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 40, gender: 'male', city: 'New York' }
];

// 对象数组按属性个数排序的比较函数
function sortByPropertyCount(obj1, obj2) {
  const count1 = Object.keys(obj1).length;
  const count2 = Object.keys(obj2).length;
  return count1 - count2;
}

// 对对象数组进行排序
objects.sort(sortByPropertyCount);

// 输出排序后的对象数组
console.log(objects);

在这个示例中，我们定义了一个比较函数 sortByPropertyCount，该函数计算了两个对象的属性个数，并返回它们的差值。然后，我们使用 sort() 方法对对象数组进行排序，传入比较函数作为参数。最后，输出排序后的对象数组。排序后，对象数组中的对象将按照其属性个数从少到多的顺序排列。

2.给ul js实现点击每一行的li时alert其index
你可以使用事件委托的方式，将点击事件绑定在 ul 元素上，然后通过事件对象获取点击的 li 元素的索引。下面是实现这一功能的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click LI to Alert Index</title>
</head>
<body>

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

<script>
// 获取ul元素
const ul = document.getElementById('myList');

// 绑定点击事件
ul.addEventListener('click', function(event) {
  // 获取点击的li元素
  const li = event.target;

  // 确保点击的是li元素
  if (li.tagName === 'LI') {
    // 获取li元素的索引，并弹出
    const index = Array.from(ul.children).indexOf(li);
    alert('Clicked index: ' + index);
  }
});
</script>

</body>
</html>

在这个示例中，当点击 ul 元素内的任何 li 元素时，会弹出相应的索引值。通过事件委托，我们只需绑定一个点击事件到 ul 元素上，而不是为每个 li 元素分别绑定事件，从而提高了性能和代码简洁度。

3.写一函数，统计字符串中单词出现频率（单词用空格隔开），返回JSON格式结果下面是一个JavaScript函数，用于统计字符串中单词出现频率，并返回JSON格式的结果：

function countWordFrequency(str) {
    // 将字符串按空格分割成单词数组
    const words = str.split(' ');

    // 创建一个对象用于存储单词出现的频率
    const frequency = {};

    // 遍历单词数组，统计每个单词的出现次数
    words.forEach(word => {
        if (!frequency[word]) {
            frequency[word] = 1; // 第一次出现，设置为1
        } else {
            frequency[word]++; // 已存在，次数加1
        }
    });

    // 构建结果对象
    const result = {};
    Object.keys(frequency).forEach(word => {
        result[word] = frequency[word]; // 将单词及其出现次数存入结果对象
    });

    // 返回JSON格式的结果
    return JSON.stringify(result);
}

// 示例用法
const str = "hello world hello world goodbye world";
const result = countWordFrequency(str);
console.log(result);

这个函数将字符串按空格分割成单词数组，然后遍历单词数组，统计每个单词的出现次数，最后构建JSON格式的结果对象并返回。

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

前端面试题详解整理102|对称加密，ie内核，新标签，网络协议，完整的HTTP事务是怎样的一个过程

青葡萄科技前端实习 笔试

4.HTML5新标签

8.浏览器打开网页的过程中会使用到的网络协议

青葡萄科技前端实习笔试