随着 JavaScript 的不断发展,新的 ECMAScript 规范也在不断出现。ES2019 中引入了一个新方法 Object.fromEntries(),它可以将一个由键值对组成的数组转化成新的对象。
Object.fromEntries() 的基本用法
Object.fromEntries() 方法接收一个由键值对组成的数组,然后将其转化成新的对象。这个方法通常用于在项目中需要动态生成对象时使用,从而避免手动将键值对挨个添加到对象中。其基本语法如下:
const arr = [['name', 'Tom'], ['age', 25], ['gender', 'male']]; const obj = Object.fromEntries(arr); console.log(obj); // { name: 'Tom', age: 25, gender: 'male' }
如上例子,将由键值对组成的数组 arr 转化成对象 obj,可以得到一个包含 name、age 和 gender 三个属性的新对象。
Object.fromEntries() 的实际应用
实现对象的浅拷贝
在某些场景下,开发者有时需要对对象进行浅复制并剥离不必要的属性,这时候 Object.fromEntries() 方法可以令这一过程更加方便。以下是一个简单的示例,用来演示如何使用 Object.fromEntries() 复制对象:
const original = { name: 'Tom', age: 25, gender: 'male' }; const { name, ...rest } = original; const copy = Object.fromEntries(Object.entries(rest)); console.log(copy); // { age: 25, gender: 'male' }
在上述示例中,我们首先声明了一个对象 original。然后我们使用解构赋值语法将对象 original 中的 name 属性赋值到变量名 name 中,并将其他所有属性赋值给变量名 rest 中。接下来,我们将 rest 对象拆分为由键值对组成的数组,然后利用 Object.fromEntries() 方法创建一个新的对象 copy,其中仅包含 age 和 gender 属性。
将 Map 转化为对象
在 JavaScript 中,Map (或 ES6 中新增的 WeakMap)常用于存储键值对,而 Object.fromEntries() 方法可以将 Map 转化为对象。以下是一个简单的示例,用于演示如何将 Map 转化为对象:
const map = new Map([['name', 'Tom'], ['age', 25], ['gender', 'male']]); const obj = Object.fromEntries(map); console.log(obj); // { name: 'Tom', age: 25, gender: 'male' }
如上述示例,将 Map 转化为对象时,Object.fromEntries() 方法可以将 Map 中的键值对转化为对象的属性和值。
过滤对象的特定属性
有时候,在项目中我们需要过滤对象的属性并创建一个新的对象。Object.fromEntries() 方法可以帮助我们做到这一点,以下是一个简单的示例:
const original = { name: 'Tom', age: 25, gender: 'male' }; const desiredProps = ['name', 'gender']; const copy = Object.fromEntries(Object.entries(original) .filter(entry => desiredProps.includes(entry[0]))); console.log(copy); // { name: 'Tom', gender: 'male' }
如上述示例,为了创建一个新对象 copy,我们首先定义了一个包含需要的属性名称的数组,即 desiredProps。然后,我们使用 Object.entries() 将原始对象转化为由键值对组成的数组。接下来,我们过滤这个数组并仅选出我们所需的键值对,然后使用 Object.fromEntries() 方法创建新的对象 copy。
总结
在本文中,我们探讨了 Object.fromEntries() 方法的基本用法以及实际应用场景。它不仅可以帮助我们生成新的对象,还可以用在许多具体的场景和复杂的问题中。正因为如此,开发者既要掌握该方法的基本语法,也需要深入了解其实际的应用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64cd27dc1519ea946c10073d