2024-08-06 javascript对象和map区别

0、主要区别

1、键的类型:

对象的键只能是字符串或符号。
Map的键可以是任意类型。

2、键的顺序:

对象的键顺序在现代JavaScript引擎中通常按插入顺序维护,但这是非标准行为,不应依赖。
Map的键值对按插入顺序迭代,符合标准。
迭代:

对象需要使用 for...in 或 Object.keys、Object.values、Object.entries 来迭代。
Map可以直接使用迭代器方法(如 forEach)或 for...of 迭代。

3、性能:

对象在添加和查找简单键值对时性能较好。
Map在频繁增删键值对时性能更优,因为Map是专门为此设计的。

4、内存管理:

Map会更有效地管理内存,尤其是当键是复杂对象时。

5、使用场景

对象:适合用来表示固定结构的实体数据(如用户信息、配置项等)。
Map:适合动态添加、删除键值对的场景,或者当需要使用非字符串类型的键时。
根据具体需求选择合适的数据结构,可以使代码更高效、易读。

1、定义对象key名字双引号的写法和省去双引号

let obj = {
name: "Alice",
age: 30
}; 这个obj对象的name为什么不需要用双引号扩起来,比如是let obj = {
"name": "Alice",
"age": 30
};

在JavaScript中,对象字面量中的属性名称可以省略引号,但有一些细节需要注意。

属性名称不使用引号的情况:
如果属性名称是一个有效的JavaScript标识符,则可以省略引号。有效的JavaScript标识符由字母、数字、下划线(_)和美元符号($)组成,并且不能以数字开头。

在这个例子中,name 和 age 都是有效的JavaScript标识符,因此可以不使用引号:

let obj = {
    name: "Alice",
    age: 30
};

// 等价于
let obj = {
    "name": "Alice",
    "age": 30
};

属性名称需要使用引号的情况
如果属性名称中包含空格、特殊字符(如破折号),或者是一个数字,必须使用引号:

let obj = {
    "first name": "Alice",
    "last-name": "Smith",
    123: "one two three"
};

// 使用方括号访问属性值
console.log(obj["first name"]); // Alice
console.log(obj["last-name"]); // Smith
console.log(obj[123]); // one two three

省略引号:如果属性名称是有效的JavaScript标识符,可以省略引号。
需要引号:如果属性名称包含空格、特殊字符或是数字,必须使用引号。
使用引号和不使用引号在功能上是等价的,只要属性名称符合相应的规则。

2、存放到对象:

将判断条件作为对象的属性名,将处理逻辑作为对象的属性值,在按钮点击的时候,通过对象属性查找的方式来进行逻辑判断,这种写法特别适合一元条件判断的情况。

const actions = {
  '1': ['processing','IndexPage'],
  '2': ['fail','FailPage'],
  '3': ['fail','FailPage'],
  '4': ['success','SuccessPage'],
  '5': ['cancel','CancelPage'],
  'default': ['other','Index'],
}
/**
 * 按钮点击事件
 * @param {number} status 活动状态:1开团进行中 2开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const onButtonClick = (status)=>{
  let action = actions[status] || actions['default'],
      logName = action[0],
      pageName = action[1]
  sendLog(logName)
  jumpTo(pageName)
}

3、存放到map

new Map() 可以接受一个可迭代对象(如数组)来初始化一个新的 Map 实例。你提供的代码正是通过一个包含多个键值对的数组来创建一个 Map:

const actions = new Map([
  [1, ['processing','IndexPage']], //键值对数组
  [2, ['fail','FailPage']],
  [3, ['fail','FailPage']],
  [4, ['success','SuccessPage']],
  [5, ['cancel','CancelPage']],
  ['default', ['other','Index']]
])
/**
 * 按钮点击事件
 * @param {number} status 活动状态:1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const onButtonClick = (status)=>{
  let action = actions.get(status) || actions.get('default')
  sendLog(action[0])
  jumpTo(action[1])
}

console.log(actions.get(1)); // ['processing','IndexPage']
console.log(actions.get('default')); // ['other','Index']

使用 set 方法逐步添加键值对:

let map = new Map();

map.set(1, ['processing', 'IndexPage']);
map.set(2, ['fail', 'FailPage']);
map.set(3, ['fail', 'FailPage']);
map.set(4, ['success', 'SuccessPage']);
map.set(5, ['cancel', 'CancelPage']);
map.set('default', ['other', 'Index']);

console.log(map.get(1)); // ['processing','IndexPage']
console.log(map.get('default')); // ['other','Index']

这样写用到了es6里的Map对象,是不是更爽了?Map对象和Object对象有什么区别呢?

一个对象通常都有自己的原型,所以一个对象总有一个"prototype"键。
一个对象的键只能是字符串或者Symbols,但一个Map的键可以是任意值。
你可以通过size属性很容易地得到一个Map的键值对个数,而对象的键值对个数只能手动确认。

如何写出优雅耐看的JavaScript代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • 数组的定义格式 1、var 数组名称 = new Array (); var arr = new Array();...
    怜歌阅读 398评论 0 0
  • 简介 ECMAScript是JavaScript的标准,JavaScript实现了ECMAScript,ECMAS...
    Zindex阅读 381评论 0 1
  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,114评论 0 13
  • 简介 ECMAScript是JavaScript的标准,JavaScript实现了ECMAScript,ECMAS...
    Zindex阅读 336评论 0 3
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,521评论 0 5