diff --git a/docs/array.md b/docs/array.md index e4ed02e..0315d3c 100644 --- a/docs/array.md +++ b/docs/array.md @@ -546,6 +546,27 @@ function ArrayOf(){ } ``` +## Array.fromAsync() + +ES2026 引入了 Array.fromAsync() 方法,用于收集异步遍历器(参见《异步遍历器》一章)的值,作为一个数组返回。 + +```javascript +async function* fetchNumbers() { + yield 1; + await new Promise(r => setTimeout(r, 100)); + yield 2; + await new Promise(r => setTimeout(r, 100)); + yield 3; +} + +const numbers = await Array.fromAsync(fetchNumbers()); +console.log(numbers); // [1, 2, 3] +``` + +上面示例中,`fetchNumber()`是一个异步遍历器,`Array.fromAsync()`方法收集它每一步的值,作为一个数组返回。 + +这个方法的使用场合,主要是循环遍历多个异步函数并等待它们返回结果,比如分页之类的操作。 + ## 实例方法:copyWithin() 数组实例的`copyWithin()`方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。 diff --git a/docs/module.md b/docs/module.md index a5b1824..701d016 100644 --- a/docs/module.md +++ b/docs/module.md @@ -562,21 +562,27 @@ export {ns}; ES2025 引入了“[import 属性](https://github.com/tc39/proposal-import-attributes)”(import attributes),允许为 import 命令设置属性,主要用于导入非模块的代码,比如 JSON 数据、WebAssembly 代码、CSS 代码。 -目前,只支持导入 JSON 数据。 +导入 JSON 文件的写法如下。 ```javascript -// 静态导入 import configData from './config-data.json' with { type: 'json' }; - -// 动态导入 -const configData = await import( - './config-data.json', { with: { type: 'json' } } -); ``` -上面代码中,import 命令使用 with 子句,指定一个属性对象。这个属性对象目前只有一个 type 属性,它的值就是导入代码的类型,现在只能设置为`json`一个值。 +上面代码中,import 命令使用 with 子句,指定一个属性对象。这个属性对象目前只有一个 type 属性,它的值就是导入代码的类型,这里设置为`json`。 -如果没有 import 属性,导入 JSON 数据只能使用 fetch 命令。 +这种写法的一个缺点是,如果导入失败,整个模块就会崩溃。为了避免报错,可以使用异步的`import()`方法来导入。 + +```javascript +try { + const configData = await import( + './config-data.json', { with: { type: 'json' } } + ); +} catch(error) { + // 处理报错 +} +``` + +如果没有 import 属性,导入 JSON 文件只能使用 fetch 命令。 ```javascript const response = await fetch('./config.json'); @@ -589,6 +595,28 @@ export 命令与 import 命令写在一起,形成一个再导出语句时, export { default as config } from './config-data.json' with { type: 'json' }; ``` +导入 CSS 文件的写法如下。 + +```javascript +import componentStyles from "./component.css" with { type: "css" }; +``` + +下面是一个实际的例子。 + +```javascript +import sheet from './styles.css' with { type: 'css' }; + +class MyComponent extends HTMLElement { + constructor() { + super(); + const shadowRoot = this.attachShadow({ mode: 'open' }); + shadowRoot.adoptedStyleSheets = [sheet]; + } + + // ... +} +``` + ## 模块的继承 模块可以继承。 diff --git a/docs/promise.md b/docs/promise.md index 9f6b3fd..453f605 100644 --- a/docs/promise.md +++ b/docs/promise.md @@ -1023,7 +1023,17 @@ run(g); ## Promise.try() -实际开发中,经常遇到一种情况:不知道或者不想区分,函数`f`是同步函数还是异步操作,但是想用 Promise 来处理它。因为这样就可以不管`f`是否包含异步操作,都用`then`方法指定下一步流程,用`catch`方法处理`f`抛出的错误。一般就会采用下面的写法。 +实际开发中,经常遇到一种情况:不知道或者不想区分,函数`f`是同步函数还是异步操作,但是想用 Promise 来处理它。因为这样就可以不管`f`是否包含异步操作,都用`then`方法指定下一步流程,用`catch`方法处理`f`抛出的错误。 + +```javascript +loadUser(id)) + .then(user => render(user)) + .catch(err => showError(err)); +``` + +上面示例中,如果我们不知道`loadUser()`是同步函数还是异步函数,但还是想采用`then()...catch()`,应该怎么办? + +一般就会采用下面的写法。 ```javascript Promise.resolve().then(f) diff --git a/docs/temporal.md b/docs/temporal.md index 1f98429..1bdd8ea 100644 --- a/docs/temporal.md +++ b/docs/temporal.md @@ -7,7 +7,7 @@ Temporal 是一个表示时间日期的全新 API,对目前的 Date API 的诸 Temporal API 将时间分成四种。 - 当前时间:表示此时此刻的时间,位于 Temporal.Now 对象。 -- 时点时间(instant),表示历史上某个唯一时间,其中 Temporal.Instant 对象表示时间戳,Temporal.ZonedDateTime 表示带有时区的日期时间。 +- 时点时间(instant),表示某个指定的时点,其中 Temporal.Instant 对象表示时间戳,Temporal.ZonedDateTime 表示带有时区的日期时间。 - 本地时间(wall-clock times),包含以下几个对象,不涉及时区。 - Temporal.PlainDateTime:完整的日期和时间。 - Temporal.PlainDate:仅限于日期。 @@ -214,6 +214,14 @@ const newDate = date.add({ days: 10 }); console.log(newDate.toString()); // Outputs '2024-01-11' ``` +使用这个方法,用来计算下个月的同一天非常方便。比如,现在是1月31日,下个月的最后一天就是2月28日。 + +```javascript +const jan31 = Temporal.PlainDate.from("2026-01-31"); +const feb = jan31.add({ months: 1 }); +console.log(feb.toString()); // 2026-02-28 +``` + ## Temporal.PlainTime `Temporal.PlainTime`表示与时区无关的某个时点。 @@ -307,7 +315,23 @@ const duration = Temporal.Duration.from({ }); duration.total({ unit: 'second' }); // => 469200 +``` +上面示例中,`total()`方法返回了当前时间段的总秒数。 + +`compare()`方法可以比较两个时间段的长短。 + +```javascript +const a = Temporal.Duration.from({ hours: 25 }); +const b = Temporal.Duration.from({ days: 1 }); + +const cmp = Temporal.Duration.compare(a, b, { relativeTo: Temporal.Now.plainDateISO() }); +console.log(cmp); // 1 (25h > 1 day) +``` + +`sort()`方法可以按照时间段的长短进行排序。 + +```javascript const durations = [ Temporal.Duration.from({ hours: 1 }), Temporal.Duration.from({ hours: 2 }),