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的键值对个数,而对象的键值对个数只能手动确认。