ES6+ Object.entries()
1. 前言
前两节我们学习了获取可枚举对象上属性和属性值作为一个数组的方法 Object.keys()
和 Object.values()
,但是我们想把键值对同时获取到怎么办呢?这时 ES6 提供了 Object.entries()
方法用于获取可枚举对象上的属性和值的数组。
2. 方法详情
2.1 语法使用
Object.entries(obj);
参数 | 描述 |
---|---|
obj | 可以返回其枚举自身属性和键的对象 |
2.2 基本使用
var obj = {a: , b: , c: };
console.log(Object.entries(obj))
// [['a', 1], ['b', 3], ['c', 3]]
如果传入的参数是数字或布尔值时,则返回一个空数组
Object.entries() // []
Object.entries(false) // []
对 values()
返回数组的顺序,会按照属性的数值大小,从小到大排序。
var obj = {: 'a', : 'b', : 'c'};
console.log(Object.entries(obj))
// [["1", "b"], ["7", "c"], ["10", "a"]]
values()
传入的对象如果是一个字符串时,则会把字符拆成数组中的单个项,如下:
console.log(Object.entries('abc'))
// [["0", "a"], ["1", "b"], ["2", "c"]]
3. 案例
3.1 用于 for…of 循环获取对象上的键值对
Object.entries()
在开发中有很好的用途,可以同时获取对象的键值对进行使用。
其实像使用 Object.keys()
、 Object.values()
和 Object.entries()
都是为了遍历对象,然后对对象中的元素进行操作,下面我们来看一下 Object.entries()
在 for 循环中的使用。
var obj = { name: 'imooc', age: , lesson: 'ES6 Wiki' };
for (let i = ; i < Object.entries(obj).length; i++) {
var [key, value] = Object.entries(obj)[i]
console.log(key, value);
}
在下面的章节中我们会学到 for...of
循环,它的功能强大,能遍历可迭代的对象,可以替代 for
、 forEach
等循环,并具有扩展性。
let obj = { name: 'imooc', age: , lesson: 'ES6 Wiki' };
for (let [key, value] of Object.entries(obj)) {
console.log(`${key}: ${value}`);
}
// name: imooc
// age: 7,
// lesson: ES6 Wiki
上面的代码中,我们不用在 for 循环中处理每一项,可以在循环时直接解构出 Object.entries()
的值。这样就可以遍历出对象的键值对。
3.2 把对象转为 Map 结构
ES6 提供了新的 Map
数据结构,它类似于对象,也是键值对的集合,但是 Map
的键可以是任意类型(原始类型和对象类型),并且提供了 set
、 get
方法去设置和获取对象的值。如果想把一个对象转为 Map
结构,可以借助 Object.entries()
来实现。
var obj = { name: 'imooc', age: };
var map = new Map(Object.entries(obj));
console.log(map) // Map(2) {"name" => "imooc", "age" => 7}
console.log(map.get(name)) // imooc
4. Object.fromEntries()
Object.fromEntries()
是 Object.entries()
的反转函数,这样理解起来就比较轻松。它接收的是一个可迭代的对象,类似 Array
、Map
或者其它实现了可迭代协议的对象,结果返回一个新的对象。
4.1 数组转化为对象
将一个带有键值对的数组转化成对象。
var arr = [ ['a', '0'], ['b', '1'], ['c', '2'] ];
var obj = Object.fromEntries(arr);
console.log(obj); // {a: "0", b: "1", c: "2"}
4.2 Map 转化为对象
var map = new Map();
map.set('name', 'imooc');
map.set('age', );
console.log(map); // Map(2) {"name" => "imooc", "age" => 7}
var obj = Object.fromEntries(map);
console.log(obj); // {name: "imooc", age: 7}