深入浅出讲解ES6的解构(4)

// Note: this DOES work! function getTonyStark(avengers){ const { ironMan: { realName } } = avengers; return realName; } const avengers = { ironMan: { realName: 'Tony Stark' } }; const tonyStark = getTonyStark(avengers); // tonyStark = 'Tony Stark' // Output tonyStark: tonyStark;

这种把赋值和返回分成两行代码的做法实在惹人厌烦，代码丑陋，也显得没必要。但很不幸，JavaScript就是这样工作的----你必须先把解构的值赋给一个变量，然后再把它返回，两步必须分开做。

但是，没有说我们只是说分开做，并没有说一定要摆成两行代码，所以像下面这样写成一行，也是能达到预期效果的：

function getTonyStark(avengers){ return ({ ironMan: { realName } } = avengers) && realName; } const avengers = { ironMan: { realName: 'Tony Stark' } }; const tonyStark = getTonyStark(avengers); // tonyStark = 'Tony Stark' // Output tonyStark: tonyStark;

由于JavaScript的 _short-circuit_ 逻辑操作符 (&& and ||) 会基于第一个操作数的值来返回第二个操作数的值，所以这种写法能够达到预期效果。这里，第一个操作数是解构赋值表达式，把值赋给 realName。而 realName 也就是第二个操作数，所以它的值最终被返回。

这样做不是最佳的，但是能实现。在追求代码简短的同时，一定要注意代码的可读性。

总结
本文深入讲解了 解构赋值 的主要原则。解构不仅能减少你的代码量，还能从根本上改变你的编码方式。用的越多，你就会发现越多塑造数据和函数的方式，这些实现方式在过去几乎是不可能的。希望本文对大家学习ES6有所帮助。

您可能感兴趣的文章: