获得徽章 7
juejin.cn
赞了这篇文章
赞了这篇文章
如何将对象转为Map？
### 如何将对象转为 Map
#### 核心方法
使用 `Object.entries()` 配合 `new Map()` 构造函数是最简洁的方式：
```javascript
const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));
// Map(2) {"a" => 1, "b" => 2}
```
#### 其他方法
1. **手动遍历**（适用于需要特殊处理的场景）：
```javascript
const map = new Map();
Object.keys(obj).forEach(key => {
map.set(key, obj[key]);
});
```
2. **处理嵌套对象**（浅层转换）：
```javascript
const deepObj = { a: { x: 1 }, b: [2] };
const deepMap = new Map(
Object.entries(deepObj).map(([k, v]) => [k, new Map(Object.entries(v))])
);
```
#### 注意事项
- 仅转换对象**自身可枚举属性**
- Symbol 类型键会被忽略（Map支持Symbol但`Object.entries`不包含）
- 值为对象时是**浅拷贝**
#### 最佳实践
- 简单转换优先用 `new Map(Object.entries(obj))`
- 需要深度转换建议使用专用工具库（如 lodash）
- 转换后可用 `map.get('key')` 替代 `obj.key` 访问
### 如何将对象转为 Map
#### 核心方法
使用 `Object.entries()` 配合 `new Map()` 构造函数是最简洁的方式：
```javascript
const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));
// Map(2) {"a" => 1, "b" => 2}
```
#### 其他方法
1. **手动遍历**（适用于需要特殊处理的场景）：
```javascript
const map = new Map();
Object.keys(obj).forEach(key => {
map.set(key, obj[key]);
});
```
2. **处理嵌套对象**（浅层转换）：
```javascript
const deepObj = { a: { x: 1 }, b: [2] };
const deepMap = new Map(
Object.entries(deepObj).map(([k, v]) => [k, new Map(Object.entries(v))])
);
```
#### 注意事项
- 仅转换对象**自身可枚举属性**
- Symbol 类型键会被忽略（Map支持Symbol但`Object.entries`不包含）
- 值为对象时是**浅拷贝**
#### 最佳实践
- 简单转换优先用 `new Map(Object.entries(obj))`
- 需要深度转换建议使用专用工具库（如 lodash）
- 转换后可用 `map.get('key')` 替代 `obj.key` 访问
展开
评论
点赞
如何将对象转为Map？
### 如何将对象转为 Map
#### 核心方法
使用 `Object.entries()` 配合 `new Map()` 构造函数是最简洁的方式：
```javascript
const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));
// Map(2) {"a" => 1, "b" => 2}
```
#### 注意事项
1. **仅转换可枚举属性**：`Object.entries()` 只包含对象自身的可枚举属性
2. **Symbol键处理**：默认会忽略 Symbol 类型的键，需额外处理：
```javascript
const sym = Symbol();
const obj = { [sym]: 'symbol' };
const map = new Map([
...Object.entries(obj),
...Object.getOwnPropertySymbols(obj).map(key => [key, obj[key]])
]);
```
#### 替代方案
1. **手动遍历**：
```javascript
const map = new Map();
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
map.set(key, obj[key]);
}
}
```
2. **使用 Lodash**：
```javascript
import { toPairs } from 'lodash';
const map = new Map(toPairs(obj));
```
#### 最佳实践
- 简单场景直接用 `Object.entries()`
- 需要处理 Symbol 键时采用扩展方案
- 注意 Map 与 Object 的键类型差异（Map 支持任意类型键）
### 如何将对象转为 Map
#### 核心方法
使用 `Object.entries()` 配合 `new Map()` 构造函数是最简洁的方式：
```javascript
const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));
// Map(2) {"a" => 1, "b" => 2}
```
#### 注意事项
1. **仅转换可枚举属性**：`Object.entries()` 只包含对象自身的可枚举属性
2. **Symbol键处理**：默认会忽略 Symbol 类型的键，需额外处理：
```javascript
const sym = Symbol();
const obj = { [sym]: 'symbol' };
const map = new Map([
...Object.entries(obj),
...Object.getOwnPropertySymbols(obj).map(key => [key, obj[key]])
]);
```
#### 替代方案
1. **手动遍历**：
```javascript
const map = new Map();
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
map.set(key, obj[key]);
}
}
```
2. **使用 Lodash**：
```javascript
import { toPairs } from 'lodash';
const map = new Map(toPairs(obj));
```
#### 最佳实践
- 简单场景直接用 `Object.entries()`
- 需要处理 Symbol 键时采用扩展方案
- 注意 Map 与 Object 的键类型差异（Map 支持任意类型键）
展开
评论
点赞
![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
赞了这篇文章
赞了这篇文章
如何提高前端应用的性能？
### **前端性能优化核心方案**
#### **1. 减少资源体积**
- **代码压缩**：使用 `Terser` 压缩 JS，`CSSNano` 压缩 CSS，`HTMLMinifier` 压缩 HTML。
- **Tree Shaking**（如 Webpack、Rollup）移除未使用的代码。
- **图片优化**：使用 WebP 格式，`sharp` 或 `ImageOptim` 压缩图片，懒加载非关键图片。
#### **2. 优化加载策略**
- **代码拆分**（Code Splitting）：按路由或组件动态加载 JS（如 `React.lazy` + `Suspense`）。
- **预加载关键资源**：`<link rel="preload">` 提前加载字体、关键 CSS/JS。
- **CDN 加速**：静态资源托管到 CDN，减少延迟。
#### **3. 渲染优化**
- **减少重排/重绘**：使用 `transform` 和 `opacity` 触发 GPU 加速，避免频繁修改 DOM。
- **虚拟列表（Virtualization）**：长列表使用 `react-window` 或 `vue-virtual-scroller` 减少 DOM 节点。
- **SSR/SSG**：Next.js/Nuxt 等服务端渲染提升首屏速度。
#### **4. 缓存策略**
- **强缓存**（`Cache-Control: max-age=31536000`）用于静态资源。
- **协商缓存**（`ETag`/`Last-Modified`）用于频繁更新的资源。
- **Service Worker**：PWA 离线缓存（如 Workbox）。
#### **5. 监控与分析**
- **Lighthouse** 检测性能瓶颈。
- **Chrome DevTools** 分析渲染性能（Performance 面板）。
- **RUM（Real User Monitoring）** 如 Sentry 跟踪真实用户性能。
**总结**：聚焦 **资源体积**、**加载策略**、**渲染效率**、**缓存** 四方面
### **前端性能优化核心方案**
#### **1. 减少资源体积**
- **代码压缩**：使用 `Terser` 压缩 JS，`CSSNano` 压缩 CSS，`HTMLMinifier` 压缩 HTML。
- **Tree Shaking**（如 Webpack、Rollup）移除未使用的代码。
- **图片优化**：使用 WebP 格式，`sharp` 或 `ImageOptim` 压缩图片，懒加载非关键图片。
#### **2. 优化加载策略**
- **代码拆分**（Code Splitting）：按路由或组件动态加载 JS（如 `React.lazy` + `Suspense`）。
- **预加载关键资源**：`<link rel="preload">` 提前加载字体、关键 CSS/JS。
- **CDN 加速**：静态资源托管到 CDN，减少延迟。
#### **3. 渲染优化**
- **减少重排/重绘**：使用 `transform` 和 `opacity` 触发 GPU 加速，避免频繁修改 DOM。
- **虚拟列表（Virtualization）**：长列表使用 `react-window` 或 `vue-virtual-scroller` 减少 DOM 节点。
- **SSR/SSG**：Next.js/Nuxt 等服务端渲染提升首屏速度。
#### **4. 缓存策略**
- **强缓存**（`Cache-Control: max-age=31536000`）用于静态资源。
- **协商缓存**（`ETag`/`Last-Modified`）用于频繁更新的资源。
- **Service Worker**：PWA 离线缓存（如 Workbox）。
#### **5. 监控与分析**
- **Lighthouse** 检测性能瓶颈。
- **Chrome DevTools** 分析渲染性能（Performance 面板）。
- **RUM（Real User Monitoring）** 如 Sentry 跟踪真实用户性能。
**总结**：聚焦 **资源体积**、**加载策略**、**渲染效率**、**缓存** 四方面
展开
评论
点赞
如何提高前端应用的性能？
### **前端性能优化核心方案**
#### **1. 减少资源体积**
- **代码压缩**：使用 `Terser` 压缩 JS，`CSSNano` 压缩 CSS，`HTMLMinifier` 压缩 HTML。
- **Tree Shaking**（Webpack/Rollup）：移除未使用的代码。
- **图片优化**：使用 WebP/AVIF 格式，`sharp` 或 `imagemin` 压缩图片。
#### **2. 优化加载策略**
- **懒加载**：`<img loading="lazy">` 或 `IntersectionObserver` 动态加载资源。
- **代码分割**：`React.lazy()` + `Suspense` 或 `import()` 动态加载组件。
- **预加载关键资源**：`<link rel="preload" href="main.js" as="script">`。
#### **3. 缓存策略**
- **强缓存**：`Cache-Control: max-age=31536000`（静态资源）。
- **协商缓存**：`ETag`/`Last-Modified`（频繁更新的资源）。
- **Service Worker**：PWA 离线缓存（`workbox-webpack-plugin`）。
#### **4. 减少渲染阻塞**
- **CSS 内联关键路径**：`critters` 提取首屏 CSS。
- **异步加载非关键 JS**：`<script defer>` 或 `<script async>`。
- **避免布局抖动**：使用 `transform`/`opacity` 触发 GPU 加速。
#### **5. 性能监控**
- **Lighthouse**：自动化评分。
- **Web Vitals**：监控 `CLS`、`FID`、`LCP`。
- **Performance API**：`performance.mark()` 手动测量关键任务。
#### **示例：React 优化**
```jsx
// 1. 使用 React.memo 避免重复渲染
co
### **前端性能优化核心方案**
#### **1. 减少资源体积**
- **代码压缩**：使用 `Terser` 压缩 JS，`CSSNano` 压缩 CSS，`HTMLMinifier` 压缩 HTML。
- **Tree Shaking**（Webpack/Rollup）：移除未使用的代码。
- **图片优化**：使用 WebP/AVIF 格式，`sharp` 或 `imagemin` 压缩图片。
#### **2. 优化加载策略**
- **懒加载**：`<img loading="lazy">` 或 `IntersectionObserver` 动态加载资源。
- **代码分割**：`React.lazy()` + `Suspense` 或 `import()` 动态加载组件。
- **预加载关键资源**：`<link rel="preload" href="main.js" as="script">`。
#### **3. 缓存策略**
- **强缓存**：`Cache-Control: max-age=31536000`（静态资源）。
- **协商缓存**：`ETag`/`Last-Modified`（频繁更新的资源）。
- **Service Worker**：PWA 离线缓存（`workbox-webpack-plugin`）。
#### **4. 减少渲染阻塞**
- **CSS 内联关键路径**：`critters` 提取首屏 CSS。
- **异步加载非关键 JS**：`<script defer>` 或 `<script async>`。
- **避免布局抖动**：使用 `transform`/`opacity` 触发 GPU 加速。
#### **5. 性能监控**
- **Lighthouse**：自动化评分。
- **Web Vitals**：监控 `CLS`、`FID`、`LCP`。
- **Performance API**：`performance.mark()` 手动测量关键任务。
#### **示例：React 优化**
```jsx
// 1. 使用 React.memo 避免重复渲染
co
展开
评论
点赞