在JavaScript中，获取设备网络连接信息可以通过`navigator.connection`对象实现。该对象提供了关于设备网络状态的详细信息，例如连接类型、下载速度等。以下是具体使用方法和注意事项：

### 一、核心属性与方法

**connectionType**

返回网络连接类型（如`"2g"`, `"3g"`, `"4g"`, `"slow-2g"`）。

**downlink**

获取当前网络的首个跳点的下载速度（Mbps）。

**effectiveType**

根据`downlink`值返回简化的连接类型（如`"slow-2g"`, `"2g"`, `"3g"`, `"4g"`）。

**rtt**

返回往返时间（RTT，单位：毫秒）。

**onchange**

事件处理器，当网络状态变化时触发。

**示例代码** ：

```javascript

if (navigator.connection) {

const connectionInfo = navigator.connection;

console.log(`连接类型: ${connectionInfo.effectiveType}`);

console.log(`下载速度: ${connectionInfo.downlink} Mbps`);

console.log(`RTT: ${connectionInfo.rtt} ms`);

connectionInfo.onchange = function() {

console.log('网络状态变化');

};

}

```

### 二、检测网络状态

**在线/离线状态**

通过`navigator.onLine`属性判断当前是否在线。

**事件监听**

使用`ononline`和`onoffline`事件监听网络变化。

**示例代码** ：

```javascript

window.addEventListener('online', function() {

console.log('网络已连接');

});

window.addEventListener('offline', function() {

console.log('网络断开');

});

```

### 三、注意事项

**浏览器兼容性**

`navigator.connection`在现代浏览器中得到广泛支持，但在部分旧版本浏览器中可能不兼容。建议使用特性检测：

```javascript

if ('connection' in navigator) {

// 支持

} else {

// 不支持

}

```

**获取本地IP地址**

- **内网IP** ：可通过`RTCPeerConnection`的`createDataChannel`方法获取。

- **外网IP** ：需通过后端服务器查询（如`https://api.ipify.org`）。

**限制与建议**

- 下载速度等详细信息可能受浏览器策略限制，无法通过客户端脚本获取。

- 实际应用中，建议结合`navigator.onLine`和`connection`信息综合判断网络状态，避免过度依赖单一指标。

通过以上方法，可以全面获取设备的网络连接信息，并根据需求调整应用行为（如切换内容质量、提示网络异常等）。