大家好，我是讯享网，很高兴认识大家。



 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> 

讯享网

讯享网

在JavaScript中， 是一种允许你在后台线程中执行脚本的功能，而不会影响主线程（通常是用户界面）的性能。这对于执行计算密集型任务或长时间运行的任务非常有用。下面是 的基本用法：

创建 Worker

1. 创建一个新的 Worker 实例：

   这里 是一个包含将在后台线程中运行的 JavaScript 代码的文件。

2. 在 中编写代码：

   讯享网

向 Worker 发送消息

你可以使用 方法向 Worker 发送消息：

从 Worker 接收消息

你可以使用 事件监听器来接收 Worker 发回的消息：

讯享网

终止 Worker

如果需要，你可以使用 方法终止 Worker：

完整示例

主线程代码（例如 ）：

讯享网

Worker 线程代码（例如 ）：

示例二

讯享网

注意事项

1. 同源限制：Worker 脚本文件必须与主线程脚本文件同源。
2. 性能：虽然 Worker 运行在后台线程，但频繁的消息传递可能会影响性能。
3. 全局对象：Worker 中没有访问 、 等浏览器全局对象，但有 对象，类似于 对象。

通过使用 ，你可以有效地在 JavaScript 中实现多线程，从而提高应用程序的性能和响应速度。

Worker.postMessage()

postMessage(message, transfer)
message
要传递给 worker 的对象；这将在传递给 DedicatedWorkerGlobalScope.message_event 事件的 data 字段中。这可以是任何值或可以通过结构化克隆算法处理的 JavaScript 对象（可以包含循环引用）。

如果未提供 message 参数，则解析器将抛出 SyntaxError。如果要传递给 worker 的数据不重要，可以显式传递 null 或 undefined。

像 ArrayBuffer、MessagePort 或 ImageBitmap 类的实例才是可转移对象，才能够被转移。不能将 null 作为 transfer 的值。

是 Web API 的一部分，用于在同一个浏览上下文中的不同执行上下文（如窗口、iframe、Web Worker、或者不同的 MessagePort）之间进行通信。它提供了一种双向通信机制，允许两个端口（）之间发送和接收消息。

创建 MessageChannel

首先，你需要创建一个新的 实例：

使用 MessageChannel

实例包含两个 对象，分别用于发送和接收消息。你可以通过 和 属性访问这两个端口。

发送消息

使用 方法从一个端口发送消息到另一个端口：

讯享网

接收消息

使用 事件监听器来接收消息：

完整示例

以下是一个简单的示例，展示了如何使用 在两个端口之间进行通信：

讯享网

在不同执行上下文中使用

也可以用于在不同执行上下文之间进行通信，例如在主线程和 Worker 之间：

注意事项

1. 传输对象： 方法可以发送任何可以被结构化克隆算法处理的对象。
2. 端口传输： 对象可以通过 方法进行传输，从而在不同的执行上下文之间共享同一个端口。
3. 关闭端口：当不再需要使用 时，可以调用 方法来关闭端口，以释放资源。

通过使用 ，你可以在同一个浏览上下文中的不同执行上下文之间实现高效的双向通信。

在 JavaScript 中，可枚举属性（enumerable properties）是指那些可以通过 循环或 方法遍历到的对象属性。每个属性都有一个对应的 特性，这个特性决定了该属性是否是可枚举的。

特性描述

• 可枚举（Enumerable）：如果一个属性的 特性为 ，则该属性是可枚举的，可以通过 循环或 方法遍历到。
• 不可枚举（Non-enumerable）：如果一个属性的 特性为 ，则该属性是不可枚举的，不会通过 循环或 方法遍历到。

示例

讯享网

在这个示例中， 属性是可枚举的，因此可以通过 循环和 方法遍历到。

修改属性的可枚举性

可以使用 方法来定义或修改对象的属性，并指定 特性。

在这个示例中， 属性是不可枚举的，因此不会通过 循环和 方法遍历到。

原型链上的属性

原型链上的属性也可以是可枚举的。如果一个对象的原型链上有一个可枚举属性，那么这个属性也会在 循环中被遍历到。

讯享网

在这个示例中， 是原型链上的可枚举属性，因此会在 循环中被遍历到。

总结

可枚举属性是可以通过 循环或 方法遍历到的对象属性。每个属性都有一个 特性，决定了该属性是否是可枚举的。通过 方法可以定义或修改属性的 特性。

是 JavaScript 中用于遍历对象的可枚举属性的一种语句。它通常用于遍历对象的键（属性名），并执行某些操作。以下是 语句的一些关键知识点：

语法

• ：在每次迭代中， 将被赋值为对象的一个可枚举属性的键（属性名），类型为字符串。
• ：要遍历的对象。

示例

讯享网

注意事项

1. 遍历顺序： 语句不能保证遍历对象的属性顺序。通常情况下，属性的遍历顺序是随机的，但大多数现代浏览器会按照属性创建的顺序进行遍历。

   
   讯享网
   

2. 可枚举属性： 只能遍历对象的可枚举属性。原型链上的可枚举属性也会被遍历到。如果需要排除原型链上的属性，可以使用 方法。

3. 数组的遍历：虽然 也可以用于遍历数组，但它不推荐用于数组，因为数组索引是字符串类型的属性名，并且它不会按照索引顺序遍历。建议使用 循环或 方法来遍历数组。

   讯享网

4. 性能：与 循环和 相比， 在遍历数组时性能较差，因为它需要检查每个属性是否是数组索引。

总结

语句主要用于遍历对象的可枚举属性，但在处理数组时性能较差且不推荐使用。使用时要注意属性顺序和原型链上的属性。如果需要遍历数组，建议使用 循环或 方法。

是 JavaScript 中用于遍历可迭代对象（如数组、字符串、Map、Set 等）的一种语句。与 不同， 直接遍历的是对象的值，而不是键。以下是 语句的一些关键知识点：

语法

• ：在每次迭代中， 将被赋值为可迭代对象的当前值。
• ：要遍历的可迭代对象，如数组、字符串、Map、Set 等。

示例

讯享网

在这个示例中， 语句遍历数组 ，并输出每个元素的值。

可迭代对象

在 JavaScript 中，可迭代对象（Iterable）是指那些实现了迭代协议（Iteration Protocol）的对象。迭代协议包括两个部分： 属性和一个返回迭代器对象的方法。迭代器对象必须具有一个 方法，该方法返回一个对象，该对象包含两个属性： 和 。

迭代协议

1. 属性：可迭代对象必须有一个 属性，该属性是一个函数，用于返回一个迭代器对象。
2. 迭代器对象： 函数返回的迭代器对象必须具有一个 方法。
3. 方法： 方法返回一个对象，该对象包含两个属性：
   • ：当前迭代器的值。
   • ：一个布尔值，表示迭代器是否已经完成遍历。

示例：数组

数组是内置的可迭代对象之一，它实现了迭代协议。

示例：字符串

字符串也是内置的可迭代对象之一。

讯享网

示例：自定义可迭代对象

你可以通过实现 方法来创建自定义的可迭代对象。

在这个示例中，我们通过一个生成器函数（）实现了 方法，使 成为一个可迭代对象。

可迭代对象总结

可迭代对象是实现了迭代协议的对象，包括一个 属性和一个返回迭代器对象的方法。迭代器对象必须具有一个 方法，该方法返回一个包含 和 属性的对象。常见的内置可迭代对象包括数组、字符串、Map 和 Set 等。

以下是一些常见的可迭代对象：

1. 数组：

   讯享网

2. 字符串：

3. Map：

   讯享网

4. Set：

• TypedArray
• arguments 对象
• NodeList 对象

注意事项

1. 遍历顺序： 语句按照可迭代对象的默认迭代顺序进行遍历。对于大多数内置可迭代对象，如数组和字符串，迭代顺序是按照元素在对象中的顺序进行的。
2. 不可迭代对象：如果尝试使用 遍历一个不可迭代对象（如普通对象），会抛出 异常。

   讯享网

3. 退出循环：可以使用 、 和 语句来控制 循环的执行。

4. 解构赋值：在 循环中可以使用解构赋值来同时获取数组的索引和值。

   讯享网

总结

语句用于遍历可迭代对象的值，如数组、字符串、Map 和 Set 等。它直接遍历对象的值，而不是键。与 不同， 不会遍历对象的键，也不会遍历原型链上的属性。使用 时要注意只能用于可迭代对象，否则会抛出异常。

面试题

如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功？如何使用for of 遍历对象？

是 JavaScript 中用于定义或修改对象属性的方法。它允许你精确地添加或修改对象的单个属性，并通过属性描述符来控制这些属性的行为。

语法

讯享网

• ：要在其上定义属性的对象。
• ：要定义或修改的属性的名称。
• ：一个对象，描述符包含该属性的配置。

属性描述符

属性描述符可以是数据描述符或存取描述符：

1. 数据描述符：
   • ：属性的值。可以是任何有效的 JavaScript 值（数值、对象、函数等）。
   • ：一个布尔值，表示属性的值是否可以被修改。
   • ：一个布尔值，表示属性描述符是否可以被修改，以及属性是否可以被删除。
   • ：一个布尔值，表示属性是否会出现在对象的枚举属性中。
2. 存取描述符：
   • ：一个给属性提供 getter 的函数，如果没有 getter 则为 。
   • ：一个给属性提供 setter 的函数，如果没有 setter 则为 。
   • ：一个布尔值，表示属性描述符是否可以被修改，以及属性是否可以被删除。
   • ：一个布尔值，表示属性是否会出现在对象的枚举属性中。

示例

在这个示例中，我们定义了一个名为 的属性，其值为 ，并且该属性是不可写的（），但可配置和可枚举。

方法用于同时定义多个属性。

语法

讯享网

• ：要在其上定义属性的对象。
• ：一个对象，其属性与 的 参数相同。

示例

在这个示例中，我们同时定义了两个属性 和 ，并分别设置了它们的值和可写性。

总结

方法用于定义或修改对象的单个属性，而 方法用于同时定义多个属性。通过属性描述符，你可以精确地控制属性的行为，如值、可写性、可配置性和可枚举性。