ES7 中 Object.fromEntries/Object.assign 方法在对象合并中的应用-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，对象合并是一种非常常见的操作。在 ES7 中，Object.fromEntries 和 Object.assign 这两种方法的出现，极大地便利了对象的合并操作。本文将详细介绍这两个方法的使用方法以及在对象合并中的应用，并给出实用的示例代码，帮助读者深入了解。

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 转化成一个包含三个属性的对象，并输出该对象。

同样，Object.fromEntries 也可以与其他方法配合使用。例如，我们可以将 Object.entries 和 Array.filter 一起使用，从而获取对象中符合条件的属性，代码如下：

const obj = { name: 'Tom', age: 25, gender: 'male', married: false }
const arr = Object.entries(obj).filter(([key, value]) => value !== false)
const filteredObj = Object.fromEntries(arr)
console.log(filteredObj) // { name: "Tom", age: 25, gender: "male" }

代码中，我们先将 obj 对象转化为一个键值对数组，再用 Array.filter 方法筛选出属性值不为 false 的项，最后再将结果转化为一个新对象 filteredObj。

Object.assign

Object.assign 方法可以将多个对象的属性合并到一个目标对象中去。它的第一个参数是目标对象，后面的参数都是源对象，将它们的属性合并到目标对象中。

例如，下面的代码：

const targetObj = { name: 'Tom', age: 25 }
const sourceObj1 = { gender: 'male' }
const sourceObj2 = { married: false }
const mergedObj = Object.assign(targetObj, sourceObj1, sourceObj2)
console.log(mergedObj) // { name: "Tom", age: 25, gender: "male", married: false }

可以将三个对象的属性合并到目标对象 mergedObj 中。

但需要注意的是，Object.assign 方法合并的是对象属性的值，而不是复制的引用。当源对象与目标对象中有同名属性时，后者的属性值会被覆盖。

例如，下面的代码：

const targetObj = { name: 'Tom', age: 25, gender: 'male' }
const sourceObj = { age: 26, married: false }
const mergedObj = Object.assign(targetObj, sourceObj)
console.log(mergedObj) // { name: "Tom", age: 26, gender: "male", married: false }

可以看到，源对象中的 age 属性值覆盖了目标对象中的 age 属性值。

Object.fromEntries 和 Object.assign 在对象合并中的应用

当我们需要将两个对象进行合并时，可以使用 Object.assign 方法。例如，下面的代码：

const obj1 = { name: 'Tom', age: 25 }
const obj2 = { gender: 'male', married: false }
const mergedObj = Object.assign({}, obj1, obj2)
console.log(mergedObj) // { name: "Tom", age: 25, gender: "male", married: false }

我们将一个空对象作为目标对象传给 Object.assign 方法，从而得到一个两个源对象合并后的新对象 mergedObj。

而当我们需要从一组数组中获取一些属性值，并转化为一个新的对象时，可以使用 Object.fromEntries 方法。例如，下面的代码：

const arr = [
  { key: 'name', value: 'Tom'},
  { key: 'age', value: 25 },
  { key: 'gender', value: 'male' },
]
const obj = Object.fromEntries(arr.map(({key, value}) => [key, value]))
console.log(obj) // { name: "Tom", age: 25, gender: "male" }

我们首先需要将数组转化为一个包含键值对的数组，再使用 Object.fromEntries 方法将其转化为一个新的对象 obj。

总结

本文详细介绍了 ES7 中 Object.fromEntries/Object.assign 方法在对象合并中的应用。Object.fromEntries 可以将键值对数组转化为一个对象，Object.assign 可以将多个对象的属性合并到一个目标对象中去。使用这两个方法，我们可以轻松地处理对象的合并操作，提高开发效率。希望本文的实用示例代码以及深入的讲解，能够对前端开发者有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64de02e5f6b2d6eab394e142