ES6--Map(Map与Object区别、Map的迭代、Map与Array转换、Map的克隆及合并)

本文详细介绍了JavaScript中的Map对象,包括其如何保存键值对,与Objects的区别,如何使用不同类型的键,如字符串、对象、函数甚至NaN,并展示了Map的迭代方式和操作方法,如与数组的转换、克隆及合并。
Map对象

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

Maps 和 Objects 的区别
  • 一个 Object 的键只能是字符串或者 Symbols,但一个 Map 的键可以是任意值。
  • Map 中的键值是有序的(FIFO 原则),而添加到对象中的键则不是。
  • Map 的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算。
  • Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
Map中的key

key是字符串:

var myMap = new Map();
var keyString = "a string"; 
 
myMap.set(keyString, "和键'a string'关联的值");
 
myMap.get(keyString);    // "和键'a string'关联的值"
myMap.get("a string");   // "和键'a string'关联的值"
                         // 因为 keyString === 'a string'

key是对象:

var myMap = new Map();
var keyObj = {}, 
 
myMap.set(keyObj, "和键 keyObj 关联的值");

myMap.get(keyObj); // "和键 keyObj 关联的值"
myMap.get({}); // undefined, 因为 keyObj !== {}

key是函数:

var myMap = new Map();
var keyFunc = function () {}, // 函数
 
myMap.set(keyFunc, "和键 keyFunc 关联的值");
 
myMap.get(keyFunc); // "和键 keyFunc 关联的值"
myMap.get(function() {}) // undefined, 因为 keyFunc !== function () {}

key是NaN:

var myMap = new Map();
myMap.set(NaN, "not a number");
 
myMap.get(NaN); // "not a number"
 
var otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"

虽然 NaN 和任何值甚至和自己都不相等(NaN !== NaN 返回true),NaN作为Map的键来说是没有区别的。

Map的迭代

1. for…of:


var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
 
// 将会显示两个 log。 一个是 "0 = zero" 另一个是 "1 = one"
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
/* 这个 entries 方法返回一个新的 Iterator 对象,它按插入顺序包含了 Map 对象中每个元素的 [key, value] 数组。 */
 
// 将会显示两个log。 一个是 "0" 另一个是 "1"
for (var key of myMap.keys()) {
  console.log(key);
}
/* 这个 keys 方法返回一个新的 Iterator 对象, 它按插入顺序包含了 Map 对象中每个元素的键。 */
 
// 将会显示两个log。 一个是 "zero" 另一个是 "one"
for (var value of myMap.values()) {
  console.log(value);
}
/* 这个 values 方法返回一个新的 Iterator 对象,它按插入顺序包含了 Map 对象中每个元素的值。 */

2. forEach():


var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
 
// 将会显示两个 logs。 一个是 "0 = zero" 另一个是 "1 = one"
myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)

Map对象的操作

Map与Array的转换:


var kvArray = [["key1", "value1"], ["key2", "value2"]];
 
// Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
var myMap = new Map(kvArray);
 
// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
var outArray = Array.from(myMap);

Map的克隆:

var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
var myMap2 = new Map(myMap1);
 
console.log(original === clone); 
// 打印 false。 Map 对象构造函数生成实例,迭代出新的对象。

Map的合并:


var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
 
// 合并两个 Map 对象时,如果有重复的键值,则后面的会覆盖前面的,对应值即 uno,dos, three
var merged = new Map([...first, ...second]);
<think> 首先,用户的问题是关于“map_from_entries”的信息,包括使用方法和应用场景。但我在提供的引用中搜索,没有直接提到“map_from_entries”这个术语。回顾引用: - 引用[1]提到“Object.entries()”和“Object.fromEntries()”,在JavaScript中。 - 引用[2]和[3]讨论ES6的Set和Map数据结构。 - 引用[4]讨论BPF Map在系统编程中。 用户特别指出“map_from_entries”,这可能是一个拼写错误或误解。在JavaScript中,有一个“Object.fromEntries()”方法,它从键值对数组创建对象。用户可能指的是这个。 在引用[1]中,明确提到了“Object.fromEntries()”,并说它和“Object.entries()”是互逆的操作。所以,我认为用户指的是“Object.fromEntries()”。 用户的问题:“我想了解map_from_entries的相关信息,如使用方法、应用场景等”。所以,我需要回答关于JavaScript的Object.fromEntries()的使用方法和应用场景。 系统级指令要求: 1. 行内数学表达式用$...$,但这里可能没有数学表达式,因为主题是编程。 2. 独立公式用$$...$$,但同样,可能不需要。 3. LaTeX语法正确:确保格式正确。 4. 使用中文回答。 5. 生成相关问题:在回答结束后添加相关问题。 6. 回答中引用的段落末尾添加引用标识,如[^1]。 用户可见层要求:回答结构清晰,逐步解决问题,保证真实可靠。 所以,我的回答应该: - 解释Object.fromEntries()是什么。 - 描述使用方法,包括语法和示例。 - 讨论应用场景。 - 引用相关的引用源。 从引用[1]:它指出Object.fromEntries()用于从键值对数组创建对象,Object.entries()互逆。Object.entries()将对象转换为键值对数组。 引用[3]提到Map数据结构,但Object.fromEntries()Object的方法,不是Map的。不过,它们可能结合使用。 结构化回答: 1. **介绍**:解释Object.fromEntries()。 2. **使用方法**: - 语法:Object.fromEntries(iterable) - 参数:一个可迭代对象,包含键值对数组,如[[key1, value1], [key2, value2]] - 返回值:一个新对象。 - 示例代码。 3. **应用场景**: - 数据转换:例如,从Map或数组创建对象。 - 数据处理:在数据处理管道中。 - 具体例子。 4. **相关方法的比较**:如Object.entries()。 5. **总结**。 生成相关问题:结束后添加2-3个相关问题。 引用:在回答中,当引用引用[1]时,添加[^1]。 确保中文。 现在,构建回答。 介绍:根据引用[1],Object.fromEntries()是JavaScript中用于从键值对数组创建对象的方法。 使用方法:语法是Object.fromEntries(iterable)。iterable应该是一个数组的数组,每个子数组包含两个元素:键和值。 例如: ```javascript const entries = [['name', 'Alice'], ['age', 30]]; const obj = Object.fromEntries(entries); console.log(obj); // { name: 'Alice', age: 30 } ``` 应用场景: -Map转换为对象:因为Map的entries()方法返回键值对迭代器。 - 数据处理:当你有数据在数组中,需要转换为对象时。 - 序列化和反序列化。 引用引用[1]:[^1] 相关问题:如“如何将对象转换为键值对数组?”或“Object.fromEntries()new Map()有什么区别?” 最终回答结构: - 清晰段落。 - 代码块用```包围。 - 结尾添加相关问题。 </think> ### Object.fromEntries() 的使用方法和应用场景 根据您的问题,“map_from_entries”可能是一个拼写错误或特定上下文下的术语。在 JavaScript 中,标准方法是 `Object.fromEntries()`,它用于从键值对数组(entries)创建新对象。这个方法 `Object.entries()` 互逆(`Object.entries()` 将对象转换为键值对数组),在数据处理、对象转换等场景中非常实用[^1]。以下我将详细介绍其使用方法、应用场景,并基于引用内容确保回答真实可靠。 #### 1. **Object.fromEntries() 的基本介绍** - **功能**:`Object.fromEntries()` 接受一个键值对数组(每个元素是 `[key, value]` 形式的数组),并返回一个新对象。键(key)必须是字符串或 Symbol 类型,值(value)可以是任意类型。 - **语法**:`Object.fromEntries(iterable)`,其中 `iterable` 是一个可迭代对象,如数组或 Map 的 entries- **互逆性**:它 `Object.entries()` 互逆。例如,`Object.fromEntries(Object.entries(obj))` 会返回原始对象的浅拷贝。这在数据序列化和转换中非常高效[^1]。 #### 2. **使用方法详解** 下面是 `Object.fromEntries()` 的基本用法和示例代码。参数必须是键值对数组的集合,常见于数组或 Map 的 entries。 **语法示例**: ```javascript const newObj = Object.fromEntries(iterable); ``` - `iterable`:一个包含 `[key, value]` 数组的可迭代对象(如数组、Map.entries() 的结果)。 - 返回值:一个新对象,键值对由输入决定。 **代码示例**: - **示例 1:从数组创建对象** 假设有一个键值对数组,直接转换为对象: ```javascript const entries = [['name', 'Alice'], ['age', 30], ['isStudent', false]]; const person = Object.fromEntries(entries); console.log(person); // 输出:{ name: 'Alice', age: 30, isStudent: false } ``` - **示例 2:将 Map 转换为对象** JavaScript 的 Map 数据结构(引用[2][^2]和[3][^3])常用于存储键值对。`Map.entries()` 返回一个可迭代的键值对,利用 `Object.fromEntries()` 可以轻松转换为普通对象: ```javascript const myMap = new Map(); myMap.set('id', 1001); myMap.set('role', 'admin'); const objFromMap = Object.fromEntries(myMap.entries()); console.log(objFromMap); // 输出:{ id: 1001, role: 'admin' } ``` 此方法在处理 Map 数据时简化了转换过程[^3]。 - **示例 3:处理数据转换中的错误** 如果输入无效(如键不是字符串),会抛出 TypeError。使用时需确保键值对格式正确: ```javascript try { const invalidEntries = [[123, 'numberKey']]; // 键应为字符串 const obj = Object.fromEntries(invalidEntries); // 抛出 TypeError } catch (error) { console.error('Error:', error.message); // 输出:Error: 123 is not a valid key } ``` #### 3. **应用场景** `Object.fromEntries()` 在数据处理和对象操作中广泛应用,尤其是在以下场景: - **数据序列化反序列化**:当从 API 或外部数据源获取键值对数组(如 JSON 格式)时,快速转换为对象进行操作。例如,从服务器获取用户数据数组后,直接创建对象便于前端使用[^1]。 - **Map 到对象的转换**:在 ES6 Map 结构中存储数据(引用[2][^2]),但需要旧代码或库交互时(如使用对象进行属性访问),`Object.fromEntries()` 提供高效转换。这在状态管理(如 Redux)中常见[^3]。 - **数据管道处理**:结合数组方法(如 `map` 或 `filter`),实现数据清洗和转换。例如,从表单数据中提取特定字段: ```javascript const formData = [['username', 'bob'], ['password', 'secret'], ['email', 'bob@example.com']]; const filteredData = formData.filter(([key]) => key !== 'password'); // 移除密码字段 const safeObj = Object.fromEntries(filteredData); console.log(safeObj); // 输出:{ username: 'bob', email: 'bob@example.com' } ``` - ** Object.entries() 结合使用**:用于对象克隆转换。例如,创建对象的过滤副本: ```javascript const original = { a: 1, b: 2, c: 3 }; const filteredEntries = Object.entries(original).filter(([key, value]) => value > 1); const filteredObj = Object.fromEntries(filteredEntries); console.log(filteredObj); // 输出:{ b: 2, c: 3 } ``` 这种方法在数据聚合和简化代码中非常高效[^1]。 **其他 Map 类型对比**:在系统编程中,BPF Map(如引用[4][^4])用于内核级数据管理(如 BPF_MAP_TYPE_HASH),但 `Object.fromEntries()` 是纯 JavaScript 方法,专注于应用层数据处理,不涉及底层内存管理。两者适用于不同层级:JavaScript 对象用于前端或 Node.js 应用,BPF Map 用于高性能系统监控[^4]。 #### 4. **注意事项** - **浏览器兼容性**:`Object.fromEntries()` 是 ES2019 标准,现代浏览器(Chrome、Firefox、Safari)和 Node.js(v12+)支持。旧环境需使用 polyfill(如 `Array.reduce()` 模拟)。 - **性能**:对于大型数据集,转换效率较高,但频繁操作大量数据时,直接使用 Map 可能更优,因为 Map 提供更快的键值查找(引用[3][^3])。 - **键类型限制**:键必须为字符串或 Symbol。如果使用非字符串键(如数字),会自动转换为字符串。 总之,`Object.fromEntries()` 是 JavaScript 中处理对象转换的强大工具,特别适合数据映射和序列化场景。通过上述示例和场景,您可以快速集成到项目中[^1][^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值