page wordpress,搜索引擎环境优化,网页制作的目的和意义,网页优化在JavaScript中#xff0c;普通对象#xff08;{}#xff09;和 Map 对象都是用于存储键值对的数据结构#xff0c;但是他们有一些区别。
1. 键的类型
普通对象#xff1a; 对象的键必须是字符串或 Symbol 类型。其他类型的值#xff08;如数字、布尔值、对象等#x…在JavaScript中普通对象{}和 Map 对象都是用于存储键值对的数据结构但是他们有一些区别。
1. 键的类型
普通对象 对象的键必须是字符串或 Symbol 类型。其他类型的值如数字、布尔值、对象等会被强制转换为字符串。例如1 和 “1” 在对象中是同一个键。
Map Map 允许任何类型的值作为键包括对象、函数、原始类型等。例如1 和 “1” 在 Map 中是不同的键。
2. 键的顺序
普通对象 在ES6之前对象的键没有特定的顺序。但在现代JavaScript中对象的字符串键按插入顺序排序数字键按升序排序Symbol 键的顺序未定义。 Map Map 保留键的插入顺序当你遍历 Map 时键会按照插入的顺序被访问。
让我们考虑一个带有电话号码的对象
let codes {49: Germany,41: Switzerland,44: Great Britain,// ..,1: USA,
};for (let code in codes) {console.log(code); // 1, 41, 44, 49
}console.log(Object.keys(codes)); //[ 1, 41, 44, 49 ]不论是in操作符还是Object.keys键的顺序是按照整数顺序排列的同时Object.values也是对应的key的顺序的
console.log(Object.keys(codes)); //[ 1, 41, 44, 49 ]
console.log(Object.values(codes)); //[ USA, Switzerland, Great Britain, Germany ]即 整数属性会被进行排序其他属性则按照创建的顺序显示。 所谓整数属性 指的是一个可以在不做任何更改的情况下与一个整数进行相互转换的字符串。
非整数属性 如果属性名不是整数那它们就按照创建时的顺序来排序例如
let user {name: John,surname: Smith,
};
user.age 25; // 增加一个// 非整数属性是按照创建的顺序来排列的
for (let prop in user) {console.log(prop); // name, surname, age
}
console.log(Object.keys(user)); //[ name, surname, age ]两者都有 既有整数属性也有非整数属性
let user {name: John,surname: Smith,49: Germany,41: Switzerland,44: Great Britain,1: USA,
};
user.age 25; // 增加一个
user[0] 23; // 增加一个// 既有整数属性也有非整数属性
// 1.整数属性会按照数字顺序排序
// 2.非整数熟悉按照插入顺序
// 3.先输出的是整数属性
for (let prop in user) {console.log(prop); // 0,1,41,44,49,name, surname, age
}
console.log(Object.keys(user)); //[ 0, 1, 41, 44, 49, name, surname, age ]3.默认键
普通对象普通对象继承自 Object.prototype因此默认带有一些预定义的键如 toString、hasOwnProperty。虽然这些键可以被覆盖但在使用时需要注意可能的冲突。 const obj { age: 20 };obj.__proto__.test haha;for (const k in obj) {console.log(k);/* age 自身的test 和原型对象的可枚举键*/}console.log(Object.keys(obj)); // [age]console.log(Object.getPrototypeOf(obj));注意 for…in 循环只会迭代可枚举的非符号属性。从内置构造函数如 Array 和 Object创建的对象会从Array.prototype 和 Object.prototype 继承不可枚举属性例如 Array 的 indexOf() 方法或Object 的 toString() 方法它们在 for…in 循环中不会被访问到。 MapMap 默认不包含任何键。它只包含显式存入的键值对。因此Map 对象不会与任何原型链上的属性冲突。 const map new Map();map.set(name, zs); //自有键map.set(age, 20); //自有键Object.getPrototypeOf(map).test haha; //原型对象的键console.log(map.keys()); //MapIterator {name, age}4.迭代性
普通对象迭代对象的键需要使用 Object.keys()、Object.values() 或 Object.entries()。对象本身并不是可迭代的没有实现 Symbol.iterator 接口。for...in也可以遍历对象
for…in 不能直接遍历 Map 对象。它通常用于遍历普通对象的属性而不是 Map 对象的键值对。 const map new Map();map.set(name, zs); //自有键map.set(age, 20); //自有键for (const key in map) {console.log(key); //没有任何输出}要遍历 Map 对象map是可迭代的使用for...of或者
map.forEach() / map.keys() / map.values() / map.entries()5.序列化
普通对象对象可以使用 JSON.stringify() 进行序列化结果是一个JSON字符串。 MapMap 不能直接通过 JSON.stringify() 进行序列化因为它不是一个普通的对象。如果需要序列化 Map需要先将其转换为数组或对象。
普通对象的序列化 const obj {name: Alice,age: 30,city: New York,};const jsonString JSON.stringify(obj);console.log(jsonString); // {name:Alice,age:30,city:New York}Map 对象的序列化 Map 对象不能直接用 JSON.stringify() 进行序列化。如果你尝试这样做结果会是一个空对象 {}。 const map new Map();map.set(name, Alice);map.set(age, 30);map.set(city, New York);const jsonString JSON.stringify(map);console.log(jsonString); // {}为了正确序列化 Map 对象你需要先将 Map 转换为可以被 JSON.stringify() 识别的格式如数组或对象。
转换为普通对象
const map new Map();
map.set(name, Alice);
map.set(age, 30);
map.set(city, New York);const mapObject Object.fromEntries(map);
const jsonStringFromObject JSON.stringify(mapObject);
console.log(jsonStringFromObject); // {name:Alice,age:30,city:New York}反序列化 对于 Map 对象先将 JSON 字符串转换为数组或对象再转换为 Map。
const map new Map();
map.set(name, Alice);
map.set(age, 30);
map.set(city, New York);// 序列化
const mapObject Object.fromEntries(map);
const jsonStringFromObject JSON.stringify(mapObject);
console.log(jsonStringFromObject); // {name:Alice,age:30,city:New York}// 反序列化
// 1.先将 JSON 字符串转换为数组或对象
const parsedObject JSON.parse(jsonStringFromObject);
// 2.再转换为 Map
const parsedMapFromObject new Map(Object.entries(parsedObject));
console.log(parsedMapFromObject.get(name)); // Alice6.使用场景
普通对象适用于管理少量数据并且键是已知的、简单的字符串或符号的情况下。 Map适用于需要灵活、动态键特别是非字符串键或者需要高效查找和操作大量键值对的场景。
