前端面试题详解整理8|head和body的区别，html文档的结构，数组去重，数据类型，引用类型和值类型的差别 ，js的网络请求，

金色的雨570
108 阅读16分钟

腾讯 WXG 一面G

投的是实习基地，这个基地是只招前端和客户端吧!

纯纯kpi，我项目纯go，云原生方向，wxg C++基础架构，不匹配干嘛要捞我! 稍微问了一下项目，问的很少，也不难，20来分钟

云的项目一点没问。。。。

无八股文，直接开始用白板手撕一个数独有多少种解法，lc37的升级版

只会暴力回溯，超时，寄。还是太菜了（应该使用官方的后两种方法，建议大家学习第一个解题：回溯 + 状态压缩（使用 Bitset）的方法，不要使用代码随想录的方法和我一样，会超时！！！）

（吐槽一下，编程平台纯白板，没有任何波浪线提示，打印输出必须程序成功运行才能看到。。。。） 作者：cheng_Sir
链接：www.nowcoder.com/discuss/595…
来源：牛客网

小鹅通前端实习一面

总时长35分钟，自我介绍开始
1.js和c++特点上的差异；
2.js数组去重
3.js的数据类型

  1. JavaScript 和 C++ 的特点上的差异：

    • 动态类型 vs 静态类型：JavaScript 是一种动态类型语言，变量的类型在运行时确定，而 C++ 是一种静态类型语言，变量的类型在编译时确定。

    • 解释型 vs 编译型：JavaScript 是一种解释型语言，代码在运行时由解释器逐行解释执行，而 C++ 是一种编译型语言，代码在运行之前先需要编译成机器码。

    • 垃圾回收 vs 手动内存管理：JavaScript 具有自动垃圾回收机制，开发者不需要手动管理内存，而 C++ 需要开发者手动管理内存，包括内存的分配和释放。

    • 跨平台性：JavaScript 是一种跨平台语言，可以在各种平台上运行，而 C++ 的可移植性取决于编译器和平台。

    • 面向对象编程：JavaScript 是一种基于原型的面向对象语言，而 C++ 是一种基于类的面向对象语言，支持类和继承等概念。

  2. JavaScript 数组去重：

    JavaScript 中可以使用多种方法对数组进行去重，其中包括使用 Set 数据结构、利用 Array.prototype.filter() 方法、使用 Array.prototype.reduce() 方法等。以下是一些常见的方法：

    • 利用 Set 数据结构：

      const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出 [1, 2, 3, 4, 5]

    • 利用 Array.prototype.filter() 方法：

      const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index, arr) => arr.indexOf(item) === index);
console.log(uniqueArray); // 输出 [1, 2, 3, 4, 5]

    • 利用 Array.prototype.reduce() 方法：

      const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);
console.log(uniqueArray); // 输出 [1, 2, 3, 4, 5]

  3. JavaScript 的数据类型：

    JavaScript 中的数据类型主要分为原始类型和对象类型两种。

    • 原始类型：包括 Undefined、Null、Boolean、Number、String 和 Symbol。

    • 对象类型：包括 Object、Array、Function 和其他自定义对象。

    JavaScript 的数据类型具有动态性，变量可以随时存储不同类型的值。在 JavaScript 中，变量的数据类型由它所存储的值来决定，而不是由变量的声明类型来决定。

4.js的引用类型和值类型的差别
JavaScript 中的数据类型可以分为两种：引用类型和值类型。

  1. 值类型（基本类型）：

    值类型是指存储在变量中的数据直接存储在变量访问的位置上。JavaScript 中的基本数据类型包括：Undefined、Null、Boolean、Number 和 String。这些值类型被称为基本类型，因为它们是不可变的，每次赋值都会创建一个新的副本。

    当我们将一个值类型的变量赋值给另一个变量时，会将原始值复制到新的变量中。这意味着改变其中一个变量的值不会影响另一个变量的值。

    let a = 5;
let b = a; // 将 a 的值复制给 b
a = 10; // 修改 a 的值
console.log(b); // 输出 5，b 的值不受 a 的影响

  2. 引用类型：

    引用类型是指存储在变量中的数据存储的是一个指向实际对象的引用，而不是对象本身。JavaScript 中的引用类型包括 Object、Array、Function 等。

    当我们将一个引用类型的变量赋值给另一个变量时，实际上是将指向相同对象的引用复制到了新的变量中。这意味着两个变量都指向相同的内存地址，修改其中一个变量的值会影响到另一个变量。

    let arr1 = [1, 2, 3];
let arr2 = arr1; // 将 arr1 的引用复制给 arr2
arr1.push(4); // 修改 arr1
console.log(arr2); // 输出 [1, 2, 3, 4]，arr2 也受到了影响

    这种行为是因为在引用类型中，变量存储的是对象的引用，而不是对象本身。因此，当我们修改其中一个变量指向的对象时，其他指向同一对象的变量也会受到影响。

总结来说，值类型的变量存储的是数据本身，而引用类型的变量存储的是数据的引用（内存地址）。这就是值类型和引用类型的主要差别。

5.讲一下js的网络请求
在 JavaScript 中进行网络请求通常涉及使用XMLHttpRequest对象或使用Fetch API。这些技术允许客户端与服务器进行通信，从而实现数据的传输和交互。以下是关于这两种方法的简要说明：

  1. XMLHttpRequest（XHR）：

    XMLHttpRequest 是一个在 JavaScript 和浏览器中使用的 API，用于在后台与服务器交换数据。它可以用于获取文本、XML、JSON 等各种数据，并且可以异步或同步进行请求。

    示例使用 XMLHttpRequest 发起 GET 请求：

    const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true); // 异步请求
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText); // 处理返回的数据
  }
};
xhr.send();

    这里通过创建 XMLHttpRequest 对象，调用 open() 方法设置请求的方法和URL，然后使用 send() 方法发送请求。通过检查 readyState 和 status 属性，可以在请求完成后处理返回的数据。

  2. Fetch API：

    Fetch API 是一个现代的、基于 Promise 的 JavaScript API，用于进行网络请求。它提供了更简洁和灵活的方式来处理网络请求，同时支持 Promise，可以更好地处理异步操作。

    示例使用 Fetch API 发起 GET 请求：

    fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data); // 处理返回的 JSON 数据
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

    在这个示例中，我们使用 fetch() 函数发送请求，并使用 Promise 来处理返回的响应。我们首先检查响应的 ok 属性，确保响应成功，然后使用 json() 方法将响应体解析为 JSON 数据。

Fetch API 与 XMLHttpRequest 相比，提供了更简洁、易于使用的接口，并且内置了 Promise 支持，使得异步操作更容易处理。因此，在现代的 JavaScript 开发中，更推荐使用 Fetch API 进行网络请求。

6.对前端三件套和框架的理解
7.一个html文档的结构是怎样的
一个典型的 HTML 文档通常由以下几个部分组成：

  1. 文档类型声明（Document Type Declaration）：

    <!DOCTYPE html>

    文档类型声明用于指定 HTML 文档的版本和类型。

  2. HTML 根元素（Root Element）：

    <html lang="en">

    HTML 根元素定义了整个 HTML 文档的起始和结束，其中 lang 属性用于指定文档的语言。

  3. 文档头部（Head）：

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 其他头部元素，如样式表链接、脚本引用、元数据等 -->
</head>

    文档头部包含了一些元数据和配置信息，比如字符编码、视口设置、文档标题等。

  4. 文档主体（Body）：

    <body>
    <!-- 页面内容 -->
</body>

    文档主体包含了页面的实际内容，包括文本、图像、链接、表单等。

  5. HTML 注释（Comments）：

    <!-- 这是一个 HTML 注释 -->

    HTML 注释用于在文档中添加注释，不会在页面上显示。

一个典型的 HTML 文档结构示例如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My HTML Document</title>
    <!-- 可选的样式表链接、脚本引用等 -->
</head>
<body>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
    <!-- 可添加更多的页面内容 -->
</body>
</html>

以上是一个简单的 HTML 文档结构，可以根据需要添加更多的元素和内容来构建更复杂的页面。

8.head和body的区别
<head> 和 <body> 是 HTML 文档中两个重要的部分，它们各自承担着不同的作用：

  1. <head> 标签：

    <head> 标签用于包含文档的头部信息，其中包括了一些元数据和配置信息，但不会在页面中直接显示给用户。常见的头部信息包括：

    • <title>：定义文档的标题，在浏览器标签页上显示。
    • <meta>：定义文档的元数据，如字符编码、视口设置、关键词等。
    • <link>：用于引入外部样式表。
    • <script>：用于引入外部脚本文件。
    • <style>：用于定义内部样式表。

    除此之外，<head> 中还可以包含其他的元数据和配置信息，如 <base>、<noscript>、<base> 等，用于设置文档的基本信息和行为。

  2. <body> 标签：

    <body> 标签用于包含文档的主体内容，其中包括了实际上显示给用户的页面内容。通常包括文本、图像、链接、表单等用户可见的元素和交互部分。在 <body> 中可以包含各种 HTML 元素来构建页面的结构和布局。

    与 <head> 不同，<body> 中的内容会直接显示在浏览器窗口中，用户可以看到和与之交互。因此，<body> 中的内容是构成页面主要内容的部分，包括了网页的实际内容和交互元素。

总结来说，<head> 主要包含了文档的元数据和配置信息，而 <body> 则包含了页面的实际内容和用户可见的交互部分。

9.一个页面的加载顺序（html、css、js）
一个页面的加载顺序通常遵循以下顺序：

  1. HTML 结构：

    首先，浏览器会加载和解析 HTML 结构，构建文档的 DOM 树。浏览器会按照 HTML 文件的顺序逐行解析文档，并将解析后的元素以树状结构组织起来，形成 DOM 树。

  2. 外部 CSS 文件：

    当浏览器解析到 <link> 标签或 <style> 标签时，会开始加载外部 CSS 文件或解析内部样式表。CSS 文件的加载是异步的，不会阻塞 HTML 文档的解析和渲染，但会阻塞后续 CSS 样式的渲染。因此，一般情况下，浏览器会优先加载 CSS 文件，但在加载和渲染 CSS 文件的过程中会继续解析 HTML。

  3. JavaScript 文件：

    当浏览器解析到 <script> 标签时，会开始加载和执行 JavaScript 文件。JavaScript 文件的加载和执行是阻塞的，即浏览器会停止 HTML 的解析和 CSS 的渲染，直到 JavaScript 文件加载和执行完成。

    • 如果 JavaScript 文件位于 <head> 标签中，那么浏览器会先加载并执行 JavaScript 文件，然后再继续解析 HTML 和加载 CSS。

    • 如果 JavaScript 文件位于 <body> 标签底部或使用了异步加载（如 defer、async），那么浏览器会继续解析 HTML 和加载 CSS，同时并行加载 JavaScript 文件。异步加载的 JavaScript 文件在加载完成后会立即执行，但不会阻塞其他资源的加载和渲染。

总的来说，页面的加载顺序是先加载 HTML 结构，然后加载外部 CSS 文件，最后加载 JavaScript 文件。这个过程是逐步进行的，并不是一次性完成的。

10.头部导航栏+内容+footer如何实现
要实现一个头部导航栏、内容区和页脚，你可以使用 HTML 和 CSS 进行布局和样式设计。以下是一个基本的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header, Content, Footer Layout</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        /* 导航栏样式 */
        header {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
        nav {
            display: flex;
            justify-content: center;
        }
        nav a {
            color: #fff;
            text-decoration: none;
            padding: 0 15px;
        }
        /* 内容区样式 */
        main {
            padding: 20px;
        }
        /* 页脚样式 */
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>Header</h1>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <main>
        <h2>Content</h2>
        <p>This is the main content area.</p>
    </main>
    <footer>
        <p>Footer</p>
    </footer>
</body>
</html>

这个示例中，我们使用了 HTML5 的 <header>、<nav>、<main> 和 <footer> 元素来分别表示头部、导航栏、内容区和页脚。然后通过 CSS 样式来对各个部分进行样式设计，如背景色、颜色、字体等。

你可以根据需要修改样式和内容来满足你的实际需求，比如调整颜色、字体、布局等。

11.吸顶导航栏如何实现
要实现一个吸顶导航栏，即当用户向下滚动页面时，导航栏固定在页面顶部，可以通过 CSS 和 JavaScript 实现。以下是一个基本的示例：

HTML 结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Navigation Bar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header id="header">
        <h1>Sticky Navigation Bar</h1>
    </header>
    <div id="content">
        <!-- 页面内容 -->
    </div>
    <footer>
        <p>Footer</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

CSS 样式（styles.css）：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

#content {
    margin-top: 80px; /* 确保内容不被导航栏遮挡 */
    padding: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}

JavaScript 代码（script.js）：

window.onscroll = function() {stickyNavbar()};

var header = document.getElementById("header");
var content = document.getElementById("content");
var sticky = header.offsetTop;

function stickyNavbar() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
    content.style.marginTop = header.offsetHeight + "px";
  } else {
    header.classList.remove("sticky");
    content.style.marginTop = 0;
  }
}

在这个示例中，我们首先使用 CSS 来设置导航栏的样式，通过设置 position: fixed; 来使导航栏固定在页面顶部。然后在 JavaScript 中监听 window.onscroll 事件，当用户向下滚动页面时，检查页面滚动位置，如果滚动位置超过了导航栏的位置，则将导航栏设置为固定位置，并调整内容的上边距以避免内容被导航栏遮挡。反之，如果滚动位置小于导航栏的位置，则将导航栏恢复到初始状态。

12.对flex布局的了解
13.用flex实现两列三行
Flex 布局是一种弹性盒子布局模型，用于在容器中对子元素进行灵活的布局排列。Flex 布局通过定义容器和子元素的属性来实现灵活的布局效果，其中主要包括以下几个关键属性：

  1. 容器属性（Flex Container Properties）：

    • display：指定容器为 Flex 布局，常用值为 flex。
    • flex-direction：指定主轴的方向，包括 row（水平方向）、column（垂直方向）、row-reverse（反向水平方向）和 column-reverse（反向垂直方向）。
    • justify-content：指定主轴上子元素的对齐方式，包括 flex-start（起始对齐）、flex-end（结束对齐）、center（居中对齐）、space-between（两端对齐）、space-around（子元素周围等距对齐）和 space-evenly（子元素均匀分布）。
    • align-items：指定交叉轴上子元素的对齐方式，包括 stretch（拉伸对齐）、flex-start（起始对齐）、flex-end（结束对齐）、center（居中对齐）和 baseline（基线对齐）。
    • flex-wrap：指定子元素是否换行，包括 nowrap（不换行）、wrap（换行）、wrap-reverse（反向换行）。

  2. 子元素属性（Flex Item Properties）：

    • flex：指定子元素的伸缩比例，包括 flex-grow（放大比例）、flex-shrink（缩小比例）和 flex-basis（初始大小）。
    • order：指定子元素的显示顺序。
    • align-self：覆盖容器的 align-items 属性，指定单个子元素的对齐方式。

下面是一个使用 Flex 布局实现两列三行的示例：

HTML 结构：

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

CSS 样式：

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.item {
    width: calc(50% - 10px); /* 每列宽度为父容器宽度的一半减去间距 */
    margin-bottom: 20px;
    background-color: #ccc;
    padding: 20px;
    box-sizing: border-box;
}

在这个示例中，我们首先将容器设置为 Flex 布局，并设置 flex-wrap: wrap; 让子元素可以自动换行。然后使用 justify-content: space-between; 实现两列布局，并使用 align-items: flex-start; 让子元素顶部对齐。最后，每个子元素设置宽度为父容器宽度的一半减去间距，以实现两列布局。

14.响应式页面实现方法
响应式设计是一种能够适应不同设备尺寸和屏幕分辨率的网页设计方法，以提供更好的用户体验。实现响应式页面可以通过以下几种方法：

  1. 使用媒体查询（Media Queries）：

    媒体查询允许你根据不同的媒体条件（如屏幕尺寸、屏幕方向等）来应用不同的 CSS 样式。通过在 CSS 中嵌入媒体查询，你可以为不同的设备和屏幕尺寸定义不同的布局和样式。

    示例：

    /* 默认样式 */
body {
    font-size: 16px;
}

/* 在小屏幕设备上应用不同样式 */
@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

  2. 弹性网格布局（Flexbox Layout）：

    使用弹性网格布局（Flexbox）可以方便地创建灵活的布局，使得页面能够适应不同尺寸的屏幕。Flexbox 提供了强大的布局能力，可以在不同的屏幕尺寸上调整和重新排列元素。

  3. 网格布局（CSS Grid Layout）：

    CSS 网格布局（CSS Grid）是一种更强大的布局方式，它允许你以网格形式对页面进行布局，轻松地创建复杂的布局结构。通过将页面划分为行和列，可以在不同的屏幕尺寸上实现灵活的布局。

  4. 移动优先设计（Mobile-First Design）：

    移动优先设计是一种设计原则，即首先针对移动设备设计网站，然后再逐步增加适应更大屏幕的布局和功能。这样可以确保网站在移动设备上的可用性和用户体验。

  5. 使用响应式框架（Responsive Frameworks）：

    响应式框架如Bootstrap、Foundation等提供了预定义的网格系统和组件，可以帮助快速搭建响应式网页。通过使用这些框架，你可以快速构建出适应不同屏幕尺寸的网页布局。

以上是几种常用的实现响应式页面的方法，你可以根据项目需求和个人喜好选择合适的方法进行实现。通常结合多种方法可以获得更好的效果。

反问环节

总结：面试体验挺好的，面试官很耐心，反问环节很耐心地解答了我的问题；第一次面试，真的好菜，还得学！

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

avatar
文章
阅读
粉丝