前端面试题01

最新推荐文章于 2024-06-12 11:13:48 发布
最新推荐文章于 2024-06-12 11:13:48 发布
阅读量63 收藏
点赞数 2
分类专栏： 前端面试题 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57837275/article/details/132068734
版权

1、做个自我介绍。

我叫 XX，XX 年毕业于 XX 大学。有 X 年的开发工作经验，精通XXX，熟悉XXX，之前的项目中接触比较多的是 XXX。我对技术有着深厚的兴趣，专业知识面宽，责任心强，沟通能力比较好。平常有时间看看博客，并且自己也喜欢在 CSDN 上写技术类的文章，与博友一起讨论。目前主要是想找一份 XXX 样的工作，希望能找到一个好的发展平台。基本上就是这些，谢谢！

2、CSS有哪些引入方式？

  1. 内联方式（inline）：直接在HTML元素的style属性中写入CSS样式。例如：
 <p style="color: red;">这是一个红色的段落</p>

这种方式适用于只对特定元素应用简单的样式。

  1. 嵌入方式（embedded）：通过在HTML文件的标签中使用
   <head>
       <style>
           p {
               color: red;
           }
       </style>
   </head>
   <body>
       <p>这是一个红色的段落</p>
   </body>

这种方式适用于对整个HTML文件内的元素应用样式。

  1. 外部引入方式（external）：将CSS样式写在单独的外部文件中，然后在HTML文件中使用标签引入。例如：

    <head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>这是一个红色的段落</p>
</body>

其中，href属性指定了外部CSS文件的路径。这种方式适用于多个HTML文件共享相同的样式。

3、H5 的新特性有哪些？

  1. 语义化标签：HTML5引入了一些新的语义化标签，如<header>、<nav>、<section>、<article>、<aside>和<footer>等，使得网页结构更加清晰和可读。
  2. 表单增强：HTML5提供了一些新的表单元素和属性，如<input type="email">、<input type="date">、<input type="range">等，以及一些新的验证属性，如required、pattern等，使得表单处理更加简单和强大。
  3. 音视频支持：HTML5引入了<audio>和<video>标签，使得在网页中嵌入音频和视频内容变得更加简单和直观。
  4. 画布（Canvas）：HTML5新增了<canvas>标签，通过JavaScript API可以在画布上绘制2D和3D图形，实现各种交互和动画效果。
  5. 地理定位：HTML5提供了navigator.geolocation接口，可以通过浏览器获取用户的地理位置信息，用于开发基于位置的应用。
  6. Web存储：HTML5引入了localStorage和sessionStorage，可以在客户端存储大量数据，使得网页应用可以更快地加载和响应。
  7. Web Workers：HTML5引入了Web Workers，允许在后台运行独立于主线程的JavaScript代码，以提高网页的性能和响应能力。
  8. WebSocket：HTML5引入了WebSocket协议，实现了浏览器与服务器之间的全双工通信，可以实时地传输数据，用于开发实时应用或在线游戏。

4、你了解Canvas吗？

Canvas是HTML5新增的一个元素，它是一个通过JavaScript API进行绘图的区域。在Canvas上可以绘制各种2D和3D图形，包括路径、矩形、圆形、文本等。 Canvas具有以下特点：

  1. 绘制：通过JavaScript的绘图API，可以在Canvas上绘制各种形状、线条、路径、文本等。
  2. 动画：结合JavaScript的定时器函数，可以实现在Canvas上创建动画效果，如移动、旋转、缩放等。
  3. 交互：可以通过监听Canvas上的鼠标事件或触摸事件，实现与用户的交互，如点击、拖拽等。
  4. 图像处理：Canvas可以绘制和处理图像，包括加载、裁剪、变换、滤镜等操作。
  5. 3D绘制：在Canvas上使用WebGL技术，可以绘制3D图形，创建更加逼真的立体效果。

使用Canvas可以实现各种图形和动画效果，例如制作游戏、数据可视化、图形编辑器等。Canvas的优势在于能够直接操作像素级别的绘图，提供了更大的灵活性和控制力，但需要通过JavaScript代码来完成绘制和交互。

5、本地存储有哪些，都有什么特点？

本地存储是指在客户端（用户的浏览器）上存储数据的能力，可以用于在用户的设备上保存数据，以便在不同的会话和页面之间进行持久化。常见的本地存储方式有以下几种，并且每种方式都有其特点：

  1. Cookie：Cookie是一种小型文本文件，存储在用户的浏览器中，每次请求时都会被发送到服务器。Cookie的容量较小（通常为4KB），可以设置过期时间。Cookie可以用于在客户端和服务器之间传递数据，但会随每个HTTP请求自动发送到服务器端，对网络流量有一定的影响。
  2. LocalStorage：LocalStorage是HTML5提供的一种持久化存储方案，可以在浏览器中存储大量数据（通常为5MB或更大）。LocalStorage是基于键值对的方式存储数据，数据在浏览器关闭后仍然保留。LocalStorage的读取和写入速度较快，可以通过JavaScript API进行操作。
  3. SessionStorage：SessionStorage与LocalStorage类似，也是HTML5提供的一种浏览器本地存储方案，但数据只在当前会话（同一浏览器标签页或窗口）中有效。当用户关闭标签页或窗口时，SessionStorage中的数据将被清除。SessionStorage适合存储会话相关的临时数据。
  4. IndexedDB：IndexedDB是一种高级的客户端数据库，提供了比LocalStorage更强大的功能。IndexedDB使用对象存储的方式存储数据，可以存储大量结构化数据，并支持复杂的查询和索引。IndexedDB是异步操作的，适合存储大量数据或需要高级查询功能的应用。
  5. WebSQL（已被废弃）：WebSQL是一种基于SQL的客户端数据库，提供了类似于SQL数据库的操作方式。但WebSQL已被W3C废弃，不再是HTML5标准的一部分，因此不推荐在新的项目中使用。

6、块级元素和行内元素有什么区别？

块级元素（Block-level Elements）和行内元素（Inline Elements）是HTML中常见的两种元素类型，它们有以下区别：

  1. 盒模型：块级元素生成一个独立的矩形框，占据一整行或多行的空间，可以设置宽度、高度、内边距和外边距。行内元素则不会独占一行，它的宽度和高度由其内容决定，无法直接设置。
  2. 默认显示方式：块级元素的默认显示方式是块级显示（block），即每个元素独占一行。行内元素的默认显示方式是行内显示（inline），即多个元素在一行上水平排列。
  3. 内容排列：块级元素可以包含其他块级元素和行内元素，块级元素之间会独占一行。行内元素只能包含其他行内元素或文本，它们按照自然的文本流从左到右排列。
  4. 宽度和高度：块级元素可以设置宽度和高度，如果不设置，默认会占满可用空间。行内元素无法直接设置宽度和高度，其宽度和高度由内容决定。
  5. 相互嵌套：块级元素可以包含其他块级元素和行内元素，可以相互嵌套。行内元素只能包含其他行内元素或文本，不能直接嵌套块级元素。
  6. CSS布局：块级元素可以通过CSS属性（如position、display、float等）进行布局和定位。行内元素通常无法直接使用这些属性进行布局，但可以通过设置display属性为inline-block来模拟块级元素的行为。

需要注意的是，HTML5中的一些元素（如div、p、h1-h6等）默认是块级元素，而其他一些元素（如span、a、img等）默认是行内元素。但通过CSS的display属性可以改变元素的显示方式，使其具备块级或行内特性。

7、用什么方式可以改变元素的显示方式？

可以通过CSS的display属性来改变元素的显示方式。display属性有多个可选值，常用的包括：

  1. block：将元素显示为块级元素，独占一行。

  2. inline：将元素显示为行内元素，多个元素在一行上水平排列。

  3. inline-block：将元素显示为行内块级元素，多个元素在一行上水平排列，但可以设置宽度、高度等属性。

  4. none：将元素隐藏，不占据空间。

  5. flex：将元素显示为弹性盒子，可以使用弹性布局属性进行灵活的布局。

  6. grid：将元素显示为网格容器，可以使用网格布局属性进行网格化布局。

    例如：

   .block-element {
       display: block;
   }
   .inline-element {
       display: inline;
   }
   .inline-block-element {
       display: inline-block;
   }
   .hidden-element {
       display: none;
   }
   .flex-container {
       display: flex;
   }
   .grid-container {
       display: grid;
   }

以上示例代码中，分别将名为block-element、inline-element、inline-block-element的元素分别设置为块级元素、行内元素、行内块级元素的显示方式；将名为hidden-element的元素隐藏；将名为flex-container的元素设置为弹性盒子容器；将名为grid-container的元素设置为网格容器。

8、你了解Flex布局吗？

Flex布局是一种用于页面布局的CSS3模块，它提供了一种灵活的方式来对容器中的子元素进行布局和排列。通过将容器设置为display: flex;，容器的子元素就可以根据弹性盒子的一些属性来自动调整其大小、位置和顺序。 Flex布局的一些主要概念和属性包括：

  1. 主轴和交叉轴：Flex容器有一个主轴和一个交叉轴。默认情况下，主轴是水平方向，交叉轴是垂直方向。可以使用flex-direction属性来改变主轴的方向。
  2. Flex容器属性：
    • display: flex;：将容器设置为弹性盒子。
    • flex-direction：指定主轴的方向。
    • justify-content：定义主轴上子元素的对齐方式。
    • align-items：定义交叉轴上子元素的对齐方式。
    • flex-wrap：定义子元素是否换行。
    • align-content：定义多行子元素的对齐方式。
  3. Flex项属性：
    • flex-grow：定义子元素的放大比例。
    • flex-shrink：定义子元素的缩小比例。
    • flex-basis：定义子元素的初始大小。
    • flex：简写属性，包含flex-grow、flex-shrink和flex-basis。
    • order：定义子元素的排列顺序。

Flex布局相比传统的CSS布局更加灵活和简洁，可以方便地实现等高布局、水平居中、垂直居中、自适应布局等常见的页面布局需求。

9、CSS 中选择器的优先级。

CSS中选择器的优先级是指在样式冲突时，浏览器根据一定的规则来确定应用哪个样式。选择器的优先级可以通过以下规则进行判断：

  1. !important：具有最高优先级的标志，可以直接在样式中使用!important声明，它会覆盖其他所有规则。
  2. 内联样式：直接在HTML元素上使用style属性设置的样式具有较高的优先级，会覆盖外部样式表和内部样式表中相同的属性。
  3. ID选择器：通过#符号来定义的ID选择器具有较高的优先级，它会覆盖类选择器和标签选择器。
  4. 类选择器、属性选择器和伪类选择器：通过.符号来定义的类选择器、属性选择器和伪类选择器具有相同的优先级，它们会覆盖标签选择器。
  5. 元素选择器和伪元素选择器：通过标签名来定义的元素选择器和通过::符号来定义的伪元素选择器具有较低的优先级，在其他选择器都无法匹配时才会应用。
  6. 继承样式：继承样式的优先级最低，它会被其他具有更高优先级的样式覆盖。

当遇到多个选择器具有相同的优先级时，后面声明的样式会覆盖先前声明的样式。如果不同选择器具有不同的优先级，则具有更高优先级的样式会覆盖具有较低优先级的样式。 需要注意的是，选择器优先级是根据选择器的组合来计算的，而不是简单地根据选择器的数量来判断。例如，一个ID选择器的优先级高于多个类选择器的组合，即使类选择器的数量更多。

10、可以继承的CSS样式有哪些？

在CSS中，有一些样式属性是可以继承的，也就是说当父元素应用了这些样式属性时，子元素会自动继承相同的样式属性。以下是一些常见的可以继承的CSS样式属性：

  1. 字体样式：
    • font-family：字体系列
    • font-size：字体大小
    • font-weight：字体粗细
    • font-style：字体样式（斜体、正常等）
  2. 文本样式：
    • color：文本颜色
    • line-height：行高
    • text-align：文本对齐方式
    • text-decoration：文本装饰（下划线、删除线等）
  3. 盒模型样式：
    • padding：内边距
    • margin：外边距
    • border：边框样式
  4. 列表样式：
    • list-style-type：列表项标志类型
    • list-style-image：列表项标志图像
  5. 表格样式：
    • border-collapse：表格边框合并方式
    • text-align：表格单元格文本对齐方式

需要注意的是，虽然这些样式属性可以继承，但并不是所有的子元素都会继承这些属性。有些元素对某些属性有默认值或特定行为，因此可能导致继承不生效。此外，也可以使用inherit关键字来强制继承特定属性，即使该属性默认不可继承。 此外，还有一些特定的CSS属性是不可继承的，比如display、position、float、clear等。这些样式属性在子元素中需要单独设置。

11、定位的方式有哪几种？

  1. 静态定位（Static）：默认的定位方式，元素按照正常的文档流进行布局，不受其他定位方式的影响。
  2. 相对定位（Relative）：通过设置position: relative;，元素相对于其正常位置进行定位。可以通过top、right、bottom、left属性来调整元素的位置，但仍然占据原来的空间。
  3. 绝对定位（Absolute）：通过设置position: absolute;，元素相对于其最近的已定位（非静态定位）的父元素进行定位。如果没有已定位的父元素，则相对于文档的初始坐标进行定位。可以使用top、right、bottom、left属性来调整元素的位置，不占据原来的空间。
  4. 固定定位（Fixed）：通过设置position: fixed;，元素相对于浏览器窗口进行定位，始终保持在固定的位置。可以使用top、right、bottom、left属性来调整元素的位置，不占据原来的空间。
  5. 粘性定位（Sticky）：通过设置position: sticky;，元素在滚动到特定位置时会固定在屏幕上。可以使用top、right、bottom、left属性来调整元素的位置，不占据原来的空间。粘性定位在某些旧版本的浏览器中可能不支持。

12、CSS长度单位有哪些

  1. 像素（px）：最常用的单位，表示绝对长度，相对于屏幕上的一个像素点。
  2. 百分比（%）：相对于父元素的百分比。例如，width: 50% 表示元素的宽度为父元素宽度的50%。
  3. em（em）：相对于元素的字体大小。例如，font-size: 2em 表示字体大小是父元素字体大小的两倍。
  4. rem（rem）：相对于根元素（即html元素）的字体大小。与em不同，rem的参考点是固定的，不会受到父元素字体大小的影响。
  5. vw（视窗宽度单位）：相对于视窗宽度的百分比。例如，width: 50vw 表示元素的宽度是视窗宽度的50%。
  6. vh（视窗高度单位）：相对于视窗高度的百分比。例如，height: 50vh 表示元素的高度是视窗高度的50%。
  7. vmin（视窗最小尺寸单位）：相对于视窗宽度和高度中较小值的百分比。例如，width: 50vmin 表示元素的宽度是视窗宽度和高度中较小值的50%。
  8. vmax（视窗最大尺寸单位）：相对于视窗宽度和高度中较大值的百分比。例如，width: 50vmax 表示元素的宽度是视窗宽度和高度中较大值的50%。
  9. pt（点）：相对于1/72英寸的长度单位。
  10. cm（厘米）：相对于1厘米的长度单位。
  11. mm（毫米）：相对于1毫米的长度单位。
  12. in（英寸）：相对于1英寸的长度单位。

13、JS的数据类型有哪些？

基本数据类型：

  1. 数字（Number）：表示数字，包括整数和浮点数。
  2. 字符串（String）：表示文本，使用引号（单引号或双引号）括起来的字符序列。
  3. 布尔值（Boolean）：表示真或假，只有两个值：true和false。
  4. 空（Null）：表示一个空值。
  5. 未定义（Undefined）：表示一个未定义的值。

复杂数据类型：

​ 对象（Object）：表示一组相关的数据和功能，可以通过键值对的形式来存储和访问数据。对象可以是内置的对象（如Array、Date等）或自定义的对象。

特殊的数据类型：

​ Symbol（符号）：表示唯一的标识符，用于对象属性的唯一性。

需要注意的是，JavaScript的数据类型是动态的，变量可以在运行时改变其数据类型。

14、如何判断JS的数据类型？

在 javascript 中，判断一个变量的类型可以用 typeof

  1. 数字类型：typeof 返回的值是 number。比如说：typeof(1)，返回值是number 。
  2. 字符串类型：typeof 返回的值是 string。比如 typeof(“123”返回值时string) 。
  3. 布尔类型：typeof 返回的值是 boolean。比如 typeof(true)返回值时 boolean。
  4. 对象、数组、null 返回的值是 object。比如 typeof(window)，typeof(document)，typeof(null)返回的值都是 object 。
  5. 函数类型，返回的值是 function。比如：typeof(eval)，typeof(Date)返回的值都是function。
  6. 不存在的变量、函数或者 undefined，将返回 undefined。比如：typeof(abc)、typeof(undefined) 都返回 undefined。

typeof对于数组、对象和null都返回"object"，这是因为它们在JavaScript内部都是通过对象实现的。尽管typeof可以提供一些基本的数据类型判断，但它并不是完全准确的，不能区分出对象的具体类型。因此，在实际开发中，有时需要结合其他方法来进行更精确的数据类型判断。

instanceof是JavaScript中的一个运算符，可以检查一个对象是否属于某个特定的对象类型。它的语法是object instanceof constructor，其中object是要检查的对象，constructor是要检查的构造函数（或类）。

instanceof运算符会检查对象的原型链，如果对象的原型链中包含指定的构造函数（或其派生构造函数），则返回true，否则返回false。 需要注意的是，instanceof只能用于检查对象是否属于某个构造函数创建的实例，不能用于判断基本数据类型。 另外，instanceof也不能判断两个不同的全局上下文中创建的对象是否属于同一个类型，因为每个全局上下文都有自己的构造函数。 在实际开发中，可以使用instanceof来做类型检查，但需要注意其限制和适用范围。在某些情况下，可能需要结合其他方法来进行更准确的类型判断。

15、什么是promise？

Promise是JavaScript中处理异步编程的一种方式。它是一个表示异步操作最终完成或失败的对象。Promise对象可以有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。 使用Promise可以更好地管理和处理异步操作，避免了回调地狱（callback hell）的问题，使代码更加可读和可维护。 一个Promise对象包含以下几个重要的方法：

  1. new Promise(executor)：创建一个新的Promise对象，接收一个执行器函数（executor）作为参数。执行器函数在Promise对象被创建时立即执行，并接收两个参数：resolve和reject。resolve用于将Promise的状态从pending变为fulfilled，reject用于将Promise的状态从pending变为rejected。
  2. .then(onFulfilled, onRejected)：在Promise对象的状态变为fulfilled时调用onFulfilled方法，在状态变为rejected时调用onRejected方法。这些方法都是可选的，可以根据需求选择是否提供。
  3. .catch(onRejected)：在Promise对象的状态变为rejected时调用onRejected方法。相当于.then(null, onRejected)的简写形式。
  4. .finally(onFinally)：在Promise对象的状态变为fulfilled或rejected时都会执行onFinally方法。不管Promise的状态如何，都会执行该方法。

Promise的基本用法如下：

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve(result); // 将Promise状态变为fulfilled，并传递结果
  } else {
    reject(error); // 将Promise状态变为rejected，并传递错误信息
  }
});
promise.then((result) => {
  // 处理异步操作成功的情况
}).catch((error) => {
  // 处理异步操作失败的情况
}).finally(() => {
  // 最终执行的操作
});

可以通过链式调用多个.then()方法来处理连续的异步操作，每个.then()方法的返回值仍然是一个Promise对象，可以继续进行链式调用。 Promise还提供了其他一些静态方法，如Promise.all()、Promise.race()等，用于处理多个Promise对象的并行或竞争关系。 总结来说，Promise是一种用于处理异步操作的机制，通过链式调用的方式让代码更加清晰和易于理解。它提供了一种更好的方式来处理异步操作的结果和错误，并且避免了回调地狱的问题。

16、手写promise。

const PROMISE_STATUS_PENDING = 'pending' //定义三种状态常量
const PROMISE_STATUS_FULFILLED = 'fulfilled'
const PROMISE_STATUS_REJECTED = 'rejected'
 
class myPromise {
    constructor(executor) {
        this.status = PROMISE_STATUS_PENDING	//初始化状态 pending
        this.value = undefined		//保存参数
        this.error = undefined
        this.resfns = []	//多次调用then 时用数组保存
        this.errfns = []
 
        const resolve = ((value) => {
            if (this.status === PROMISE_STATUS_PENDING) {	//只有pending状态才可改变
                queueMicrotask(() => {		//queueMicrotask:  主线程执行完毕之后立马执行
                    if (this.status !== PROMISE_STATUS_PENDING) return //避免 调用resolve 后又调用 reject 多次执行
                    this.status = PROMISE_STATUS_FULFILLED
                    this.value = value
                    this.resfns.forEach(fn => {		//循环依次调用
                        fn(this.value)
                    })
                })
            }
        })
        const reject = ((error) => {
            if (this.status === PROMISE_STATUS_PENDING) {
                queueMicrotask(() => {
                    if (this.status !== PROMISE_STATUS_PENDING) return
                    this.status = PROMISE_STATUS_REJECTED
                    this.error = error
                    this.errfns.forEach(fn => {
                        fn(this.error)
                    })
                })
            }
        })
        executor(resolve, reject)	//在new myPromise 时初始化立即调用传递过来的函数
    }
 
 
    then(resfn, errfn) {	//.then方法接收2个回调函数作为参数:第一个为成功的回调，第二个失败的回调
        // 1.利用抛错让下一个promise的catch帮忙处理  防止catch方法让链式调用断层
        const defaultOnRejected = err => {
            throw err
        }
        errfn = errfn || defaultOnRejected
 
 
        const defaultOnFulfilled = value => {
            return value
        }
        resfn = resfn || defaultOnFulfilled
 
 
        return new myPromise((resolve, reject) => { //1. 直接new一个mypromise作为then方法的返回值既可实现 .then.then.thne.then.....等等链式调用
 
            if (this.status === PROMISE_STATUS_FULFILLED && resfn) {
                try { //2. 异常处理：若成功则继续执行then链式调用 的第一个回调，失败则执行then 的第二个回调
                    const value = resfn(this.value)
                    resolve(value)
                } catch (err) {
                    reject(err)
                }
            }
            if (this.status === PROMISE_STATUS_REJECTED && errfn) {
                try {
                    const value = errfn(this.error)
                    resolve(value)
                } catch (err) {
                    reject(err)
                }
            }
            if (this.status === PROMISE_STATUS_PENDING) {
                if (resfn) {
                    this.resfns.push(() => { //push 回调函数
                        try {
                            const value = resfn(this.value)
                            resolve(value)
                        } catch (err) {
                            reject(err) //利用抛出的错误使得下一个promise的catch帮忙处理
                        }
                    })
                }
                if (errfn) {
                    this.errfns.push(() => {
                        try {
                            const value = errfn(this.error)
                            resolve(value)
                        } catch (err) {
                            reject(err)
                        }
                    })
                }
            }
        })
    }
 
    catch (errfn) { //catch 方法
        return this.then(undefined, errfn)
    }
   
    finally(fn) {
        setTimeout(() => {
            fn()
        }, 0)
    }
}

17、常用的请求方式有哪些？

  1. GET：用于从服务器获取数据。通过URL传递参数，请求的数据会附加在URL的末尾，可以在浏览器的地址栏中看到。GET请求是幂等的，即多次请求同一资源返回的结果是相同的。
  2. POST：用于向服务器提交数据。通过请求体传递参数，请求的数据不会显示在URL中，更安全。POST请求对数据长度没有限制，可以传递大量的数据。POST请求不是幂等的，即多次请求同一资源返回的结果可能不同。
  3. PUT：用于向服务器更新数据，通常是整体替换某个资源。PUT请求会更新URL指定的资源，如果资源不存在则会创建新资源。
  4. DELETE：用于从服务器删除数据。DELETE请求会删除URL指定的资源。
  5. PATCH：用于向服务器部分更新数据。PATCH请求类似于PUT请求，但是只更新部分数据，而不是整体替换。
  6. OPTIONS：用于获取服务器支持的请求方法。发送OPTIONS请求可以查询目标服务器允许的请求方法，用于跨域请求等场景。

18、在发送请求时，可以传入哪些数据类型？

  1. 表单数据（Form Data）：通常在发送POST请求时使用，可以通过表单的方式将数据以键值对的形式传递给服务器。在浏览器中，可以使用FormData对象来构建表单数据。
  2. JSON数据：JSON（JavaScript Object Notation）是一种常用的数据交换格式，可以将数据以对象或数组的形式进行传递。在发送请求时，可以将数据先转换为JSON字符串，然后通过请求体发送给服务器。在浏览器中，可以使用JSON.stringify()方法将数据转换为JSON字符串。
  3. 字符串数据：可以直接以字符串的形式发送数据。这种方式适用于发送简单的文本数据，例如发送纯文本或HTML代码等。
  4. 数组或对象数据：可以直接将数组或对象作为请求的数据发送给服务器。在发送请求时，可以将数组或对象直接作为参数传递给请求方法。
  5. 二进制数据：有时需要发送二进制数据，例如上传图片或文件。在浏览器中，可以使用Blob对象来表示二进制数据，并通过请求体发送给服务器。

19、你了解async和await吗？

async和await是ES8（ECMAScript 2017）中引入的两个关键字，用于简化异步操作的代码编写。 async函数是一个返回Promise对象的函数，通过在函数前加上async关键字来定义。在async函数中，可以使用await关键字来暂停函数的执行，等待一个Promise对象的解析结果，并将解析值返回。 使用async和await可以使异步代码看起来更像同步代码，提高代码的可读性和可维护性。下面是一个使用async和await处理异步操作的示例代码：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data'); // 等待fetch请求的响应结果
    const data = await response.json(); // 等待将响应数据解析为JSON格式
    return data; // 返回解析后的数据
  } catch (error) {
    console.error(error); // 处理错误
    throw new Error('Failed to fetch data'); // 抛出自定义错误
  }
}
// 调用async函数并处理返回的Promise对象
fetchData()
  .then(data => {
    console.log(data); // 处理解析后的数据
  })
  .catch(error => {
    console.error(error); // 处理错误
  });

在上述代码中，fetchData函数是一个async函数，通过await关键字等待fetch请求的响应结果和解析后的数据，并使用try-catch语句处理可能发生的错误。调用fetchData函数会返回一个Promise对象，可以通过then方法处理解析后的数据或通过catch方法处理错误。 使用async和await可以使异步代码更加清晰、简洁，并且可以更方便地处理异步操作的结果。

20、说说ES6规范。

ES6（ECMAScript 2015）是ECMAScript的第六个版本，是JavaScript语言的一个重要规范。以下是ES6规范的一些主要特点：

  1. 语法改进：ES6引入了许多语法上的改进，如箭头函数、模板字符串、解构赋值、默认参数、扩展运算符等，使代码更简洁、更易读。
  2. 块级作用域：ES6中引入了let和const关键字，可以在块级作用域中声明变量和常量，解决了原有的变量提升问题。
  3. 类和模块化：ES6引入了class关键字，可以更方便地定义类和面向对象的编程。同时，ES6还引入了模块化的概念，通过import和export关键字，可以在不同的文件中导入和导出代码。
  4. Promise对象：ES6引入了Promise对象，用于处理异步操作，解决了回调地狱问题，提供了更优雅的异步编程方式。
  5. 新的数据类型和方法：ES6引入了一些新的数据类型，如Map、Set、Symbol等。同时，还提供了许多新的方法，如Array.from()、Array.find()、Object.assign()等，使开发更便捷。
  6. Generator函数：ES6引入了Generator函数，用于控制函数的执行，可以暂停和恢复函数的执行，并且可以通过迭代器进行遍历。
  7. 模板标签和标签模板：ES6引入了模板标签和标签模板的概念，可以自定义字符串模板的解析和处理方式。
  8. 箭头函数：ES6中的箭头函数通过=>符号定义，具有更简洁的语法和自动绑定的this，使函数的书写更简单。
  9. 引入了严格模式：ES6规范中默认启用了严格模式，要求代码更规范，减少一些不合理和容易出错的写法。
  10. 兼容性和向后兼容：ES6规范中考虑了向后兼容性，可以通过转译工具（如Babel）将ES6代码转换为ES5代码，以兼容老版本的浏览器。

ES6规范的引入为JavaScript开发带来了许多新特性和语法糖，提高了开发效率和代码质量，同时也推动了JavaScript语言的发展和标准化。

21、你还有什么问题问我吗？

  1. 关于公司：
    • 咱们公司的发展战略是什么？有没有未来的扩展计划？
    • 咱们公司对员工的职业发展和培训有何支持？
  2. 关于团队和职位：
    • 我这个职位的日常工作是怎样的？
    • 咱们公司的晋升机会和职业发展路径是怎样的？
  3. 关于工作环境和待遇：
    • 您能给我介绍一下我们工作的办公环境吗？
    • 能否告诉我一下薪资和福利方面的信息？
LINGYI_WEN
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
总结vue前端面试题
10-27
本人总结前端vue面试，包含vue的基础，以及vue的高级和组件话开发，和vue的2.0 版本，包含vue指令，插槽路由vuex等
前端上机面试题
02-18
要求： 1、编写一段js代码，实现列表数据渲染，点击对应的筛选条件（全部、按进度排序、按总需人次排序、即将揭晓）加载及渲染相应的数据，所有筛选条件的url请求地址都为http://192.168.2.10:90/app/mock/21/list，...
2024年前端面试题汇总
sun_qqq的博客
02-08 7万+
最近面试被打击的体无完肤，于是把面试题记录下来分享一下。vue真是必问框架，八股文该背的还是得背！
2023最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
热门推荐
xm1037782843的博客
06-15 56万+
2023前端最新最全面试题 javascript面试题 vue面试题 最新的全套面试题 附带答案
2024高频前端面试题（含答案）
weixin_44672169的博客
04-22 20万+
一、简单页面 1、CSS选择器样式优先级 2、CSS实现三列布局（左右固定宽度，中间自适应） （1）CSS浮动 第一个float:left，第二个float:right，第三个设置margin-left和margin-right （2）绝对定位法 第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right （3）flex布局 .left{ width:200px; 或者 flex:0 0 200px; } .right{ width:200px;
身为三本的我就是凭借这些前端面试题拿到百度京东offer的，前端面试题及答案
晟小明的博客
01-18 21万+
点进来之后你的噩梦就要来了，接下来你要面对上百道面试题，那么，如果你—— 是个小白菜： 推荐使用2~3周的时间来消化接下来的面试题， 遇到不会的专业名词请立刻去搜； 文章中只是简答，如果想要详细了解的话还需要你自觉去搜索 如果你是个大神： 好叭先给您拜个早年，大哥大嫂过年好。 请温柔点黑我。 顺便，如果有错误的地方请各位一定要指出，免得误导更多人。 接下来的题我会根据重点程度使用⭐来标记，⭐越多标明越重点，满星是5颗星 ok，你准备好了吗？咱们开始吧！ JS 数据类型 面试官：JavaSc
前端面试题（附答案）完善中……
Jet_Lover的博客
04-19 14万+
前端面试笔记前言一、HTML篇1.语义话的目的是什么？⭐2.HTML5新特征⭐⭐⭐3.cookie与sessionStorage和localStorage的区别⭐⭐⭐二、CSS篇1.css有哪些基本的选择器，执行先后顺序？⭐2.垂直居中DIV⭐⭐⭐3.两栏布局左边固定右边自适应⭐⭐3.三栏布局左右固定中自适应⭐⭐4.常用的块与行属性内标签有哪些？有什么特征⭐⭐5.清除浮动⭐⭐⭐6.CSS3新特征⭐⭐⭐7.介绍一下盒模型⭐⭐8.CSS中有哪些长度单位？⭐⭐9.display:none和visibility:h
最新Web前端面试题精选大全及答案
HanXiaoXi_yeal的博客
01-07 18万+
HTML、CSS相关 1.网络中使用最多的图片格式有哪些 JPEG,GIF,PNG,最流行的是jpeg格式，可以把文件压缩到最小 在ps以jpeg格式存储时，提供11级压缩级别 2.请简述css盒子模型 一个css盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）。默认情况下，盒子的width和height属性只是设置content（内容）的宽和高， 盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框 盒子真正
2023年大厂前端面试题汇总
IT博客技术分享
08-14 2103
重排就是重新排列（reflow）：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。重绘就是重新绘制（repaint）：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。17. 小程序包大小限制，体积超标的话如何处理（图片压缩+CDN, 分包操作）6. js的基本数据类型， 值类型和引用类型。23. nginx处理跨域-反向代理（原理）26. 过去遇到有挑战的事情，怎么解决的？
前端面试题汇总大全（含答案）-- 持续更新
张兴华的博客
08-07 17万+
汇总了一些前端常见的面试题。 一、HTML 篇 1. 简述一下你对 HTML 语义化的理解？ 用正确的标签做正确的事情。 html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的; 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO; 使阅读源代码的人对网站更容易将网站...
高级前端面试题及详解
蛋蛋的博客
02-13 1335
当准备高级前端面试时，除了掌握基本的前端知识外，还需要深入了解一些更高级的概念和技术。什么是服务端渲染（SSR）和客户端渲染（CSR）？什么是服务端渲染（SSR）和客户端渲染（CSR）？什么是 Web Workers？如何使用 Web Workers？什么是单页面应用（SPA）？什么是单页面应用（SPA）？什么是虚拟 DOM？它如何提高前端性能？什么是虚拟 DOM？它的工作原理是什么？如何实现响应式设计？如何实现响应式设计？什么是渐进增强和优雅降级？什么是渐进增强和优雅降级？如何进行前端性能优化？
2023最全最新前端面试题（附加解答）
My dream
06-23 11万+
这是我整理所有看过的文章的面试题+各种百度每一道题的答案，希望可以有效的帮助别人 本章博客，梳理所有基础的js，jquery，vue，css, html等题，包含面试题，可供参考学习，也督促自我学习
2023最新前端面试题总结
05-30
"前端面试题总结" 以下是根据给定文件信息生成的相关知识点： 浏览器兼容性 在前端开发中，浏览器兼容性是一个非常重要的问题。不同的浏览器对 HTML、CSS、JavaScript 的解析和执行方式不同，这导致了同一个页面...
100道前端面试题.pdf
07-08
整理了100道前端面试官必问的面试题，避免内卷，走上高薪之路
前端面试题整理前端面试题整理
01-21
前端面试题整理前端面试题整理，Vue部分
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 353
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 516
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
最新发布
liyrbtqe_66w的博客
06-12 238
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
vue3如何定义一个组件
Java程序员专栏
06-09 540
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
2024 前端面试题
03-26
2024年前端面试题的具体内容我无法预测，因为技术的发展是非常迅速的，未来几年前端领域可能会有新的技术和框架出现。但是，我可以给你介绍一些目前比较常见的前端面试题，供你参考： 1. HTML/CSS基础：包括HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值