x 的变量在 transit.js 中不起作用答案

【问题标题】：Variable in place for x does't work in transit.jsx 的变量在 transit.js 中不起作用
【发布时间】：2016-01-27 11:46:35
【问题描述】：

我正在使用 transit.js 并且我有以下代码行：

var axis = Math.floor(Math.random() * 2);
axis = genXY(axis);

if($(this).hasClass(btn_className)) {       
    $(this).transition({ axis : '100px' } , function(){
        $(this).addClass('active');
        $(this).transition({ axis :  0 , duration : 2000 });
    })  

}

genXY函数如下：

var xy = ['x' , 'y'];

function genXY(no) {
    return xy[no];
}

现在我对单个元素（在我的 devTools 中）进行了以下简单测试：

var axis = x;
$('.gridbox .large').eq(2).transition({ x : "100px" });

以上代码行完美运行，即它通过100px 转换元素，但是现在如果我用 axis 替换 x ，这实际上是一个确实是 x 的变量，现在代码如下所示：

var axis = x;
$('.gridbox .large').eq(2).transition({ axis : "100px" });

以上行不起作用。为什么它现在起作用了？毕竟轴是 x 本身，有人可以解释吗？

【问题讨论】：

var axis = x; 在您的代码中计算为var axis = undefined。我相信您的意思是输入var axis = "x";。这对于为什么不能使用{ axis : "100px" } 替换{ x : "100px" } 无关紧要，但我想提及它以帮助稍后进行调试。

标签： javascript jquery jquery-plugins

【解决方案1】：

实际上，您正在为一个无法这样做的对象设置一个键：

var axis = x;
$('.gridbox .large').eq(2)
             .transition({ axis : "100px" }); // <----see the object { axis : "100px" }

如果您尝试在对象字面量中放置一个 var 名称来代替 key，这不会引用它的值，但它会在对象中设置一个新的 key:value。在 ES5 及更早版本中，您不能将变量用作对象文字内的属性名称。

那么，可以做什么：

var obj   = {}, // a new object creation
    axis  = x;  // a reference to the x

obj[axis] = '100px'; // now it results in {x:"100px"}

$('.gridbox .large').eq(2)
             .transition(obj); // <---put the object here

【讨论】：

感谢精彩的解释，但我还是不明白！，你能把它分解一下吗？我的意思是这部分if you try putting a var name in place of key in the object literal, that doesn't refer to the value of it but it sets a new key:value in the object. In ES5 and earlier, you cannot use a variable as a property name inside an object literal.
@Jai axis = x; 在你的代码中应该是 axis = 'x';
@DaveF 你是对的，但这可能是另一个变量引用了一些其他值，但肯定必须是"x"。

【解决方案2】：

这两行意思相同（引号是可选的）：

var obj = { x: '100px' };
var obj = { 'x': '100px' };

所以在下一行中，您并没有真正使用变量，而是定义了一个属性名称 x。

$('.gridbox .large').eq(2).transition({ x : "100px" });

要解决您的问题，您可以定义一个空对象并为其添加动态属性名称，然后将该对象作为参数传递。

var axis = 'x';
var obj = {};
obj[ axis ] = '100px';
$('.gridbox .large').eq(2).transition(obj);

另请注意，您必须使用[] 语法来添加变量（动态）属性名称，而不是点语法。以下示例将添加一个名为 axis 而不是 x 的属性。

obj.axis = '100px';

【讨论】：

【解决方案3】：

ECMAScript 是 JavaScript 实现的语言规范。

如果您查看the 5th edition of the ECMAScript standard 的“11.1.5 对象初始化器”部分，它定义了用于创建对象的对象文字语法。

我们来看看{ axis: "100px" }是如何按照规范求值的：

ObjectLiteral => { PropertyNameAndValueList } => { PropertyName : AssignmentExpression } => { IdentifierName : AssignmentExpression }

对于 IdentifierName，它声明：“返回包含与 IdentifierName 相同的字符序列的字符串值”。换句话说，{ axis: "100px" } 与{ "axis": "100px" } 相同，与{ x: "100px" } 和{ "x": "100px" } 不同。换句话说，对象字面量中未加引号的属性名称成为名称的字符串版本，而不是变量值。这就是为什么不能用{ axis: "100px" } 替换{ x: "100px" } 的原因，因为它们不一样。

建议您使用以下代码：

var axis = "x";
var obj = {};
obj[ axis ] = "100px";

这是为了使用'axis'的变量值，因为obj[axis] = "100px"与obj["x"] = "100px"相同，与{ x: "100px" }和{ "x": "100px" }相同。

【讨论】：