有人可以解释一下这个 JavaScript 代码吗?

Can someone explain this JavaScript code please?

提问人:Ioannis Angelopoulos 提问时间:3/5/2022 最后编辑:Peter SeligerIoannis Angelopoulos 更新时间:3/5/2022 访问量:135

问:

我是 JavaScript 开发的初学者,如果有人能帮我解释这段代码,我将有义务。

m = function () {
 let t = e.getCookie("cli-analytics"),
     a = e.getCookie("cli-advertisement"),
     r = e.getCookie("CLI");
 return !(!t && !a) && { analytics: "yes" === t, ads: "yes" === a, visitorHasChosen: !!r };
}

我可以理解变量 m 的函数赋值和 cookie 读取,但我很难理解返回的实际作用(返回一个带有复杂逻辑 NOT 的对象 ANDED?在对象内部,为属性分配了双 NOT?)。 顺便问一下,这是好的编程实践/写作吗?

谢谢大家

JavaScript 强制转换 返回值 boolean-logic boolean-expression

评论

4赞 Ivar 3/5/2022
"顺便说一句,这是好的编程实践/写作吗?不。看起来这段代码已被缩小,然后再次重新格式化。
1赞 lionrocker221 3/5/2022
应用德摩根定律将第一个连词操作数简化为 ,使整个表达式 ,即如果存在或为真,则返回对象。顺便说一句,转换为布尔值(t || a)(t || a) && { analytics: "yes" === t, ads: "yes" === a, visitorHasChosen: !!r }ta!!rr

答:

0赞 user16763075 3/5/2022 #1

如果满足此条件,则返回!(!t && !a){ analytics: "yes" === t, ads: "yes" === a, visitorHasChosen: !!r }

0赞 Kaveh Karami 3/5/2022 #2

条件:

如果其中一个 or 具有 falsy 值,或者它们两个都具有 falsy 值,则返回taobject

对象:

键的值是布尔类型,因为比较 (===) 左右它会检查是否等于“yes”的值,那么 的值必须是 否则,它也发生在!!tanalyticstruefalseads

!!rin 是 Eqaul 到visitorHasChosenBoolean(r)

1赞 Peter Seliger 3/5/2022 #3

如前所述,代码首先被缩小,然后再次漂亮。

因此,人们可以仅从方法的“说话”字符串值来理解代码的意图。从那里,从后面的缩写变量名 ,人们可以想出自己有意义的变量名,并用后者替换前者。getCookietar

然后,如前所述,人们确实将名称替换和德摩根定律应用于以下表达式......

!(!t && !a)
  1. !(!analyticsValue && !advertisementValue)

    • ...否定将一个值转换为真正的布尔值,与该值本身的真实/虚假表示相反......例如 , , .!0 === true!'' === true!{} === false
  2. (!!analyticsValue || !!advertisementValue)

    • ...双重否定将一个值转换为该值自己的真实/虚假表示的真实布尔值......例如 , , .!!0 === false!!'' === false!!{} === true
  3. (analyticsValue || advertisementValue)

    • ...两个值的布尔运算符通过两个值的真实/虚假表示来验证表达式,但返回实际值......例如,...但。(0 || 1) === 1(2 || '') === 2(2 && '') === ''(2 && 3) === 3('' && 3) === ''

...哪个阅读...“如果存在任何一个值(为真)”2)

...而对于......“如果任何一个值都是真实的”。3)

由于对于以下还原的示例代码,仍然不清楚它来自哪里以及它的含义/表示什么,因此该示例假定一个自定义 cookie,它被视为函数的唯一参数......estorage

/*
 * @returns {Object|false}
 *  either returns an object which features cookie values
 *  or returns the `false` boolean value.
 */
function getCliCookieValue(storage) {

  const analyticsValue = storage.getCookie('cli-analytics');
  const advertisementValue = storage.getCookie('cli-advertisement');

  // instead of ...
  return (!!analyticsValue || !!advertisementValue) && {

    analytics: 'yes' === analyticsValue,
    ads: 'yes' === advertisementValue,
    visitorHasChosen: !!storage.getCookie('CLI'),
  };

  // // ... one might consider ...
  // /*
  //  * @returns {Object|null}
  //  *  either returns an object which features cookie values
  //  *  or returns the `null` value.
  //  */
  // return (!!analyticsValue || !!advertisementValue) ? {
  // 
  //   analytics: 'yes' === analyticsValue,
  //   ads: 'yes' === advertisementValue,
  //   visitorHasChosen: !!storage.getCookie('CLI'),
  // 
  // } : null;
}

可以将上述恢复的函数重写为更具表现力/更直接的函数,但返回值的计算过程并不完全遵循原始值的计算过程,因此与原始实现相比,虚假中间值的返回值可能会有所不同。

/*
 * @returns {Object|false}
 *  either returns an object which features cookie values
 *  or returns the `false` boolean value.
 */
function getCliCookieValue(storage) {

  const isAnalytics = ('yes' === storage.getCookie('cli-analytics'));
  const isAdvertisement = ('yes' === storage.getCookie('cli-advertisement'));

  // instead of ...
  return (isAnalytics || isAdvertisement) && {

    analytics: isAnalytics,
    ads: isAdvertisement,
    visitorHasChosen: !!storage.getCookie('CLI'),
  };

  // // ... one might consider ...
  // /*
  //  * @returns {Object|null}
  //  *  either returns an object which features cookie values
  //  *  or returns the `null` value.
  //  */
  // return (isAnalytics || isAdvertisement) ? {
  // 
  //   analytics: isAnalytics,
  //   ads: isAdvertisement,
  //   visitorHasChosen: !!storage.getCookie('CLI'),
  // 
  // } : null;
}