ES10 中的 Object.fromEntries 语法详解

在 ES10 中，新增了一个 Object.fromEntries 方法，它可以将一个二维数组转换成一个对象。这个方法的出现可以帮助我们更加方便地操作对象。本文将详细介绍 Object.fromEntries 的语法和用法，并提供实际示例代码。

语法

Object.fromEntries 方法的语法如下：

Object.fromEntries(iterable)

其中，iterable 参数可以是一个二维数组，也可以是一个实现了 Symbol.iterator 接口的对象。

用法

我们可以通过 Object.fromEntries 方法将一个二维数组转换成一个对象：

const entries = [
  ['name', '张三'],
  ['age', 18],
  ['gender', '男']
];

const obj = Object.fromEntries(entries);
console.log(obj); // { name: '张三', age: 18, gender: '男' }

我们也可以将一个 Map 对象转换成一个对象：

const map = new Map([
  ['name', '张三'],
  ['age', 18],
  ['gender', '男']
]);

const obj = Object.fromEntries(map);
console.log(obj); // { name: '张三', age: 18, gender: '男' }

实际上，Object.fromEntries 方法是 Object.entries 方法的反向操作。我们可以通过 Object.entries 方法将一个对象转换成一个二维数组，再通过 Object.fromEntries 方法将这个二维数组转换成一个对象：

// javascriptcn.com 代码示例
const obj = {
  name: '张三',
  age: 18,
  gender: '男'
};

const entries = Object.entries(obj);
console.log(entries); // [ [ 'name', '张三' ], [ 'age', 18 ], [ 'gender', '男' ] ]

const newObj = Object.fromEntries(entries);
console.log(newObj); // { name: '张三', age: 18, gender: '男' }

示例代码

我们可以通过 Object.fromEntries 方法实现一些实际的功能，下面是一些示例代码：

1. 将 URL 参数转换成一个对象

我们可以通过 Object.fromEntries 方法将 URL 参数转换成一个对象：

function getParams(url) {
  const searchParams = new URLSearchParams(url.split('?')[1]);
  return Object.fromEntries(searchParams);
}

const url = 'https://example.com/?name=张三&age=18&gender=男';
const params = getParams(url);
console.log(params); // { name: '张三', age: '18', gender: '男' }

2. 将一个对象的属性名和属性值互换

我们可以通过 Object.fromEntries 方法将一个对象的属性名和属性值互换：

// javascriptcn.com 代码示例
function swap(obj) {
  const entries = Object.entries(obj);
  const swappedEntries = entries.map(([key, value]) => [value, key]);
  return Object.fromEntries(swappedEntries);
}

const obj = { name: '张三', age: 18, gender: '男' };
const swappedObj = swap(obj);
console.log(swappedObj); // { '张三': 'name', '18': 'age', '男': 'gender' }

3. 将一个对象的属性名转换成小驼峰命名

我们可以通过 Object.fromEntries 方法将一个对象的属性名转换成小驼峰命名：

// javascriptcn.com 代码示例
function toCamelCase(obj) {
  const entries = Object.entries(obj);
  const camelEntries = entries.map(([key, value]) => [key.replace(/_([a-z])/g, (_, match) => match.toUpperCase()), value]);
  return Object.fromEntries(camelEntries);
}

const obj = { first_name: '张三', last_name: '李四', age: 18, gender: '男' };
const camelObj = toCamelCase(obj);
console.log(camelObj); // { firstName: '张三', lastName: '李四', age: 18, gender: '男' }

总结

Object.fromEntries 是 ES10 中的一个新方法，它可以将一个二维数组转换成一个对象。我们可以通过 Object.fromEntries 方法实现一些实际的功能，如将 URL 参数转换成一个对象、将一个对象的属性名和属性值互换、将一个对象的属性名转换成小驼峰命名等。Object.fromEntries 方法的出现可以帮助我们更加方便地操作对象。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6567e0eed2f5e1655d0b179b