JavaScript 函数从对象中选择属性

在 JavaScript 中，我们经常需要从一个对象中选择几个属性来使用。这种操作非常常见，比如我们需要从接口返回的 JSON 数据中选择一些属性来显示。本文将介绍如何使用函数从对象中选择属性。

简单的方式

我们可以使用 JavaScript 的解构赋值来从对象中选择属性。例如，下面的代码演示如何从 person 对象中选择 name 和 age 属性：

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

const { name, age } = person;

console.log(name); // "John"
console.log(age); // 30

这里我们使用解构赋值将 person 对象中的 name 和 age 属性分别赋值给了 name 和 age 变量。这种方式非常简单，但它有一个明显的缺点：当我们选择的属性比较多时，代码可能会变得冗长。

使用函数选择属性

我们可以编写一个函数来从对象中选择属性。这种方式不仅适用于选择较多的属性，而且可以根据不同的对象和属性来实现更多的定制化。下面是一个简单的函数示例：

function pick(obj, keys) {
  return keys.map(key => key in obj ? {[key]: obj[key]} : {})
             .reduce((res, o) => Object.assign(res, o), {});
}

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

const nameAndAge = pick(person, ['name', 'age']);

console.log(nameAndAge); // {name: "John", age: 30}

这里的 pick 函数接收两个参数：obj 是需要选取属性的对象，keys 是需要选取的属性列表。函数的返回值是一个新的对象，仅包含选取的属性。

在函数中，我们使用了 Array.map 将 keys 中的每个属性转换为一个包含该属性的对象。然后，我们通过 Array.reduce 和 Object.assign 将这些对象合并成一个新的对象。如果属性在 obj 中不存在，我们则返回一个空的对象 {}。这样我们就可以生成一个仅包含选取的属性的新对象了。

这种方式的优点是，可以根据不同的对象和属性进行更多的定制化。比如，我们可以在函数中增加一些判断，处理默认值、过滤空值等等。