跳到主要内容

FAQ?

JS 的各种位置，比如 clientHeight,scrollHeight,offsetHeight ,以 及 scrollTop, offsetTop,clientTop 的区别？​

clientHeight：表示的是可视区域的高度，不包含 border 和滚动条 offsetHeight：表示可视区域的高度，包含了 border 和滚动条 scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。 clientTop：表示边框 border 的厚度，在未指定的情况下一般为 0 scrollTop：滚动后被隐藏的高度，获取对象相对于由 offsetParent 属性指定的父坐 标(css 定位的元素或 body 元素)距离顶端的高度。

const 定义函数和直接用 function 声明有什么区别？​

特性const 定义函数function 声明
提升 (Hoisting)不提升提升
作用域块级作用域当前作用域
是否支持箭头函数支持不支持
this 绑定静态绑定（若为箭头函数）动态绑定
是否可以重新赋值不可以无重新赋值概念
  • 用const声明函数时，你可以避免函数被重新赋值，代码的可维护性会更高，特别是当你不希望函数被意外重写时，const更加安全。
  • 用function声明函数时，你可以享受函数提升的好处，使代码看起来更灵活，适合在任何位置调用函数。

JS中本地对象、内置对象、宿主对象分别是什么，有什么区别？​

在 JavaScript 中，本地对象、内置对象和宿主对象的定义和区别如下：

1. 本地对象（Native Objects）

  • 定义：本地对象是由 JavaScript 语言本身提供的对象，不依赖于任何外部环境。
  • 例子：Object、Array、Function、Number、String、Boolean、RegExp 等。
  • 特点：这些对象的构造函数和方法是 JavaScript 语言标准的一部分，能够在任何 JavaScript 环境中使用。

2. 内置对象（Built-in Objects）

  • 定义：内置对象是本地对象的一部分，提供了标准的功能和方法，通常用来处理特定的数据类型或提供通用的功能。
  • 例子：Math、JSON、Date、Promise 等。
  • 特点：内置对象提供了用于特定任务的功能，比如数学计算、日期处理等，通常用于增强语言的功能。

3. 宿主对象（Host Objects）

  • 定义：宿主对象是由宿主环境（如浏览器或 Node.js）提供的对象，通常用于与环境相关的功能。
  • 例子：在浏览器中，window、document、XMLHttpRequest、console 等；在 Node.js 中，fs、http 等模块。
  • 特点：宿主对象的实现和功能依赖于宿主环境，通常用于处理特定的环境交互。

Js 中，有哪些方法可以退出循环​

  • break：立即退出循环体。
  • return：退出循环并返回函数的结果（适用于函数内）。
  • throw：抛出异常，退出循环并转到异常处理部分（适用于错误处理）。

高阶函数的理解​

高阶函数的两个主要特征：

  • 接收函数作为参数：一个函数可以接受另一个函数作为参数。
  • 返回函数：一个函数可以返回另一个函数。

get 请求的参数是否能够使用数组？​

GET 请求的参数可以使用数组。

虽然在 URL 查询字符串中直接表示数组略有复杂，但有几种常见的方式来实现数组的传递。以下是一些常见的处理数组参数的方法：

  1. 使用重复的参数名

最简单的方法是使用重复的参数名，每个数组元素作为一个独立的参数传递。例如，传递一个数组 [1, 2, 3] 可以表示为：

?numbers=1&numbers=2&numbers=3

这种方式常见于许多后端框架和库，它们能够解析这种格式的参数。

  1. 使用方括号表示法

在一些编程环境中，可以使用方括号表示法来传递数组，这种方式可以表示嵌套的数组和对象。例如：

?numbers[]=1&numbers[]=2&numbers[]=3

这种方式在 PHP 和 Ruby 等语言中非常常见，它们能够解析这样的查询字符串。

  1. 使用逗号分隔的字符串

另一种常见的方法是将数组元素用逗号或其他分隔符连接成一个字符串。例如：

?numbers=1,2,3

在服务器端，需要将这个字符串分隔开来以恢复原始数组。这种方式在 JavaScript 中也比较常见，尤其是当数组的顺序不需要保留时。

  1. 使用 JSON 字符串

在一些情况下，可以将数组序列化为 JSON 字符串进行传递。例如：

?numbers=%5B1%2C2%2C3%5D

这里的 %5B, %2C, 和 %5D 是 URL 编码形式的 [，, 和 ]。在服务器端，需将 JSON 字符串解析回数组。

示例代码

前端示例：

// 使用重复的参数名
const array = [1, 2, 3];
const queryString = array.map(value => `numbers=${value}`).join('&');
const url = `https://example.com?${queryString}`;

// 使用方括号表示法
const queryStringBrackets = array.map(value => `numbers[]=${value}`).join('&');
const urlBrackets = `https://example.com?${queryStringBrackets}`;

// 使用逗号分隔的字符串
const queryStringComma = `numbers=${array.join(',')}`;
const urlComma = `https://example.com?${queryStringComma}`;

// 使用 JSON 字符串
const queryStringJSON = `numbers=${encodeURIComponent(JSON.stringify(array))}`;
const urlJSON = `https://example.com?${queryStringJSON}`;

后端示例（Node.js Express）：

app.get('/', (req, res) => {
  // 使用重复的参数名
  const numbers = req.query.numbers; // [1, 2, 3] - 自动解析为数组

  // 使用方括号表示法
  const numbersBrackets = req.query['numbers[]']; // [1, 2, 3] - 自动解析为数组

  // 使用逗号分隔的字符串
  const numbersComma = req.query.numbers.split(','); // ['1', '2', '3'] - 需要转换为数字数组

  // 使用 JSON 字符串
  const numbersJSON = JSON.parse(req.query.numbers); // [1, 2, 3]
});

JS的节流和防抖​

TODO

如何实现一个私有变量，用 getName 方法可以访问，不能直接访问​

  1. 通过 defineProperty 来实现
obj={
name:yuxiaoliang,
getName:function(){
return this.name
}}
object.defineProperty(obj,"name",{
//不可枚举不可配置
});
  1. 通过函数的创建形式
function product(){
var name='yuxiaoliang';
this.getName=function(){
return name;
}}
var obj=new product();

JS怎么控制一次加载一张图片，加载完后再加载下一张​

const imgArrs = ['imageurl1', 'imageurl2', 'imageurl3']
const loadImg = () => {
    if (!imgArrs.length)  return;
    const img = new Image()
    img.src = imgArrs[0]
    img.onload = () => {
        setTimeout(() => {
            document.body.appendChild(this)
            imgArrs.shift()
            loadImg()
        }, 2000)
    }
}
loadImg()
img.onreadystatechange=function(){
if(this.readyState=="complete"){

}

数组去重​

法一：indexOf 循环去重

法二：ES6 Set 去重；Array.from(new Set(array))

法三：Object 键值对去重；把数组的值存成 Object 的 key 值，比如Object[value1] = true，在判断另一个值的时候，如果 Object[value2]存在的话，就说明该值是重复的。

去除字符串首尾空格​

使用正则(^\s*)|(\s*$)即可

能来讲讲JS的语言特性吗​

运行在客户端浏览器上； 不用预编译，直接解析执行代码； 是弱类型语言，较为灵活； 与操作系统无关，跨平台的语言； 脚本语言、解释性语言；

JS的全排列​

TODO

js消除异步传染性​

TODO

codePointAt()与charCodeAt()方法区别​

TODO

常用的正则表达式有哪些？​

  1. 邮箱验证：

    /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

  2. 电话号码验证（纯数字，可包含括号、空格和短横线）：

    /^(\+\d{1,3})?[\s-]?\d{1,}$/

  3. URL 验证（包括 http、https、www 等）：

    /^(https?:\/\/)?(www\.)?[\w-]+\.[\w.-]+$/

  4. 身份证号码验证（仅适用于中国大陆身份证）：

    /^(^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[0-9Xx]$)?$/

  5. 邮政编码验证（中国邮政编码为 6 位数字）：

    /^\d{6}$/

  6. IP 地址验证：

    /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/

对 JSON 的理解​

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于将数据从一个应用程序传输到另一个应用程序。它以易于阅读和编写的文本格式表示结构化数据，并且易于解析和生成。以下是对 JSON 的理解：

  1. 数据格式：JSON 使用键值对的形式来表示数据，其中键是字符串，值可以是字符串、数字、布尔值、数组、对象或 null。键值对之间使用冒号（:）分隔，多个键值对使用逗号（,）分隔。整个 JSON 数据被包含在花括号（）或方括号（[]）中，分别表示对象和数组。

  2. 平台无关性：JSON 是一种与编程语言无关的数据格式，几乎所有的编程语言都支持解析和生成 JSON 数据。这使得 JSON 成为不同系统之间进行数据交换的通用格式。

  3. 简洁性和可读性：JSON 的语法简洁、清晰且易于阅读。对于人类来说，编写和理解 JSON 数据相对容易，这使得调试和调用 API 等场景变得更加方便。

  4. 数据交换和存储：JSON 通常用于在客户端和服务器之间传输数据。客户端可以将数据序列化为 JSON 字符串，然后将其发送到服务器进行处理。服务器可以解析 JSON 字符串，并将数据存储到数据库中或进行进一步的处理。

  5. API 和配置文件：许多 Web API 和服务都使用 JSON 作为数据交换格式。通过使用 JSON，客户端可以与服务器进行通信，并以结构化的方式传递参数和接收响应。此外，JSON 也常用于配置文件，以存储和加载应用程序的配置信息。

  6. 支持的数据类型：JSON 支持字符串、数字、布尔值、数组、对象和 null。这些数据类型的组合和嵌套能够表示丰富的数据结构。

需要注意的是，JSON 是一种数据格式，它描述了数据的结构和值，但并不包含行为或方法。在使用 JSON 数据时，需要将其解析为特定编程语言的对象或数据结构，以便进行进一步的处理和操作。

JavaScript 脚本延迟加载的方式有哪些？​

JavaScript 脚本的延迟加载是一种优化技术，它可以提高网页的加载性能。以下是几种常见的 JavaScript 脚本延迟加载的方式：

  1. 使用 async 属性：将 <script> 标签的 async 属性设置为 true 可以使脚本在下载的同时不阻塞页面的解析和渲染。脚本将在下载完成后立即执行，但执行时可能会打断页面的渲染。
<script src="script.js" async></script>
  1. 使用 defer 属性：将 <script> 标签的 defer 属性设置为 true 可以将脚本的执行推迟到页面解析完成后。这样脚本将在文档完全解析和渲染完成后执行，不会打断页面的渲染。
<script src="script.js" defer></script>
  1. 动态加载脚本：通过 JavaScript 动态创建 <script> 标签并将其插入到页面中，可以实现按需加载脚本。可以在适当的时机使用 createElement 和 appendChild 方法来动态加载脚本。
var script = document.createElement('script');
script.src = 'script.js';
document.body.appendChild(script);
  1. 使用异步加载库：一些第三方库和工具提供了异步加载的功能，例如 RequireJS、LoadJS 等。这些库可以帮助管理和加载依赖关系，并在需要时按需加载脚本。
// 使用 RequireJS 异步加载模块
require(['module'], function(module) {
  // 模块加载完成后的回调函数
});

需要根据具体情况选择适合的延迟加载方式。async 和 defer 属性适用于静态脚本的加载，而动态加载适用于动态生成的脚本或根据条件加载脚本。通过延迟加载 JavaScript 脚本，可以提高网页的响应速度和用户体验。

什么是 DOM 和 BOM？​

DOM（Document Object Model）和 BOM（Browser Object Model）是两个与浏览器相关的概念：

  1. DOM（文档对象模型）：DOM 是指将 HTML 或 XML 文档表示为一个树状结构的方式，使得开发者可以通过脚本语言（通常是 JavaScript）来访问和操作文档的内容、结构和样式。DOM 提供了一组 API，使得开发者可以使用 JavaScript 动态地创建、修改和删除文档的元素、属性和文本。通过 DOM，可以实现对网页的动态交互和改变。

  2. BOM（浏览器对象模型）：BOM 是指浏览器提供的一组对象和方法，用于访问和控制浏览器窗口、浏览器的历史记录、浏览器的位置和尺寸、浏览器的导航等功能。BOM 提供了一些对象，如 window、navigator、location、history 等，开发者可以使用这些对象来操作浏览器的行为和属性。BOM 并没有由标准规范定义，不同浏览器可能提供不同的 BOM 实现。

总结来说，DOM 是用于访问和操作文档内容的 API，而 BOM 是用于访问和控制浏览器窗口和浏览器功能的 API。它们共同组成了浏览器提供给开发者的编程接口，使得开发者可以通过 JavaScript 来与网页和浏览器进行交互。

escape、encodeURI、encodeURIComponent 的区别​

escape、encodeURI 和 encodeURIComponent 是 JavaScript 中用于编码 URL 的方法，它们有一些区别：

  1. escape：escape 方法用于对字符串进行编码，将字符串中的特殊字符转换为十六进制转义序列。它可以对整个字符串进行编码，包括字母、数字和特殊字符。然而，escape 方法已经被废弃，不推荐使用，因为它对非 ASCII 字符的处理不一致，不适用于完整的 URL 编码。

  2. encodeURI：encodeURI 方法用于对整个 URL 进行编码，包括协议、域名、路径和查询参数。它用于将字符串转换为有效的 URL 字符串，对于大部分情况而言是足够的。encodeURI 不会编码某些特殊字符，如 :/?#[]@!$&'()*+,;=，以保留它们在 URL 中的含义。

  3. encodeURIComponent：encodeURIComponent 方法用于对 URL 中的查询参数进行编码。它会对字符串中的所有非字母数字字符进行编码，以便安全地包含在 URL 的查询参数中。encodeURIComponent 包括对 encodeURI 不编码的字符的编码，如 /。

下面是一些使用示例：

var url = "http://example.com/my page.html?name=John&age=30";
var encodedURL = encodeURI(url);
console.log(encodedURL);
// 输出："http://example.com/my%20page.html?name=John&age=30"

var encodedQueryParam = encodeURIComponent("Hello, World!");
console.log(encodedQueryParam);
// 输出："Hello%2C%20World%21"

需要根据具体的使用场景选择适当的方法。通常情况下，使用 encodeURI 对整个 URL 进行编码，使用 encodeURIComponent 对查询参数进行编码是最常见的做法，以确保 URL 的正确性和安全性。

script标签中async与defer的区别​

async 和 defer 是用于控制 <script> 标签的加载和执行行为的属性。它们具有以下区别：

  1. 加载行为：

    • async：带有 async 属性的脚本是异步加载的。当浏览器解析到带有 async 属性的脚本时，它会立即开始下载脚本文件，并在下载完成后立即执行脚本，而不会阻塞 HTML 文档的解析。多个带有 async 属性的脚本的执行顺序无法保证，因此它们之间的依赖关系需要通过其他方式处理。
    • defer：带有 defer 属性的脚本是延迟加载的。当浏览器解析到带有 defer 属性的脚本时，它会继续解析 HTML 文档，并在文档解析完成后按照它们在文档中的顺序依次执行脚本。defer 脚本的执行发生在 DOMContentLoaded 事件之前。

  2. 执行时机：

    • async：脚本在下载完成后立即执行，独立于 HTML 文档的解析进程。这意味着脚本的执行可能发生在 HTML 文档的解析过程中，因此它们不能保证访问或修改位于脚本之前的文档元素。
    • defer：脚本的执行发生在 HTML 文档解析完成之后，但在 DOMContentLoaded 事件触发之前。这意味着 defer 脚本可以访问和操作位于它们之前的文档元素。

  3. 顺序保证：

    • async：多个带有 async 属性的脚本的执行顺序无法保证，因此如果脚本之间有依赖关系，需要通过其他方式来处理依赖。
    • defer：多个带有 defer 属性的脚本会按照它们在文档中的顺序依次执行，因此可以确保脚本的执行顺序。

当浏览器解析到带有 async 属性的脚本标签时，它会立即开始异步加载脚本文件。在脚本文件下载的过程中，浏览器会继续解析和渲染 HTML 文档。一旦脚本文件下载完成，浏览器会立即中断 HTML 文档的解析，并开始执行该脚本。

这是 async 属性与传统的阻塞式脚本加载方式（没有 async 或 defer）的主要区别。传统的脚本加载方式会阻塞 HTML 文档的解析和渲染，直到脚本文件下载和执行完成。

需要注意的是，由于 async 脚本会在下载完成后立即执行，所以它们可能会在 HTML 文档的解析过程中执行。这意味着在脚本执行之前，它们无法访问或修改位于脚本之前的文档元素。如果脚本需要操作文档中的元素，可以将其放置在 body 标签的末尾，或使用 DOMContentLoaded 事件来确保脚本在文档解析完成后执行。

总结来说，async 属性用于异步加载和执行脚本，而 defer 属性用于延迟加载和按顺序执行脚本。你可以根据具体的需求选择适合的属性来控制脚本的加载和执行行为。

什么是BMP​

BMP 是 Unicode 中的缩写，指的是"基本多文本平面"（Basic Multilingual Plane），也称为 Plane 0。BMP 是 Unicode 字符集的一个重要部分，包括 U+0000 到 U+FFFF（0到65535）之间的码点范围。

在 BMP 内，包含了大多数常见的字符，包括：

  • 标准的拉丁字母（A-Z，a-z）
  • 数字（0-9）
  • 基本的标点符号
  • 常见的特殊字符
  • 控制字符

BMP 的设计目的是为了包括所有主要的世界语言和符号，以便在一个单一平面内进行表示，使得文本处理和字符编码更为简便。它包含了许多国际化的字符，包括拉丁字母、希腊字母、西里尔字母、汉字、日文假名、阿拉伯数字，以及各种符号和表情符号。

非常重要的是，BMP 包括了最常用的字符，使得大多数文本处理操作更加高效。非常规的或不常用字符通常位于较高的 Unicode Plane 中。

总结，BMP（Basic Multilingual Plane）是 Unicode 字符集的一个平面，包括 U+0000 到 U+FFFF 范围内的大多数字符，它涵盖了主要的世界语言和符号，以促进多语言文本的正确表示和处理。

聊聊前端字符编码：ASCII、Unicode、Base64、UTF-8、UTF-16、UTF-32​

javascript引擎工作流程​

理解JavaScript的编译过程与运行机制​

JS代码中的use strict是什么意思？​

use strict是一种ECMAscript5添加的(严格）运行模式，这种模式使得Javascript 在更严格的条件下运行。

设立"严格模式"的目的，主要有以下几个:

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;消除代码运行的一些不安全之处，保证代码运行的安全; 提高编译器效率，增加运行速度; 为未来新版本的Javascript 做好铺垫。 区别:

禁止使用with语句。 禁止this关键字指向全局对象。 对象不能有重名的属性。

“严格模式”是什么？​

除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。

设立"严格模式"的目的，主要有以下几个：

- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。

另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。

为什么JavaScript是单线程？​

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

base64编码图片，为什么会让数据量变大？​

TODO

JavaScript脚本延迟加载的方式有哪些？​

defer属性、async属性、动态创建DOM、js最后加载

JavaScript中的 sort 方法是怎么实现的？​

TODO

js中数组是如何在内存中存储的？​

TODO