recursal/MDN huggingface dataset:
Window.scrollMaxY
=================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

只读属性 **`Window.scrollMaxY`** 返回`document`可以纵向滚动的最大像素数目

语法
--
```

yMax = window.scrollMaxY
```


* `yMax` 是像素数。
例子
--


```js
// 滚动到页面的底部
let maxY = window.scrollMaxY;

window.scrollTo(0, maxY);
```

备注
--

不要用 `window.innerHeight` + window.scrollMaxY 来计算 document 的总高度，因为 `window.innerHeight` 也包括了可见的水平滚动条的高度。正确的做法是使用 `document.body.scrollHeight` 。

参见`window.scrollMaxX` 和 `window.scrollTo` 。

规范
--

这不属于任何规范中的一部分。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
pageshow
========

当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。(这包括了后退/前进按钮操作，同时也会在 onload 事件触发后初始化页面时触发)

基本信息
----

规范

HTML5

接口

PageTransitionEvent

事件冒泡

No

事件取消

No

事件源

Document (dispatched on Window)

默认操作

None

属性
--

| Property | Type | Description |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` 只读  | `DOMString` | The type of event. |
| `bubbles` 只读  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` 只读  | `Boolean` | Whether the event is cancellable or not. |
| `persisted` 只读  | `boolean` | 表示网页是否是来自缓存。 |

示例
--

以下示例将会在控制台打印由前进/后退按钮以及 load 事件触发后引起的 pageshow 事件：
```

window.addEventListener('pageshow', function(event) {
    console.log('after , pageshow :',event);
});

window.addEventListener('load', function() {
    console.log('before');
});
```


不规范的写法，你同样可以将这个事件当做一个属性添加到 body 标签，类似于 onload
```

<body onload="myonload()" onpageshow="mypageshowcode()">
```

规范
--

| Specification |
| --- |
| HTML Standard # event-pageshow |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

相关事件
----

* `pagehide` (en-US)
* Using Firefox 1.5 caching — pageshow event (en-US)
unhandledrejection
==================

当 `Promise` 被 reject 且没有 reject 处理器的时候，会触发 **`unhandledrejection`** 事件；这可能发生在 `window` 下，但也可能发生在 `Worker` 中。这对于调试和为意外情况提供后备错误处理非常有用。

|  |  |
| --- | --- |
| 是否冒泡 | No |
| 是否可取消 | Yes |
| 接口 | `PromiseRejectionEvent` |
| 事件处理器属性 | `onunhandledrejection` (en-US) |

事件属性
----

`unhandledrejection` 继承自 `PromiseRejectionEvent`，而 `PromiseRejectionEvent` 又继承自 `Event`。因此`unhandledrejection` 含有 `PromiseRejectionEvent` 和 `Event` 的属性和方法。主要包含两个有用的属性：

`promise`

特定的被 reject 且没有 reject 处理器的 `Promise`

`reason`

将会传入异常处理方法中的错误原因（如果存在），查看 `catch()` 相关以获取更多细节。

使用说明
----

允许 `unhandlejection` 事件冒泡将最终导致向控制台输出错误消息。可以通过调用 `PromiseRejectionEvent` 上的 `preventDefault()` 来阻止这种情况；请参阅下面的阻止默认处理示例。

例子
--

我们将通过几个例子来展示 `unhandledrejection` 事件的使用方式。

### 基本的异常上报

此示例只是将有关未处理的 Promise rejection 信息打印到控制台。


```js
window.addEventListener("unhandledrejection", (event) => {
  console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
});
```


你还可以使用 `onunhandledrejection` (en-US) 事件处理程序属性来设置事件侦听器：


```js
window.onunhandledrejection = (event) => {
  console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
};
```

### 阻止默认处理

许多环境 (例如 Node.js ) 默认情况下会向控制台打印未处理的 Promise rejections。你可以通过为 `unhandledrejection` 事件添加一个处理程序来避免这种情况的发生，该处理程序除了执行你希望执行的任何其他任务之外，还可以调用 `preventDefault()` 来取消该事件，从而阻止该事件冒泡并由运行时的日志代码处理。这种方法之所以有效，是因为 `unhandledrejection` 事件是可以取消的。


```js
window.addEventListener("unhandledrejection", function (event) {
  // ...你的代码可以处理未处理的 rejection...

  // 阻止默认处理（例如将错误输出到控制台）

  event.preventDefault();
});
```

规范
--

| Specification |
| --- |
| HTML Standard # event-unhandledrejection |
| HTML Standard # handler-window-onunhandledrejection |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Promise 拒绝事件
* `rejectionhandled` 事件
* `Promise` (en-US)
Window.back()
=============

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

总结
--

跳转窗口到 history 中的前一个地址，这曾是 Gecko 的方法。请使用标准的 history.back 替代它。

Syntax
------
```

window.back()
```

Example
-------


```js
function goBack() {
  if (canGoBack) window.back();
}
```
orientationchange
=================

`orientationchange`事件在设备的纵横方向改变时触发。

|  |  |
| --- | --- |
| Bubbles | No |
| Cancelable | No |
| Interface | `Event` |
| Event handler | `onorientationchange` |

示例
--

你可以在`addEventListener` 方法中使用 `orientationchange` 事件：


```js
window.addEventListener("orientationchange", function () {
  console.log(
    "the orientation of the device is now " + screen.orientation.angle,
  );
});
```


或者使用 `onorientationchange` 事件处理程序属性：


```js
window.onorientationchange = function () {
  console.log(
    "the orientation of the device is now " + screen.orientation.angle,
  );
};
```

规范
--

| Specification |
| --- |
| Compatibility Standard # event-orientationchange |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window.matchMedia()
===================

`Window` 的 **`matchMedia()`** 方法返回一个新的 `MediaQueryList` 对象，表示指定的媒体查询 (en-US)字符串解析后的结果。返回的 `MediaQueryList` 可被用于判定 `Document` 是否匹配媒体查询，或者监控一个 `document` 来判定它匹配了或者停止匹配了此媒体查询。

语法
--
```

mqList = window.matchMedia(mediaQueryString)
```

### 参数

`mediaQueryString`

一个被用于媒体查询解析的字符串。

### 返回值

一个用来媒体查询的新的`MediaQueryList`对象

使用说明
----

你可以使用返回的媒体查询来执行即时检查和事件驱动检查，以查看文档是否与媒体查询匹配。

要执行一次瞬时检查以查看文档是否与媒体查询匹配，请查看`matches`属性的值，当 document 满足媒体查询条件的时候将会返回`true`。

如果你需要始终了解 document 是否与媒体查询匹配，则可以查看将要传递给对象的`change` 事件。`Window.devicePixelRatio`上的文章中有一个很好的例子。

示例
--

此示例运行媒体查询`(max-width: 600px)`并在`<span>`;中显示`MediaQueryList`的`matches`属性值。如果视口的宽度小于或等于 600 像素，则输出将为 true，而如果窗口的宽度大于此宽度，则将输出 false。

### JavaScript
```

let mql = window.matchMedia('(max-width: 600px)');

document.querySelector(".mq-value").innerText = mql.matches;
```


JavaScript 代码只需将要匹配的媒体查询字符串传递到`matchMedia()`进行编译，然后设置`<span>`的`innerText`为`matches` (en-US)属性结果的值，以便它表明此 document 在此刻页面加载完成时是否与媒体查询所匹配。

### HTML


```html
<span class="mq-value"></span>
```


一个简单的 `<span>` 来接收输出。
```

.mq-value {
  font:
    18px arial,
    sans-serif;
  font-weight: bold;
  color: #88f;
  padding: 0.4em;
  border: 1px solid #dde;
}
```

### 结果

参考更多的例子来 通过代码使用媒体查询 (en-US) 。

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-window-matchmedia |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 媒体查询 (en-US)
* 通过代码使用媒体查询 (en-US)
* `MediaQueryList`
* `MediaQueryListListener` (en-US)
targetElement
=============

**`SVGAnimationElement.targetElement`** 属性是指完成动画的元素。如果没有目标元素在执行动画（例如：因为 `href (en-US)` 属性指定了一个未知的元素），这个值将返回 `null`。

语法
--
```

var targetElement = someElement.targetElement;
```

规范
--

| Specification |
| --- |
| SVG Animations Level 2 # \_\_svg\_\_SVGAnimationElement\_\_targetElement |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLSlotElement.name
====================

元素`HTMLSlotElement`的**name**属性，可以获取和设置属性值。插槽提供了 web 组件的摆放位置，辅助用户布局。

语法
--
```

var name = htmlSlotElement.name
htmlSlotElement.name = name
```

### 值

一个 `DOMString`.

例子
--

下面的片段来自 slotchange example (see it live also).


```js
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", function (e) {
  let nodes = slots[1].assignedNodes();
  console.log(
    'Element in Slot "' +
      slots[1].name +
      '" changed to "' +
      nodes[0].outerHTML +
      '".',
  );
});
```


这里我们获取所有插槽的引用，然后给模板里的第二个插槽增加事件— 跟踪内容变化。

每当附加在插槽中的内容变化，我们都记录插槽相关的内容。

规范
--

| Specification |
| --- |
| HTML Standard # dom-slot-name-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Position.coords
===============

**`Position.coords`** 是一个`Coordinates` 对象的只读属性 , 表示地理状态：它包括位置，地球上的经度和纬度，相关的海拔和速度，可以重新组合内部返回的这些值，它还包含有关这些值的准确信息。

语法
--
```

coord = position.coords
```

规范
--

| Specification |
| --- |
| Geolocation API # coords-attribute |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Using geolocation
* The `Position` interface it belongs to.
SVGPathElement.getTotalLength()
===============================

**`SVGPathElement.getTotalLength()`** 该方法返回用户代理对路径总长度（以用户单位为单位）的计算值。

**备注：** 在 SVG 2 中，该方法被移动到 `SVGGeometryElement` (en-US) 接口，由 `SVGPathElement` (en-US) 继承。

语法
--


```js
getTotalLength();
```

### 返回值

指示路径总长度（以用户单位为单位）的浮点数。

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGGeometryElement\_\_getTotalLength |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `SVGGeometryElement.getTotalLength()`
关键帧格式
=====

`Element.animate()`、`KeyframeEffect.KeyframeEffect()` (en-US) 和 `KeyframeEffect.setKeyframes()` (en-US) 都接受格式为一组关键帧的对象，这种格式有以下几种选项。

语法
--

关键帧格式有两种不同的方式：

1. 一个由多个关键帧的属性和值组成的对象所构成的`数组`。这是`getKeyframes()` (en-US)方法返回的规范格式。

```js
element.animate(
  [
    {
      // from
      opacity: 0,
      color: "#fff",
    },
    {
      // to
      opacity: 1,
      color: "#000",
    },
  ],
  2000,
);
```

对每个关键帧的偏移可以通过提供一个`offset`来指定。

```js
element.animate(
  [{ opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 }],
  2000,
);
```


**备注：** `offset` 的值必须是在 **[0.0, 1.0]** 这个区间内，且须升序排列。

并非所有的关键帧都需要设置 `offset`。没有指定 `offset` 的关键帧将与相邻的关键帧均匀间隔。
 可以通过提供`easing`过渡来给指定关键帧之间应用过渡效果，如下所示：

```js
element.animate(
  [
    { opacity: 1, easing: "ease-out" },
    { opacity: 0.1, easing: "ease-in" },
    { opacity: 0 },
  ],
  2000,
);
```

在这个例子中，指定的 easing 仅适用于指定它的关键帧到下一帧之间。但是在`options`中指定的 `easing` 值都将应用在一个动画的整个持续时间里。
2. 一个包含 key-value 键值的`对象`需要包含动画的属性和要循环变化的值`数组`。

```js
element.animate(
  {
    opacity: [0, 1], // [ from, to ]
    color: ["#fff", "#000"], // [ from, to ]
  },
  2000,
);
```

使用这种格式，每个数组的元素数量不必相等。所提供的值将独立分开。

```js
element.animate(
  {
    opacity: [0, 1], // offset: 0, 1
    backgroundColor: ["red", "yellow", "green"], // offset: 0, 0.5, 1
  },
  2000,
);
```

特殊键`offset`，`easing`和`composite`（如下）可以与属性值一起指定。

```js
element.animate(
  {
    opacity: [0, 0.9, 1],
    offset: [0, 0.8], // [ 0, 0.8, 1 ] 的简写
    easing: ["ease-in", "ease-out"],
  },
  2000,
);
```

从属性值列表生成一组合适的关键帧后，每个提供的偏移量将应用于相应的关键帧。如果值不足或者列表包含空值`null`，则以没有指定处理（即和上面第 1 种数组格式的一样均匀间隔）.
 如果`easing` 或`composite` 值太少，将根据需要，重复相应的列表。
属性
--

关键帧可以为任何的 css 动画属性指定 property-value。使用 camel-case 的属性名将变为 camelCase 格式，例如 `background-color` 变成 `backgroundColor` ，再如 `background-position-x` 变成 `backgroundPositionX`.。速记词，例如 `margin` 也是可以用的。.

两个特色的 css 属性：

* `float`, 必须写成 `cssFloat` ，因为"float" 是 JavaScript 的保留关键字
* `offset`, 必须写成 `cssOffset` ，因为"offset" 表示如下的关键帧 offset

还可以指定以下特色属性：

offset

关键帧的 offset 偏移量指定为介于`0.0`和`1.0`之间的数字或为`null`。这相当于使用`@keyframes`在 CSS 样式表中以百分比指定开始和结束状态。如果此值为`null`或缺失，则关键帧将在相邻关键帧之间均匀分布。

easing

从这个关键帧直到这一级中的下一个关键帧所使用的 timing function (en-US)

composite

`KeyframeEffect.composite` (en-US) 操作用于将此关键帧中指定的值与基础值组合在一起。如果正在使用在效果上指定的复合操作，则不会出现这种情况。

参见
--

* Web Animations API
* `Element.animate()`
* `KeyframeEffect()` (en-US)
* `KeyframeEffect.setKeyframes()` (en-US)
Orientation 和 motion 数据解释
=========================

总言
--

当我们要使用 orientation 和 motion 事件时，理解浏览器给我们的相关值是什么意思就显的相当重要了。这篇文章会详细介绍在用的坐标系统并会教你如何全用它们。

**警告：** 目前，Firefox 和 Chrome 处理坐标的方式不同。在使用它们的时候要多加注意。

坐标系
---

坐标系是一种描述物体位置的系统，它包含三个轴 (X,Y,Z)，三个轴共同描述了物体相对于参照物的位置信息。当我们使用 orientation 和 motion 事件时会接触到两种坐标系统。

### 地球坐标系

地球坐标系是相对于地心的，也就是说，它的轴是基于重力方向和磁场北方向。我们使用大写的 X,Y,Z 来描述地球坐标系的轴。

* X 轴沿着地平面，垂直于 Y 轴，向东为正，向西为负。
* Y 轴沿着地平面，向北 (北极，不是磁场北) 为正，向南为负。
* Z 轴垂直于地平面，想象成一条线连接着设备跟地心。背对地心的方向为正，指向地心的方向为负。
### 设备坐标系

设备坐标系是相对于设备中心的。我们使用小写的 x,y,z 来描述它的轴。

![axes.png](/zh-CN/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained/axes.png)

* x 轴沿着屏幕表面，向右为正，向左为负。
* y 轴沿着屏幕表面，向上为正，向下为负。
* z 轴垂直屏幕表面或键盘，远离屏幕的方向为正。

**备注：** 注意：对于手机或平台而言，这里的设备方向总是相对于屏幕的标准方向，大部分是“竖屏”方向。而对于笔记本电脑来说，设备方向是相对于键盘的。如果你想检测设备方向变化来进行补偿调整，你可以使用 orientationchange 事件。

旋转 (Rotation)
-------------

旋转描述的是设备在设备坐标系跟地球坐标系中任意轴上的差异值，用角度表示。

### Alpha

围绕 z 轴旋转设备将使 alpha 角度值发生变化：

![alpha.png](/zh-CN/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained/alpha.png)

alpha 为 0° 时表示设备的顶部正指北极方向，当设备向左旋转时，alpha 将增加。

### Beta

围绕 x 轴旋转，也就是前后旋转，将使 beta 值发生改变：

![beta.png](/zh-CN/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained/beta2.png)

当 beta 为 0° 时表示设备顶部和底部与地表面的距离是一样的，当设备向前翻转时，beta 递增到 180°，向后翻转递减到 -180°。

### Gamma

当围绕 y 轴旋转，也就是左右倾斜设备时，将使 gamma 值发生改变：

![gamma.png](/zh-CN/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained/gamma.png)

gamma 等于 0° 表示设备左右两边与地表面的距离相等，当设备向右翻转时，gamma 递增到 90° ，向左翻转时，递减到 -90°。
ReadableStreamDefaultReader.read()
==================================

`ReadableStreamDefaultReader` 接口的 **`read()`** 方法返回一个 `Promise`，这个 promise 提供流的内部队列中下一个分块（以供访问）。

语法
--


```js
read()
```

### 参数

无。

### 返回值

一个 `Promise`，其兑现/拒绝的结果取决于流的状态。不同的可能性如下：

* 如果有分块可用，则 promise 将使用 `{ value: theChunk, done: false }` 形式的对象来兑现。
* 如果流已经关闭，则 promise 将使用 `{ value: undefined, done: true }` 形式的对象来兑现。
* 如果流发生错误，promise 将因相关错误被拒绝。
### 异常

`TypeError`

源对象不是 `ReadableStreamDefaultReader`，或者流没有所有者。

示例
--

### 示例 1——简单的例子

这个例子展示了基本的 API 使用方法，但是其不会尝试处理一些复杂的问题，如流中的分块不在行的末尾结束。

在此示例中 `stream` 是一个先前创建的自定义 `ReadableStream`。它使用 `getReader()` 创建的 `ReadableStreamDefaultReader` 读取。（有关完整代码请参见简单随机流演示）。每个块按顺序读取并作为 UTF-8 字节数组输出到 UI，直到流完成读取，此时我们退出递归函数并将整个流打印到 UI 的另一部分。


```js
function fetchStream() {
  const reader = stream.getReader();
  let charsReceived = 0;
  // read() 返回一个 promise，其会在接收到数据时被兑现
  reader.read().then(function processText({ done, value }) {
    // 结果包含两个属性：
    // done - 如果为 true，表示流已经返回所有的数据。
    // value - 一些数据，done 为 true 时，其值始终为 undefined。
    if (done) {
      console.log("Stream complete");
      para.textContent = result;
      return;
    }
    // 从流中获取的数据是一个 Uint8Array
    charsReceived += value.length;
    const chunk = value;
    let listItem = document.createElement("li");
    listItem.textContent =
      "Received " +
      charsReceived +
      " characters so far. Current chunk = " +
      chunk;
    list2.appendChild(listItem);
    result += chunk;
    // 再次调用该函数以读取更多数据
    return reader.read().then(processText);
  });
}
```

### 示例 2——逐行处理文本

这个示例向你展示如何获取一个文本文件并以流的形式处理文本中的每一行。它能够处理分块不在行的末尾结束的情况，并将 Uint8Array 转换为字符串。


```js
async function\* makeTextFileLineIterator(fileURL) {
  const utf8Decoder = new TextDecoder("utf-8");
  let response = await fetch(fileURL);
  let reader = response.body.getReader();
  let { value: chunk, done: readerDone } = await reader.read();
  chunk = chunk ? utf8Decoder.decode(chunk, { stream: true }) : "";
  let re = /\r\n|\n|\r/gm;
  let startIndex = 0;
  for (;;) {
    let result = re.exec(chunk);
    if (!result) {
      if (readerDone) {
        break;
      }
      let remainder = chunk.substr(startIndex);
      ({ value: chunk, done: readerDone } = await reader.read());
      chunk =
        remainder + (chunk ? utf8Decoder.decode(chunk, { stream: true }) : "");
      startIndex = re.lastIndex = 0;
      continue;
    }
    yield chunk.substring(startIndex, result.index);
    startIndex = re.lastIndex;
  }
  if (startIndex < chunk.length) {
    // last line didn't end in a newline char
    yield chunk.substr(startIndex);
  }
}
for await (let line of makeTextFileLineIterator(urlOfFile)) {
  processLine(line);
}
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-default-reader-read① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `ReadableStreamDefaultReader()` 构造函数
* 使用可读流
ReadableStreamDefaultReader.releaseLock()
=========================================

`ReadableStreamDefaultReader` 接口的 **`releaseLock()`** 方法用于释放 reader 对流的锁定。

如果释放锁时关联流出错，reader 随后会以同样的方式发生错误；此外，reader 将关闭。

reader 的锁在仍有待处理的读取请求时无法释放，即，如果 reader 的 `ReadableStreamDefaultReader.read()` 方法返回的 promise 尚未完成，这将导致抛出 `TypeError`。

语法
--


```js
releaseLock()
```

### 参数

无。

### 返回值

无 (`undefined`)。

### 异常

`TypeError`

如果源对象不是一个 `ReadableStreamDefaultReader`，或者仍有读取请求处于等待状态。

示例
--


```js
function fetchStream() {
  const reader = stream.getReader();
  ...
  reader.releaseLock()
  ...
}
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-default-reader-release-lock② |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `ReadableStreamDefaultReader()` 构造函数
* 使用可读流
ReadableStreamDefaultReader.closed
==================================

`ReadableStreamDefaultReader` 接口的只读属性 **`closed`** 返回一个 `Promise`，这个 promise 在流关闭时兑现，而在流抛出错误或者 reader 的锁被释放时拒绝。该属性使你能够编写在一个流结束时响应的代码。

值
-

一个 `Promise`。

示例
--

在这个片段中，查询一个先前创建的 reader 以查看流是否被关闭。当它关闭时，promise 兑现，并在控制台输出消息。


```js
reader.closed.then(() => {
  console.log("reader closed");
});
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-generic-reader-closed② |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `ReadableStreamDefaultReader()` 构造函数
* 使用可读流
ReadableStreamDefaultReader.cancel()
====================================

`ReadableStreamDefaultReader` 接口的 **`cancel()`** 方法返回一个 `Promise`，这个 promise 在流被取消时兑现。消费者在流中调用该方法发出取消流的信号。

cancel 用于在不再需要来自一个流的任何数据的情况下完全结束这个流，即使仍有排队等待的数据块。调用 cancel 后该数据丢失，并且流不再可读。为了仍然可以读这些数据块而不完全结束这个流，你应该使用 `ReadableStreamDefaultController.close()`。

**备注：** 如果 reader 处于激活状态，`cancel()` 方法的行为和关联流 (`ReadableStream.cancel()`) 的行为相同。

语法
--


```js
cancel()
cancel(reason)
```

### 参数

`reason` 可选

人类可读的取消原因。这个值可能会被使用。

### 返回值

一个 `Promise`，会在结束时使用给定的 `reason` 参数兑现。

### 异常

`TypeError`

源对象不是 `ReadableStreamDefaultReader`，或者流没有所有者。

示例
--

在下面的简单示例中，使用 `getReader()` 创建的 `ReadableStreamDefaultReader` 读取先前自定义的 `ReadableStream`。（有关完整代码简单随机流演示）。直到流完成读取，每一个块都按顺序读取并输出到 UI，此时我们退出递归函数并且将整个流打印到 UI 的另一部分。


```js
function fetchStream() {
  const reader = stream.getReader();
  let charsReceived = 0;
  // read() 返回一个 promise，其会在接收到数据时被兑现
  reader.read().then(function processText({ done, value }) {
    // 结果包含两个属性：
    // done - 如果为 true，表示流已经返回所有的数据。
    // value - 一些数据，done 为 true 时，其值始终为 undefined。
    if (done) {
      console.log("Stream complete");
      para.textContent = result;
      return;
    }
    // 从流中获取的数据是一个 Uint8Array
    charsReceived += value.length;
    const chunk = value;
    let listItem = document.createElement("li");
    listItem.textContent =
      "Received " +
      charsReceived +
      " characters so far. Current chunk = " +
      chunk;
    list2.appendChild(listItem);
    result += chunk;
    // 再次调用该函数以读取更多数据
    return reader.read().then(processText);
  });
}
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-generic-reader-cancel② |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `ReadableStreamDefaultReader()` 构造函数
* 使用可读流
ReadableStreamDefaultReader()
=============================

**`ReadableStreamDefaultReader()`** 构造函数创建并返回一个 `ReadableStreamDefaultReader` 实例对象。

**备注：** 你通常不需要手动创建，可以使用 `ReadableStream.getReader()` 方法代替。

语法
--


```js
new ReadableStreamDefaultReader(stream)
```

### 参数

`stream`

将被读取的 `ReadableStream`。

### 返回值

一个 `ReadableStreamDefaultReader` 实例对象。

### 异常

`TypeError`

如果提供的 `stream` 参数不是一个 `ReadableStream`，或者它已经被另一个 reader 锁定则抛出异常。

示例
--

在下面的简单示例中，使用 `getReader()` 创建的 `ReadableStreamDefaultReader` 读取先前自定义的 `ReadableStream`。（有关完整代码简单随机流演示）。直到流完成读取，每一个块都按顺序读取并输出到 UI，此时我们退出递归函数并且将整个流打印到 UI 的另一部分。


```js
function fetchStream() {
  const reader = stream.getReader();
  let charsReceived = 0;
  // read() 返回一个 promise，其会在接收到数据时被兑现
  reader.read().then(function processText({ done, value }) {
    // 结果包含两个属性：
    // done - 如果为 true，表示流已经返回所有的数据。
    // value - 一些数据，done 为 true 时，其值始终为 undefined。
    if (done) {
      console.log("Stream complete");
      para.textContent = result;
      return;
    }
    // 从流中获取的数据是一个 Uint8Array
    charsReceived += value.length;
    const chunk = value;
    let listItem = document.createElement("li");
    listItem.textContent =
      "Received " +
      charsReceived +
      " characters so far. Current chunk = " +
      chunk;
    list2.appendChild(listItem);
    result += chunk;
    // 再次调用该函数以读取更多数据
    return reader.read().then(processText);
  });
}
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-default-reader-constructor① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Stream API 概念
* 使用可读流
* `ReadableStream`
* `ReadableStreamDefaultController`
Notification：badge 属性
=====================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

当没有足够的空间来显示通知本身时，`Notification` 接口的 **`badge`** 属性返回用于表示通知的图像 URL。

值
-

一个包含 URL 的字符串。

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-badge |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Notification：data 属性
====================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`Notification` 接口的 **`data`** 只读属性返回一个在 `Notification()` 构造函数的 `data` 选项中指定的、结构化的通知的数据。

通知的数据可以是任意你希望与通知关联的数据。

值
-

一个结构化的克隆数据。

示例
--

以下代码段会触发一条通知。一个简单的 `options` 对象被创建，然后使用 `Notification()` 构造函数触发通知。


```js
const options = {
  body: "你提交的代码收到了 3 条新的审阅意见。",
  data: {
    url: "https://example.com/review/12345",
    status: "open",
  },
};

const n = new Notification("新评论活动", options);

console.log(n.data); // 打印 data 对象
```

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-data |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notification API
Notification：actions 属性
=======================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`Notification` 接口的只读属性 **`actions`** 提供了可供用户选择的以与通知交互的操作。

使用 `showNotification()` (en-US) 方法和 `Notification()` 构造函数的第二个参数的 `actions` 选项设置操作。

**备注：** 浏览器通常会限制它们为特定通知显示的最大操作数。检测 `Notification.maxActions` (en-US) 静态属性以确定限制的操作的数量。

值
-

一个只读的操作数组。数组中的每个元素都是一个具有以下成员的对象：

`action`

一个标识要在通知上显示的用户操作的字符串。

`title`

一个包含要向用户显示的操作文本的字符串。

`icon`

一个包含与操作一起显示的图标 URL 的字符串。

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-actions |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notification API
* `Notification.maxActions` (en-US)
Notification：silent 属性
======================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`Notification` 接口的 **`silent`** 只读属性指定通知是否应当保持静默，即无论设备设置如何，都不发出声音或振动。该属性在`Notification()` 构造函数的 `silent` 选项中指定。

值
-

一个布尔值。默认值是 `false`；设为 `true` 将使通知静音。

示例
--

以下代码片段旨在触发静默通知；创建一个简单的 `options` 对象，然后调用 `Notification()` 构造函数触发通知。


```js
const options = {
  body: "你提交的代码收到了 3 条新的审阅意见。",
  silent: true,
};

const n = new Notification("新评论活动", options);

console.log(n.silent); // "true"
```

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-silent |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notification API
Notification：vibrate 属性
=======================

**备注：** 此特性在 Web Worker 中可用

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`Notification` 接口的 `vibrate` 只读属性指定当通知触发时设备振动硬件发出的振动模式。此属性通过 `Notification()` 构造函数的 `vibrate` 选项指定。

值
-

一个振动 API 规范所指定的振动模式。

示例
--

以下代码片段旨在创建同时触发设备振动的通知；首先创建一个简单的 `options` 对象，然后使用 `Notification()` 构造函数触发通知。


```js
const options = {
  body: "你提交的代码收到了 3 条新的审阅意见。",
  vibrate: [200, 100, 200],
};

const n = new Notification("新的评论活动", options);

console.log(n.vibrate); // "[200, 100, 200]"
```

规范
--

| Specification |
| --- |
| Notifications API Standard # dom-notification-vibrate |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Notification API