javascript - tickSize d3.js v4 中的源代码

Question

我试图理解 d3.js v4 中的 tickSize 文档:

axis.tickSize([size]) <>

If size is specified, sets the inner and outer tick size to the specified value and returns the axis. If size is not specified, returns the current inner tick size, which defaults to 6.

当我检查源代码时，我得到了这个:

axis.tickSize = function(_) {
    return arguments.length ? (tickSizeInner = tickSizeOuter = +_, axis) : tickSizeInner;
  };

我不太明白这是怎么回事。

• _ 作为函数的参数在做什么？
• 这部分代码 (tickSizeInner = tickSizeOuter = +_, axis) 在做什么？

来源:https://github.com/d3/d3-axis/blob/master/src/axis.js#L140

Answer 1

如果没有为该方法提供参数，该方法将返回 tickSizeInner 的当前值。或者，如果提供参数，它将设置 tickSizeInner 和 tickSizeOuter 变量。

这是在这一行中完成的:

return arguments.length ? (tickSizeInner = tickSizeOuter = +_, axis) : tickSizeInner;

这是 ternary operator 的用途这是一个速记方法:

if(arguments.length)  {
    tickSizeInner = tickSizeOuter = +_; return axis 
}
else {
   return tickSizeInner; 
}

另请参阅 this question, King's answer或 this doc关于带三元运算的逗号。

这是功能逻辑的精简版:

function tick(_) {
    return arguments.length ? _ : 6;
  };
  
console.log(tick())
console.log(tick(4))

这种方法的美妙之处在于您的 getter 和 setter 方法是一样的。

请注意 javascript 中的零是错误的，请看下面的行(未定义也是错误的，包含用于比较，请参阅 also this ):

if(0) { console.log("true"); }
else { console.log("false"); }

if(1) { console.log("true"); }
else { console.log("false"); }

if(undefined){ console.log("true"); }
else { console.log("false"); }

因此，如果未传递任何参数，则返回当前刻度大小。如果传递了一个参数(下划线是一个有效的变量名，参见 this question )，那么它被强制为一个数字(+_)并设置为等于刻度大小(参见 this question '这是将字符串转换为数字的最佳答案)。

这是一个强制变量为整数的例子:

var a = "1";
var b = "2";

console.log(a+b);

a = +a;
b = +b;

console.log(a+b);

最后，您可以按照代码中显示的方式为多个变量赋值。例如:

var a = 0;
var b = 0;

a = b = 5;

console.log(a);
console.log(b);