将语句转换为 ES5答案

【问题标题】：Convert a statement to ES5将语句转换为 ES5
【发布时间】：2017-07-25 10:02:24
【问题描述】：

我需要帮助将下面的语句转换为 ES5 语法。 ES5 会是什么？

const { a, b, c = “foo” } = this.props;

【问题讨论】：

var a = this.props.a, b = this.props.b
@rajesh const in ES5...

标签： javascript reactjs ecmascript-6 ecmascript-5

【解决方案1】：

我建议使用显式检查属性c 是否存在于给定对象中。如果没有给出，则使用默认值。

var a = this.props.a,
    b = this.props.b,
    c = this.props.c === undefined ? 'foo' : this.props.c;

其他使用的模式

c = this.props.c || 'foo';

对于给定的虚假值（例如零）不起作用。

您为什么需要检查 undefined（感谢 loganfsmyth 在 cmets 中提及此问题）？

因为undefined 是 ES6 函数中检查 default parameters 的值。
const f = (c = 'foo') => console.log(c);

f();          // 'foo'
f(undefined); // 'foo'
f(0)          // 0

【讨论】：

不需要'c' in this.props吗？
@CodingIntrigue，我不明白这个问题。
in 的左边不是必须是字符串吗？ c in this.props 会产生错误，而不是预期的 true/false。
也许值得注意的是，像这样使用in 与 ES6 代码的行为并不完全相同。该属性可以存在但为undefined，它仍然会在 ES6 中获得默认值。

【解决方案2】：

 var
   a=this.props.a,
   b=this.props.b,
   c=this.props.c||"foo";

对象解构试图在对象中找到同名的属性，所以

 {prop}=obj

等于：

 prop=obj.prop;

默认参数可以通过 Or 运算符轻松实现：

 prop=obj.prop || default;

或者如果你想把 falsys 算作道具，那就是：

 prop=("prop" in obj)?obj["prop"]:default;

【讨论】：

@rajesh 我应该解释什么？由于 OP 知道对象解构的作用，我认为它可以自我解释
@Jonasw 你没有回答 OP。您正在为读者回答。所以解释是必须的。
解释正确但答案错误。您的示例会将 this.props.c 的每个虚假值（如“”或仅 0）设置为默认值。这种行为可能不是故意的。
@jonasw 这并不完全正确。如果您想接受所有虚假值但undefinded。只是想指出这一点；）
我觉得比较常见。对于 React 的这种情况，你可以很容易地想象有人在做 <ThingComponent c={someVar} />。如果someVar 最终成为undefined，那么您的sn-p 将返回undefined 而不是"foo" 默认值，因为该属性存在但具有undefined 值。

【解决方案3】：

我相信它会是：

var a = this.props.a,
    b = this.props.b,
    c = this.props.c || "foo"

至少我希望如此，否则投票会下雨

【讨论】：

那里，默默地投反对票（像往常一样），而其他人同时发布了完全相同的答案并且没有被投反对票......嗯
疯狂世界... :/

【解决方案4】：

实现这一目标的最简单方法是：

var a = this.props.a,
b = this.props.b,
c = this.props.c===undefined?"foo":this.props.c

但更好的方法是只使用 this.props 对象，而不是将其存储在局部变量中。

【讨论】：

c = this.props.c===undefined?"foo":this.props.c 可以简单地重写c = this.props.c || "foo"（没有投票）
这不正确！它会将所有虚假值（如 0 和“”）转换为自 ""||"foo" == "foo" 以来的默认值。这种行为可能不是故意的。