【前端面试题】前端面试题总结2023-7-13（五）-阿里云开发者社区

34、字符串方法及使用场景

在 JavaScript 中，字符串是一种基本的数据类型，用于存储和操作文本字符串。为了方便地对字符串进行操作和处理，JavaScript 提供了许多内置的字符串方法。下面介绍几个常见的字符串方法及其使用场景：

indexOf 和 lastIndexOf
indexOf() 方法用于查找字符串中某个子串的位置，返回子串的开始位置，如果没有找到该子串，则返回 -1；lastIndexOf() 方法与 indexOf() 类似，但从字符串的末尾开始查找。示例代码如下：

const str = 'Hello world!';
const index = str.indexOf('world');     // 返回 6
const lastIndex = str.lastIndexOf('o'); // 返回 7

substring 和 slice
substring() 方法用于从字符串中提取一部分子串，根据起始位置和结束位置来指定子串的范围，不包括结束位置的字符；slice() 方法也用于提取字符串的一部分，根据起始位置和结束位置来指定子串的范围，包括结束位置的字符。这两个方法的使用场景相似，但有些细节不同。示例代码如下：

const str = 'Hello world!';
const subStr = str.substring(0, 5);  // 提取 'Hello' 子串
const sliceStr = str.slice(6, 11);   // 提取 'world' 子串

replace
replace() 方法用于替换字符串中的某个子串，可以替换一次或多次。示例代码如下：

const str = 'Hello world!';
const newStr = str.replace('world', 'JavaScript');  // 将 'world' 替换为 'JavaScript'，生成新的字符串 'Hello JavaScript!'

split 和 join
split() 方法用于将字符串分割成一个数组，join() 方法则是将数组转换为一个字符串，这两个方法经常成对使用。示例代码如下：

const str = '1,2,3,4,5';
const arr = str.split(',');         // 将字符串 '1,2,3,4,5' 分割成数组 [1, 2, 3, 4, 5]
const newStr = arr.join('-');       // 将数组 [1, 2, 3, 4, 5] 转换为字符串 '1-2-3-4-5'

除了以上介绍的几个字符串方法，JavaScript 还提供了很多其他有用的字符串方法，例如 charAt()、charCodeAt()、toLowerCase()、toUpperCase()、trim() 等，需要根据实际需求来选择使用哪些方法。在处理字符串时，需要注意一些细节，如字符串的不变性、编码方式等，避免出现一些潜在的问题。

35、防抖和节流有什么区别，使用场景？

防抖（debounce）和节流（throttle）都是为了解决 JavaScript 中频繁触发事件而导致的性能问题。

区别：

防抖（debounce）的原理是在事件被触发 n 秒后才会执行回调函数，如果在这 n 秒内又被触发，则重新计时。也就是说，只有在触发事件后 n 秒内没有再次触发事件，函数才会执行一次。常见的场景有：输入框输入完成后进行搜索、窗口大小改变后重新渲染等。

举例来说，当我们在输入框里输入文字时，每次输入都会触发输入事件，如果我们希望在用户输入完成之后再进行搜索，那么可以通过 debounce 将输入事件延迟 n 秒执行，避免了每次输入都触发一次搜索请求，从而提高性能并减少服务器的负担。

节流（throttle）的原理是在一定时间内只允许函数执行一次，也就是说，如果在这段时间内连续多次触发事件，函数也只会执行一次，直到这段时间结束。常见的场景有：鼠标拖拽、页面滚动等。

举例来说，当我们在网页中进行无限滚动操作时，如果每次滚动都触发一次加载更多数据的操作，可能会导致页面卡顿，从而影响用户体验。这个时候可以通过 throttle 将加载数据的操作暂停一段时间，待用户停止滚动后再进行加载。

使用场景：

防抖通常应用于输入框等可能频繁触发事件的场景，以减少事件触发次数并提高性能。例如：搜索框搜索、调整窗口大小等。
节流通常应用于连续触发事件后需要执行某些操作的场景，以限制函数的触发次数。例如：鼠标滚动、拖拽操作等。

总之，防抖和节流都是常用的 JavaScript 性能优化方法，通过合适地选择使用场景，可以有效地提高代码性能和用户体验。

36、深拷贝和浅拷贝的区别，如何实现深拷贝

深拷贝和浅拷贝是 JavaScript 中两种不同的对象复制方式。

区别：

浅拷贝只复制了对象的引用，而不是对象本身，因此原始对象和拷贝对象会共享相同的属性和方法，改变一个对象的属性或者方法会影响到另一个对象。而深拷贝是将原始对象和拷贝对象完全独立，两者之间不会相互影响。
浅拷贝是逐层复制，如果对象中嵌套了其他对象，那么拷贝对象中的嵌套对象仍然是原来的引用，因此仍然是共享的。而深拷贝则会递归地复制所有的对象和数组，使得拷贝后的对象和原始对象完全分离。

实现深拷贝的方法：

使用 JSON.parse()/JSON.stringify() 方法：这是最简单也最常用的实现深拷贝的方法，通过使用 JSON.stringify() 方法将对象转换为字符串，再使用 JSON.parse() 方法将字符串转换为新的对象。这种方法虽然简单易用，但是有一些限制，例如无法复制函数、正则表达式等特殊类型数据。
递归拷贝：递归拷贝是使用递归函数遍历对象的所有属性和方法，并将其复制到新的对象中。对于嵌套的对象和数组，需要递归调用拷贝函数。
Object.assign()方法：这种方式是浅拷贝，如果只需要拷贝对象的第一层属性，可以使用 Object.assign() 方法，它将源对象的属性复制到目标对象中，返回目标对象。但是如果源对象中有嵌套对象或者数组，那么拷贝后的对象仍然会共享嵌套对象和数组的引用。

总之，了解深拷贝和浅拷贝的区别以及实现方法，能够帮助我们更好地理解 JavaScript 中的对象和数据类型，并且让我们在开发中更加灵活地进行对象的复制和管理。

37、call，apply,bind有什么区别？如何实现一个bind？

call, apply 和 bind 都是 JavaScript 中用于改变函数执行上下文的方法。

call 和 apply 的作用类似，都是立即调用一个函数并指定其中的 this 关键字。其区别仅在于传递参数的方式不同：call 方法接受多个单独的参数，而 apply 方法则接受一个数组作为参数，数组中的每个元素对应函数的一个参数。

bind 方法与 call 和 apply 方法的区别在于，它返回一个新的函数，而不是立即调用该函数。新的函数具有与原始函数相同的代码和作用域，但是其执行上下文中的 this 关键字被永久地绑定到指定的对象。

以下是一个简单的实现 bind 方法的示例：

Function.prototype.myBind = function(obj) {
  // 存储原始函数和绑定对象
  var originalFunc = this;
  var boundObj = obj;
  // 返回一个新的函数
  return function() {
    // 在新函数中使用 apply 方法调用原始函数
    return originalFunc.apply(boundObj, arguments);
  };
};

以上示例通过添加 myBind 方法到 Function.prototype 中来扩展 Function 对象，并返回一个新的函数。新函数中调用原始函数时使用 apply 方法，并将绑定对象作为第一个参数传递。由于 arguments 是当前函数中可用的特殊变量，它将包含新函数的所有参数。使用 arguments 参数的优点是，可以将 bind 方法与任意数量的参数一起使用，而不必显式指定每个参数。

38、说说你对BOM对象的理解？常见的BOM对象有哪些？

BOM（浏览器对象模型）是指浏览器提供的一组 JavaScript 对象和方法，用于操作浏览器窗口和其他功能。 BOM对象通常都指window对象的属性或方法，也就是全局变量。

常见的BOM对象有：

window 对象：代表了整个浏览器窗口，是所有 BOM 对象的容器对象，它包含了很多属性和方法，例如定时器、地址栏等。
navigator 对象：提供了与浏览器有关的信息，例如浏览器的名称和版本号，还可以检测用户浏览器类型、插件信息等。
location 对象：提供了当前文档的 URL 信息，可以用于读取和修改当前页面的 URL 路径、参数、锚点等。
screen 对象：提供了用户屏幕的信息，例如屏幕的分辨率、可用宽度和高度等。
history 对象：提供了浏览器历史记录的信息，可以用于向前和向后遍历历史记录。
document 对象：虽然不是严格意义上的 BOM 对象，但它也是浏览器提供的重要对象，用于操作文档的内容、结构和样式等。

BOM 对象对于前端开发非常重要，它们提供了许多有用的功能和方法，能够使我们更有效地操作浏览器窗口、检测用户环境、管理浏览器历史记录等。

39、说说DOM常见的操作有哪些?

在 JavaScript 中，DOM（文档对象模型）是表示 HTML 文档的标准编程接口。通过使用 DOM，我们可以使用一组常见的操作来操纵 HTML 元素和处理页面中的内容。以下是 DOM 常见的操作：

获取元素：

getElementById()：根据元素的 ID 获取元素。
getElementsByClassName()：根据类名获取一组元素。
getElementsByTagName()：根据标签名获取一组元素。
querySelector()：根据选择器获取第一个匹配的元素。
querySelectorAll()：根据选择器获取所有匹配的元素。

操作元素属性和内容：

innerHTML：获取或设置元素的 HTML 内容。
value：获取或设置表单元素的值。
className：获取或设置元素的类名。
attribute：获取或设置元素的属性值。

创建、添加和删除元素：

createElement()：创建新的元素节点。
createTextNode()：创建包含文本的文本节点。
appendChild()：将一个元素节点添加为另一个元素节点的子节点。
removeChild()：从父节点中移除子节点。

添加和移除事件监听器：

addEventListener()：为元素添加事件监听器。
removeEventListener()：移除元素的事件监听器。

修改 CSS 样式：

style.property：修改元素的具体 CSS 属性。
classList.add()：为元素添加一个或多个类名。
classList.remove()：从元素中移除一个或多个类名。

遍历和操作节点树：

parentNode：获取父节点。
childNodes：获取子节点列表。
nextSibling：获取下一个兄弟节点。
previousSibling：获取前一个兄弟节点。
cloneNode()：复制节点。

以上仅是一些常见的 DOM 操作，还有许多其他的方法和属性可以用于处理和操纵 HTML 元素。DOM 操作在前端开发中非常重要，通过它可以实现动态更新页面内容、响应用户交互和操作HTML 元素等功能。

40、js本地存储的方式有哪些? 有什么区别?

JavaScript 提供了几种本地存储方式，用于在客户端浏览器中保存数据。以下是常见的本地存储方式以及它们之间的区别：

Cookie：

存储容量：大多数浏览器支持每个域名最多存储 4KB 的数据。
存储位置：数据存储在客户端浏览器中，每次请求都会发送到服务器。
过期时间：可以设置过期时间，可以是会话级别（关闭浏览器后过期）或具体的日期时间。
使用场景：适合存储小型数据，如用户标识、会话数据等。

LocalStorage：

存储容量：大多数浏览器支持至少 5MB 的数据存储。
存储位置：数据永久存储在客户端浏览器中。
过期时间：没有过期时间，除非手动清除或使用代码删除。
使用场景：适合存储较大的数据，如用户首选项、本地缓存等。

SessionStorage：

存储容量：与 LocalStorage 相同，大多数浏览器支持至少 5MB 的数据存储。
存储位置：数据存储在客户端浏览器中，每个浏览器窗口或标签页都有自己的 SessionStorage。
过期时间：在会话结束后（关闭浏览器窗口或标签页）自动清除。
使用场景：适合存储临时数据，如表单数据、页面间通信等。

IndexedDB：

存储容量：较大，一般支持数百 MB 的数据存储。
存储位置：数据存储在客户端浏览器中，以数据库形式进行组织。
过期时间：没有过期时间，需要手动删除。
使用场景：适合存储大量结构化数据，如离线应用、高级查询等。

Web SQL Database（已废弃）：

存储容量：与 IndexedDB 相同，较大。
存储位置：数据存储在客户端浏览器中，以关系数据库形式进行组织。
过期时间：没有过期时间，需要手动删除。
使用场景：适合存储结构化数据，但已经被废弃，不建议使用。

区别总结：

Cookie 是最古老的本地存储方式，容量小且每次请求都会发送到服务器。
LocalStorage 和 SessionStorage 容量较大，但 SessionStorage 在会话结束后会自动清除。
IndexedDB 是一种功能强大的数据库存储方式，适合存储大量结构化数据。
Web SQL Database 已废弃，不建议使用。

选择合适的本地存储方式取决于数据大小、需要持久性还是临时性、是否涉及结构化数据等因素。

41、说说原生Ajax的实现原理是什么，实现步骤？

原生Ajax（Asynchronous JavaScript and XML）是一种通过JavaScript使用XMLHttpRequest对象与服务器进行异步通信的技术。它可以在不重新加载整个页面的情况下，通过后台发送HTTP请求并接收响应数据，实现动态更新页面内容。

原生Ajax的实现原理如下：

创建XMLHttpRequest对象：通过JavaScript代码创建一个名为XMLHttpRequest的对象，用于向服务器发送HTTP请求和接收响应。
初始化请求：使用XMLHttpRequest对象的open()方法，指定请求的类型（GET、POST等）、URL和是否采用异步方式（通常为true，即异步）。
设置回调函数：使用XMLHttpRequest对象的onreadystatechange事件，指定当状态改变时要执行的处理函数。
发送请求：使用XMLHttpRequest对象的send()方法，发送HTTP请求到服务器。
接收响应：浏览器会异步地接收来自服务器的响应，并将响应数据存储在XMLHttpRequest对象的responseText或responseXML属性中，可以通过这些属性获取到服务器返回的数据。
处理响应：在回调函数中，检查XMLHttpRequest对象的readyState属性，它表示请求的当前状态。当readyState值为4时，表示请求已完成，可以从responseText或responseXML属性中获取到完整的响应数据。
更新页面内容：根据请求的响应数据，使用JavaScript代码更新页面的内容，可以是更新特定的元素、执行其他操作或进行错误处理。

原生Ajax的实现步骤可以简单概括为创建对象、初始化请求、发送请求、接收响应和处理响应。通过这些步骤，可以实现与服务器的异步通信，并在不刷新整个页面的情况下更新页面内容。

42、为什么要有跨域？JS跨域怎么解决？

跨域是指在浏览器中，当前网页所在的域（协议、域名或端口）与请求的资源所在的域不一致，浏览器会限制跨域请求。这是为了保护用户隐私和安全，防止恶意网站访问其他域上的资源。跨域问题是前端开发中常遇到的一种限制。

JS跨域问题可以通过以下几种方式解决：

JSONP (JSON with Padding)：JSONP是一种利用

43、new 一个对象具体做了什么？

使用new关键字来创建一个对象时，会进行以下几个步骤：

创建一个新的空对象：在内存中分配一块空间，用于存储新创建的对象。
将对象的原型指向构造函数的原型：新对象会继承它的构造函数的原型对象上的属性和方法。通过设置新对象的[[Prototype]]属性指向构造函数的prototype属性，建立了对象与构造函数之间的原型链。
执行构造函数的代码块：将构造函数作为一个普通的函数调用，此时的this指向新创建的对象。在构造函数内部，可以通过this关键字来引用新对象，并给新对象添加属性和方法。
返回新的对象：如果构造函数没有显式返回其他对象，则new表达式返回新创建的对象；否则，返回构造函数显式返回的对象。

总结起来，new关键字的作用是创建一个新的对象，并将该对象的原型指向构造函数的原型，同时执行构造函数内的代码，并返回新的对象。这样，通过new操作符调用构造函数可以方便地创建具有相同属性和方法的多个对象。

四、H5/C3面试题

1、什么是语义化标签

语义化标签是指在HTML中使用具有明确含义的标签来描述页面结构和内容的方法。这种方法强调使用适当的标签来传达文档的结构和含义，使得页面具备更好的可读性、可访问性和可维护性。

传统的HTML标签（如 <div> 和 <span>）在没有具体语义的情况下被广泛使用，开发人员通常根据样式需求选择使用这些标签。然而，这种做法使得页面源代码难以理解，缺乏对内容结构的明确描述，给维护和阅读带来困难。

相比之下，语义化标签使用具有特定含义的标签来描述页面中的不同部分。例如：<header> 表示页面的标题或页眉部分，<nav> 表示导航链接列表，<article> 表示独立的文章内容等。使用这些语义化标签可以使页面结构更易于理解，提高代码可读性，并为搜索引擎提供更多关于网页内容和结构的信息。

语义化标签的优势包括：

可读性：通过使用具有明确含义的标签，代码更易于理解和维护。
可访问性：语义化标签提供了更多的语义信息，使辅助技术（如屏幕阅读器）和搜索引擎能够更好地理解页面内容。
SEO优化：搜索引擎可以根据语义化标签更准确地了解页面结构和内容，提高搜索结果的相关性和排名。
设计灵活性：通过结构化的语义化标签，开发人员可以更容易地对页面进行样式设计和布局。

需要注意的是，语义化标签并不意味着一定要完全避免使用 <div> 等非语义化标签，而是在适当的地方使用语义化标签，使得整体的页面结构更具有可读性和可访问性。

2、::before和:after中双冒号和单冒号有什么区别？解释一下这两个伪元素的作用

在CSS中，::before和::after是伪元素，它们用于在选定的元素之前或之后插入内容。双冒号 :: 和单冒号 : 都可以用于表示伪元素，但是双冒号 :: 是CSS3引入的新语法，用于区分伪类（比如:hover）和伪元素的写法。

双冒号 :: 表示伪元素，而单冒号 : 既可以用于表示伪类，也可以用于表示伪元素。然而，根据 CSS3 规范，伪元素应该使用双冒号 :: 表示，以便与伪类进行区分。尽管如此，为了向后兼容，单冒号 : 仍然可以用于表示伪元素，并且在大多数浏览器中都被支持。

作用方面，::before 和 ::after 可以用于在选定元素的内容前面或后面插入生成的内容。它们是通过CSS样式来定义的，可以设置内容、样式、位置等。

具体的使用方式如下：

.element::before {
  content: "Before";
  /* 其他样式 */
}
.element::after {
  content: "After";
  /* 其他样式 */
}

这样，对于带有 .element 类的元素，会在其内容的前面插入一个生成的内容 “Before”，并在其内容的后面插入一个生成的内容 “After”。

::before 和 ::after 伪元素通常用于添加装饰性的内容、图标、形状或注释等。通过设置它们的样式，可以实现一些有趣的效果和布局需求，同时保持HTML结构的简洁性。

3、如何关闭IOS键盘首字母自动大写

关闭iOS设备上键盘首字母自动大写的功能，您可以按照以下步骤进行操作：

打开设置：在您的iOS设备上，找到并点击主屏幕上的"设置"应用程序图标。
进入键盘设置：在设置页面中，滚动找到并点击"通用"选项。
进入键盘设置：在通用设置页面中，继续向下滚动并选择"键盘"选项。
大写锁定设置：在键盘设置页面中，找到并切换"自动大写"选项的状态。

蓝色表示"自动大写"开启状态，即首字母自动大写；
灰色表示"自动大写"关闭状态，即首字母不再自动大写。

通过以上步骤，您可以在iOS设备上关闭键盘首字母自动大写的功能。请注意，具体的菜单选项可能因iOS版本而有所差异，以上步骤基于iOS 14版本进行说明，其他版本可能会有些许差异。

4、怎么让Chrome支持小于12px的文字？

在默认情况下，许多现代的浏览器（包括Chrome）不支持小于12px的文字大小。这是因为浏览器的默认设置中，对于小于12px的文字大小会应用最小字号限制。

要使Chrome支持小于12px的文字大小，您可以使用CSS中的-webkit-text-size-adjust属性来取消最小字号限制。请按照以下步骤进行操作：

在CSS中添加如下样式：

body {
  -webkit-text-size-adjust: none;
}

这将禁用Chrome的最小字号限制。

使用具体的选择器将上述样式应用于具体的元素，例如：

h1 {
  -webkit-text-size-adjust: none;
}

这将仅在<h1>标签中禁用最小字号限制。

如果希望在整个页面上都禁用最小字号限制，可以将样式应用于整个文档：

* {
  -webkit-text-size-adjust: none;
}

这将在整个页面中禁用最小字号限制。

需要注意的是，禁用最小字号限制可能会导致小字号的文字在一些浏览器中显示模糊或难以阅读。因此，在使用小于12px的文字时，请确保它仍然具有良好的可读性，并且在不同设备和浏览器上都能正常显示。

5、rem和em的区别

在CSS中，rem（Root EM）和em（Relative EM）都是用于设置相对字体大小的单位。它们之间的区别在于参照对象的不同。

em：em单位的参照对象是其父元素的字体大小。如果一个元素的字体大小设置为1em，那么它将等于其父元素的字体大小。如果父元素的字体大小为16px，那么1em就等于16px。
rem：rem单位的参照对象是根元素（即html元素）的字体大小。如果一个元素的字体大小设置为1rem，那么它将等于根元素的字体大小。默认情况下，根元素的字体大小通常为16px。

主要区别：

em单位是相对于父元素的字体大小进行计算的，因此如果嵌套层级较多，em的计算会相对复杂。而rem单位相对于根元素的字体大小进行计算，无论嵌套层级如何变化，都可以保持相对一致的参照对象。
由于em单位会继承父元素的字体大小，所以如果在某个父元素上设置了字体大小，那么该父元素及其后代元素的em单位都会基于该字体大小进行计算。而rem单位则不受父元素字体大小的影响，只会受根元素字体大小的影响。

使用时的建议：

对于需要相对于父元素进行调整的字体大小，可以使用em单位。
对于整个页面中需要保持一致比例的字体大小，可以使用rem单位。使用rem单位可以更方便地控制页面的整体字体缩放。

需要注意的是，rem和em单位不仅可以用于字体大小，还可以用于其他CSS属性，例如宽度、高度、边距等。在使用这些单位时，请根据实际需求选择合适的参照对象来确保样式的准确性和一致性。

6、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

在iOS系统中，元素被触摸时产生的半透明灰色遮罩通常称为"点击反馈"或"高亮效果"。这个效果是系统自动添加的，它用于提供一种视觉上的反馈，告诉用户他们正在与界面进行交互。

要去掉这个半透明灰色遮罩，您可以通过CSS样式或者JavaScript代码来实现。以下是两种方法：

使用CSS样式：

/* 去除点击反馈 */
-webkit-tap-highlight-color: transparent;

将以上样式应用到您需要去除点击反馈的元素上，这会将点击反馈的颜色设置为透明。

使用JavaScript：

// 获取对应的元素
var element = document.getElementById('your-element-id');
// 移除点击反馈事件监听器
element.addEventListener('touchstart', function() {}, {passive: true});
// 禁止默认的用户选择行为
element.style.webkitUserSelect = 'none';

将'your-element-id'替换为您需要去除点击反馈的元素的ID。这段代码将移除该元素的点击反馈事件监听器，并禁止默认的用户选择行为。

无论您使用CSS还是JavaScript，都需要确保将对应的样式或代码应用到正确的元素上。请注意，在修改系统提供的默认行为时，应慎重考虑对用户体验的影响。

7、webkit表单输入框placeholder的颜色值能改变吗？

是的，您可以通过CSS样式来改变WebKit浏览器中表单输入框（input元素）placeholder文本的颜色。下面是一种方法：

/* 修改placeholder的颜色 */
::-webkit-input-placeholder {
    color: #your-color;
}

将#your-color替换为您想要应用的颜色值，可以是具体的颜色名称、十六进制值、RGB值等表示方式。

请注意，这种方法只适用于WebKit内核的浏览器，如Safari和Chrome。不同浏览器可能有不同的前缀和选择器。为了兼容性，您可以添加其他浏览器的相应前缀和选择器，例如：

/* 修改placeholder的颜色 - 兼容多个浏览器 */
::-webkit-input-placeholder {
    color: #your-color; /* Safari, Chrome */
}
:-moz-placeholder {
    color: #your-color; /* Firefox 18- */
}
::-moz-placeholder {
    color: #your-color; /* Firefox 19+ */
}
:-ms-input-placeholder {
    color: #your-color; /* IE 10+ */
}

通过使用这些前缀和选择器，您可以覆盖不同浏览器中表单输入框placeholder的颜色。确保根据您的需求进行适当的调整和测试。

8、禁止ios长按时触发系统菜单，禁止ios&android长按时下载图片

要禁止 iOS 和 Android 上长按时触发系统菜单以及禁止长按时下载图片，您可以使用以下方法：

禁止 iOS 上的长按触发系统菜单：

/* 禁止 iOS 上的长按触发系统菜单 */
-webkit-touch-callout: none;

将以上样式应用到您需要禁止长按的元素上。这会阻止在 iOS 设备上长按时出现默认的系统菜单。

禁止 iOS 和 Android 上长按下载图片：

/* 禁止 iOS 和 Android 上长按下载图片 */
img {
    pointer-events: none;
}

将以上样式应用到您的 CSS 文件中，或者直接添加到需要禁止长按下载图片的 img 标签的样式中。这会使图片元素不可响应鼠标或触摸事件，从而阻止长按下载图片。

请注意，这些样式只是禁止了默认行为，具体效果还取决于用户设备和浏览器的兼容性。此外，禁止默认行为可能会影响用户体验，请在使用时进行全面测试，并确保不会对您的网站功能造成负面影响。

9、禁止ios和Android用户选中文字

要禁止 iOS 和 Android 用户选中文字，您可以使用以下 CSS 样式：

/* 禁止用户选中文字 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

将以上样式应用到您的 CSS 文件中，或者直接添加到需要禁止用户选中文字的元素的样式中。这些样式适用于不同浏览器的前缀，并将 user-select 设置为 none，以禁止用户选择文本。

请注意，这些样式只是禁止了用户选择文本的能力，但无法完全阻止潜在的非正常行为。此外，禁止用户选择文本可能会对用户体验产生一定影响，请在使用时进行全面测试，并确保不会对您的网站功能造成负面影响。另外，请尊重用户的选择权，确保在合适的情况下允许和支持文本选择。

10、自适应

要使网页具有自适应性，可以采取以下方法：

使用响应式布局：使用CSS媒体查询和相对单位（如百分比、em和rem）来根据不同的屏幕大小和设备类型进行布局调整。通过设置元素的宽度、高度、边距和位置等属性，以适应不同的屏幕尺寸。
弹性盒子布局（Flexbox）：使用Flexbox布局可以轻松创建自适应容器。通过设置flex容器的属性（如display: flex和flex-wrap: wrap），以及每个子项的属性（如flex-grow、flex-shrink和flex-basis），实现灵活的布局，以适应不同的屏幕尺寸。
图像和媒体的自适应：使用CSS属性和媒体查询来确保图像和媒体元素在不同设备上正确显示。例如，使用max-width: 100%来确保图像在小屏幕上不会溢出。
断点（Breakpoint）设计：为不同的屏幕尺寸设置断点，根据每个断点的范围调整布局和样式。可以使用CSS媒体查询来检测不同断点，并在特定尺寸下应用相应的样式。
移动优先设计：首先着眼于移动设备，然后逐渐增加布局和功能，以适应较大的屏幕尺寸。这样可以确保在不同设备上都具有良好的用户体验。

通过以上方法，您可以实现网页的自适应布局，并让网页在不同设备上呈现出最佳的显示效果。请注意，在实施自适应设计时，请参考相关的CSS和HTML标准，并进行充分的测试以确保兼容性和稳定性。

11、响应式

响应式设计是一种能够自动适应不同屏幕尺寸和设备的网页设计方法，使网页内容和布局在不同设备上都能提供最佳的显示效果和用户体验。

以下是实现响应式设计的几个关键要素：

弹性网格布局：使用相对单位（如百分比或fr）和弹性盒子布局（Flexbox）来创建灵活的网格系统。这样可以让网页元素根据屏幕尺寸调整大小，并在不同屏幕上进行流动布局。
媒体查询（Media Queries）：使用CSS媒体查询来根据不同的屏幕宽度、高度和设备类型应用不同的样式。通过设置断点（Breakpoint）并定义对应的CSS规则，可以根据屏幕尺寸调整布局、字体大小、图像大小等。
图像和媒体的自适应：使用CSS属性（如max-width: 100%）来确保图像和媒体在不同设备上正确缩放和展示。可以针对不同的屏幕尺寸提供不同大小的图像，以提高加载速度和用户体验。
文本和字体的响应式：使用相对单位（如em、rem和vw）来设置字体大小和行高，以便在不同屏幕上自动调整文本的大小和行距。
隐藏或重新排列内容：通过CSS的display属性或者使用CSS伪类和伪元素来隐藏、显示或重新排列特定的内容，以适应不同屏幕尺寸和布局需求。

综合运用以上要素，可以创建出适应不同设备的响应式网页。需要注意的是，在设计和开发过程中务必进行充分的测试，以确保在各种设备和浏览器上都能良好地工作。

五、ES6面试题

1、var、let、const区别

在JavaScript中，var、let和const是用于声明变量的关键字，它们之间有一些重要的区别。下面是它们的区别：

var：var是在ES5中引入的关键字，用于声明变量。它有以下特点：

函数作用域：var声明的变量具有函数作用域，意味着它们在定义它们的函数内部可见，外部无法访问。
变量提升：使用var声明的变量会被提升到函数作用域的顶部，即变量在声明之前就可以使用，但其值为undefined。
可重复声明：使用var可以重复声明同一个变量，且不会抛出错误，后面的声明会覆盖前面的声明。

let：let是在ES6中引入的关键字，用于声明块级作用域的变量。它有以下特点：

块级作用域：let声明的变量具有块级作用域，意味着它们在定义它们的代码块（如函数、循环或条件语句）内部可见，外部无法访问。
不存在变量提升：使用let声明的变量不存在变量提升，必须在声明之后才能使用。
不可重复声明：在同一作用域下，不能重复声明同一个变量，否则会抛出错误。

const：const也是在ES6中引入的关键字，用于声明常量，即一旦声明就无法更改的值。它有以下特点：

块级作用域：const声明的常量同样具有块级作用域。
必须初始化：使用const声明常量时，必须进行初始化赋值，且后续不可再次赋值。
不可重复声明：在同一作用域下，不能重复声明同一个常量，否则会抛出错误。

总结来说，var是函数作用域的变量声明关键字，而let和const是块级作用域的变量声明关键字。let允许重新赋值，而const声明的常量则不可修改。在实际开发中，推荐优先使用let和const，避免使用var的一些潜在问题。

【前端面试题】前端面试题总结2023-7-13（五）