JavaScript中你不知道的ies⽤法
⽬录
前⾔
1. 使⽤ f 遍历普通对象
2. 普通对象与 Map 对象相互转换
总结
参考
前⾔
平时我们经常会⽤到 Object 类上的静态⽅法，例如 Object.keys 、Object.values 、Object.assign 等等，但可能很少⽤到ies 这个⽅法，这篇⽂章就来讲解 ies ⽅法的两个⼩技巧。
作⽤
⽰例
原生js和js的区别
const obj = { foo: 'bar', baz: 42 };
console.ies(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.ies(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.ies(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
// getFoo is property which isn't enumerable
const myObj = ate({}, { getFoo: { value() { return this.foo; } } });
myObj.foo = 'bar';
console.ies(myObj)); // [ ['foo', 'bar'] ]
// non-object argument will be coerced to an object
console.ies('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] ies(obj)) {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}
// Or, using array extras
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
1. 使⽤ f 遍历普通对象
很多初学前端的⼩伙伴可能都写过下⾯这个代码：
let obj = {
a: 1,
b: 2
}
for (let value of obj) {
// ...
}
但是运⾏⼀下就发现，哦吼，报错了：
Uncaught TypeError: obj is not iterable
于是乎，遍历普通对象就变成了清⼀⾊的 in 遍历。但由于 in 不光会遍历对象的⾃有属性，还会遍历到对象原型上，因此我们在使⽤的时候还需要加⼀个过滤，例如：
for (let key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
// ...
}
}
可以看到这样写很不优雅。之所以普通对象不能⽤ f 遍历，是因为普通对象没有实现 iterator 接⼝（关于 JS 的迭代器会专门写⼀篇⽂章讲解）。⽽ JS 数组是实现了 iterator 接⼝的，因此通过 ies 得到的键值对数组就可以使⽤ f 遍历：
for (let [key, value] ies(obj)) {
// ...
}
2. 普通对象与 Map 对象相互转换
看到项⽬中将普通对象转为 Map 对象，还在使⽤ in 遍历：
let obj = {
a: 1,
b: 2
}
let map = new Map();
for (let key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
map.set(key, obj[key]);
}
}
实际上 Map 构造器可以接受⼀个键值对数组初始化，这就意味着可以使⽤ ies 将普通对象转为 Map 对象：
let map = new ies(obj));
那么 Map 对象如何转回普通对象呢？还使⽤遍历吗？不需要，可以使⽤ Object.fromEntries 静态⽅法来转换：
let obj = Object.fromEntries(map);
说到这⾥，很多⼩伙伴可能还是没搞清楚普通对象、键值对数组、Map 对象的转换关系，我⽤⼀张图
总结⼀下：
总结
到此这篇关于JavaScript中你不知道的ies⽤法的⽂章就介绍到这了，更多相关ies⽤法内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
参考
Map() 构造函数 - MDN ⽂档

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。