如何用ES6更简洁地从深度嵌套对象提取属性生成扁平对象？

当然有更贴合你需求的写法！既然你偏爱第一种写法的直观清晰，又想避免重复书写state.currentUser.obj这个长路径，这里有几个实用的方案供你选择：

方案1：提前缓存目标对象（最贴近你的习惯） #

先把嵌套的目标对象存到一个短变量里，之后直接用这个变量访问属性，完美保留你喜欢的键值对写法，同时消除重复：

const mapStateToProps = (state) => {
  const userObj = state.currentUser.obj;
  return {
    firstName: userObj.firstName,
    lastName: userObj.lastName,
    email: userObj.email
  };
};

这个写法的好处是可读性拉满，一眼就能看出来每个属性对应的来源，同时避免了重复的长路径引用。

方案2：解构赋值+简写返回（更紧凑） #

如果想让代码更紧凑，也可以直接解构目标对象的属性，再利用对象字面量简写返回，比你之前的方式二更简洁：

const mapStateToProps = (state) => {
  const { firstName, lastName, email } = state.currentUser.obj;
  return { firstName, lastName, email };
};

甚至可以压缩成一行（不过可读性会稍降，不推荐在属性多的时候用）：

const mapStateToProps = state => ({ firstName, lastName, email } = state.currentUser.obj, { firstName, lastName, email });

方案3：复用工具函数（适合多处提取场景） #

如果你的项目里经常需要从嵌套对象中提取指定属性，可以封装一个小工具函数，后续复用会非常方便：

// 工具函数：从对象中提取指定属性并返回扁平对象
const pickProperties = (sourceObj, propNames) => {
  return propNames.reduce((result, prop) => {
    result[prop] = sourceObj[prop];
    return result;
  }, {});
};

// 使用示例
const mapStateToProps = (state) => {
  return pickProperties(state.currentUser.obj, ['firstName', 'lastName', 'email']);
};

后续如果要新增提取的属性，只需要在数组里添加属性名即可，不用修改返回的对象结构，非常高效。

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