江苏龙网

  1. 主页 > 生活百科 > >

object JavaScript选择 map而非对象存储键值对的 5 个理由附示例

JavaScript


object JavaScript选择 map而非对象存储键值对的 5 个理由附示例

文章插图
 
如果有一件事我知道如何做好 ， 那就是如何跟上变化 。因为如果你不这样做 ， 你就会落后 。我亲身体会到 ， 使用熟记在心的东西 ， 而不是尝试“新的”东西 ， 是多么舒服 。
但不适是让你成长的原因 ， 无论是作为普通人还是开发者 。
让我们先深入看看“新”Map能教给我们什么 。
什么是Map对象?
以下是holy source (MDN)的定义:
Map对象保存着键值对 ， 并记住键的原始插入顺序 。任何值(包括对象和基本类型值)都可以用作键或值 。
简单来说 ， Map是JAVAScript原生的散列或字典数据结构 。
语法: Map vs Object
Andrej发布了一个方便的备忘单 ， 很好地展示了它们的语法差异 。
object JavaScript选择 map而非对象存储键值对的 5 个理由附示例

文章插图
 
原因一:你不会意外地覆盖默认的Key
Map
默认情况下 ， Map不包含任何键 。这是一个全新的开始 。它只有你放进去的东西 。
不多也不少 。
object JavaScript选择 map而非对象存储键值对的 5 个理由附示例

文章插图
 
Object
默认情况下 ， 对象都有自己的原型 ， 因此它包含的默认键可能与你自己的键发生冲突 。
在创建新对象时 ， 可以通过传递null作为原型绕过该方法:
看看它们的区别:
 
  • New Object
 
object JavaScript选择 map而非对象存储键值对的 5 个理由附示例

文章插图
 
 
  • New Object带有null原型
 
object JavaScript选择 map而非对象存储键值对的 5 个理由附示例

文章插图
 
原因2:它可以接受任何类型的键
Map
map接受任何类型的键 。这包括函数、对象和所有基本类型(string、number、boolean、symbol、undefined、null和bigint) 。
let obj = { 'a': 'a' };let func = () => 'hey';//也可以使用数组语法一次初始化多个值let map = new Map([[123, true], [true, 123], [obj, 'object'], [func, 'function']])map.keys() // 123, true, Object, () => 'hey'map.get(obj) // 'object'map.get(func) // 'function'map.get({ 'a': 'a' }) // undefined//对象和函数是按引用存储的 ， 所以{'a':'a'}和obj是不同的对象)
Object
对象的键必须是字符串或符号（Symbol） 。
let obj1 = { 'a': 'a' };let func = () => 'hey';let obj = { 123: true, true: 123, obj1: 'object', func: 'function' };Object.keys(obj)// ['123', 'true', 'obj1', 'func'] 转换所有的key为字符串obj[func] //undefinedobj['func'] // 'function'原因三:map是可迭代的
Map
map本身是可迭代的 。这意味着可以使用for或 。foreach()循环遍历它们 。
const map = new Map();map.set(0, 'zero').set(1, 'one'); //you can chain .set()for (const [key, value] of map) {console.log(`key: ${key}, value: ${value}`);// key: 0, value: zero// key: 1, value: one//如果你只想要` values `或者` keys `for (const key of map.keys()) { // or map.values()console.log(key);map.forEach((value, key) => console.log(`key: ${key}, value: ${value}`));// key: 0, value: zero// key: 1, value: one
Object
对象是不可迭代的 ， 尽管可以使用for in和Object.Entries()迭代它们 。
let obj = { 0: 'zero', 1: 'one' }for(let key in obj){console.log(`key: ${key}, value: ${obj[key]}`)// key: 0, value: zero// key: 1, value: oneObject.entries(obj).forEach((item) => console.log(`key: ${item[0]}, value: ${item[1]}`))// key: 0, value: zero// key: 1, value: one原因四:Map可以与数组（Array）合并 ， 并转换为数组
Map
map和数组是100%兼容的 ， 可以直观地从一个映射到另一个 。
下面展示了如何将Map转换为数组
let map = new Map([ [1, 'one'], [2, 'two'] ]);Array.from(map) //[ [1, 'one'], [2, 'two'] ] 和你最初传入的数组一模一样//或者你可以使用展开运算符const newArr = [...map];
数组映射到Map中
let arr = [ [1, 'one'], [2, 'two'] ];new Map(arr); //{ 1 => 'one', 2 => 'two' }
下面展示了如何合并一个Map和一个Array
let map = new Map([ [1, 'one'], [2, 'two'] ]);let arr = [3, 'three']let combinedMap = new Map(...map, arr);// { 1 => 'one', 2 => 'two', 3 => 'three' }let combinedArr = [...map, arr];// [ [1, 'one'], [2, 'two'], [3, 'three'] ]


推荐阅读


上一篇：知乎的SEO是什么，知乎平台如何做seo

下一篇：CentOS 7最小化安装对系统初始化