使用地图传播语法不起作用答案

【问题标题】：spread syntax with map doesn't work使用地图传播语法不起作用
【发布时间】：2017-06-09 07:32:54
【问题描述】：

data.map(obj => 
        {person_name: obj.user.name,
        ...obj})

为什么上面的代码失败了？

我的数据是这样的

[{user:{name:'hello'},age:1},{user:{name:'world'},age:1,{user:{name:'another_name'},age:1]

我想从嵌套的 obj 中“拉”出 obj.user.name。

【问题讨论】：

...obj 在做什么？请同时添加想要的结果。
@NinaScholz 其他财产？
请注意，... 是一个punctuator，用于许多不同的上下文（例如spread element、assignment rest element），它不是运算符。
您应该已经解释了失败的原因。我们无法判断您是否知道您正在使用实验性功能并相应地设置了构建链，或者这是否是问题所在，

标签： javascript ecmascript-6

【解决方案1】：

试试这个：

data.map(obj => ({person_name: obj.user.name,...obj}))

对象开头的{ 被解释为块的开头而不是对象。

您可以在 MDN 上阅读更多相关信息

编辑： 正如 Pawel 所提到的，对对象使用扩展运算符不适用于纯 es6，您需要使用特定的转换，如本提案中所示：https://github.com/tc39/proposal-object-rest-spread

【讨论】：

@pawel 我假设他正在使用为 es7 提出的对象扩展变换进行编译。否则问题不会是特定于地图的。

【解决方案2】：

您不能像这样传播对象（将SyntaxError 抛出...。

我会用Object.assign写它：

data.map(obj => Object.assign({person_name: obj.user.name}, obj ));

【讨论】：

您使用哪些预设进行转译？带有 es2017 的 babeljs 仍然抛出语法错误
这不是 ES2017 @pawel，对象 rest/spread 是一个提议，它不是语言的一部分：github.com/tc39/proposals 如果你想成为，这是你需要使用的 babel 转换能够转译：babeljs.io/docs/plugins/transform-object-rest-spread
@DanCouper 我知道，这就是我要求提供详细信息的原因。对我来说，这是一个语法错误，直到它符合官方语言规范（或者，如果使用实验性功能，应该在问题中说明）。

【解决方案3】：

使用babel，您可以使用rest syntax (parameters) ... 直接获取对象的其余部分并存储名称属性。

var data = [{ user: { name: 'hello' }, age: 1 }, { user: { name: 'world' }, age: 1 }, { user: { name: 'another_name' }, age: 1 }];

console.log(data.map(({ user, ...obj }) => Object.assign(obj, { person_name: user.name })));

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

你这里好像没有使用rest参数？
@FelixKling，...obj 算不算？
因为它在对象解构中，所以它是一个“休息属性”。 Rest 参数是function foo(...bar) {}，它收集传递给foo 的所有参数。在您的示例中，回调将始终只处理一个参数。
@FelixKling，MDN 上的描述有点隐蔽，但我改了链接。

【解决方案4】：

首先，如果要使用箭头函数创建对象，则必须将花括号括在括号中：

data.map(obj => ({ foo: 'bar' }));

否则，JS 认为花括号是函数体，就会出现语法错误。

其次，您不能在对象字面量中使用扩展运算符。您只能在调用函数、使用数组字面量或解构时使用它。

【讨论】：

【解决方案5】：

可以使用Array.prototype.map()，直接返回想要的对象：

const data = [{user: {name: 'hello'},age: 1}, {user: {name: 'world'},age: 1},{user: {name: 'another_name'},age: 1}];
const result = data.map(obj => {
  return {
    person_name: obj.user.name,
    age: obj.age
  };
});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：