如何从JavaScript的BigObject中提取指定键值对赋值给User对象

你原来的写法var User = {id,img,name} = BigObject达不到预期效果——这个赋值表达式的结果是右侧的BigObject，所以User最终还是指向整个大对象；而{id,img,name} = BigObject只是把大对象里的三个属性值赋值给了当前作用域下的id、img、name变量而已。

下面给你几种可行的实现方式：

方法1：解构后手动组装（最直观） #

先通过解构赋值取出需要的属性，再用这些属性创建新的User对象：

const BigObject = {
  "id":"value",
  "img":"value",
  "name":"value",
  "otherData1":"value",
  "otherData2":"value",
  "otherData3":"value",
  "otherData4":"value"
}

// 解构取出目标属性
const { id, img, name } = BigObject;
// 组装成预期的User对象
const User = { id, img, name };

方法2：立即执行函数一行搞定 #

用立即执行箭头函数，在函数参数里解构大对象，直接返回组装好的新对象：

const BigObject = {
  "id":"value",
  "img":"value",
  "name":"value",
  "otherData1":"value",
  "otherData2":"value",
  "otherData3":"value",
  "otherData4":"value"
}

const User = (({ id, img, name }) => ({ id, img, name }))(BigObject);

方法3：封装工具函数（适合多次复用） #

如果需要频繁从不同对象中提取指定属性，可以封装一个通用的pick函数：

const BigObject = {
  "id":"value",
  "img":"value",
  "name":"value",
  "otherData1":"value",
  "otherData2":"value",
  "otherData3":"value",
  "otherData4":"value"
}

// 定义通用提取函数
function pick(obj, keys) {
  return keys.reduce((result, key) => {
    if (obj.hasOwnProperty(key)) {
      result[key] = obj[key];
    }
    return result;
  }, {});
}

// 提取指定属性生成User
const User = pick(BigObject, ['id', 'img', 'name']);

另外注意：你原来的BigObject里有多个同名的otherData属性，这在JavaScript对象中是无效的——后面的属性会直接覆盖前面的，实际开发中要给它们设置不同的键名。

内容的提问来源于stack exchange，提问作者Abd