tickSize d3.js v4 中的源代码

Question

我正在尝试了解 d3.js v4 中的 tickSize 文档：

axis.tickSize([大小])

如果指定了大小，则将内部和外部刻度大小设置为 指定值并返回轴。如果未指定大小， 返回当前的内部刻度大小，默认为 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 中的 0 是错误的，看看下面的几行（undefined 也是错误的，包含用于比较，请参阅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's top answer for conversion strings到数字）。

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

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);