解构嵌套对象作为函数参数

Question

在ES6中，我们可以这样做：

let myFunc = ({name}) => {
  console.log(name)
}

myFunc({name:'fred'}) // => logs 'fred'

但是如何处理像这样的嵌套属性呢：

myFunc({event:{target:{name:'fred'}}}) // => I want it to log 'fred'

如果要记录“fred”，myFunc应该是什么样子？

我无法更改传入的对象。我希望使用解构或其他适合的ES6方法来实现此目的。

- danday74

---

你知道 name 的结构吗？或者你想记录所有的值吗？ - Adam Paxton

对象结构如下所示... event.target.name ... 我只想使用 ES6 解构记录 event.target.name 的值，如果可能的话。 - danday74

Answer 1

你可以简单地像这样做:

const myFunc = ({event: {target: {name}}}) => {
  console.log(name)
}

myFunc({event: {target: {name: 'fred'}}})

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

这里是另一种实现，具有两个输入参数，但第二个参数完全是可选的：

const myFunc = (
      {name: name},
      {event: {target: {name: eventTargetName = ''} = ''} = ''} = ''
    ) => {
      console.log(name, eventTargetName)
    }

myFunc({name:'fred'})
myFunc({name:'papi'}, {event: {target: {name: 'fredo'}}})

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

- john

Answer 2

试试这个：

let myFunc = ({ event: { target: { name } } }) => {
  console.log(name);
};

myFunc({ event: { target: { name:'fred' } } }); // => logs 'fred'

请参见MDN上的示例。

- Michał Perłakowski

Answer 3

你可以做：

let myFunc = ( obj ) => {
    console.log(obj.event.target.name);
};

myFunc({ event: { target: { name: 'fred' } } });

或者：

let myFunc = ( {event: {target: { name } } } ) => {
    console.log(name);
};

myFunc({ event: { target: { name: 'fred' } } });

- Adam Paxton

---

OP要求使用解构或其他ES6方法来解决问题。 - Michał Perłakowski