在 JavaScript 中的对象中使用短路 ( || )

Question

此代码块采用 scored 属性的值并将它们作为键放入 duplication 对象中，并使用|| 运算符。我知道 || 运算符将 return 第一个真实值或最后一个值，如果所有值都是假的，但是，我不明白 duplication[x]++ ++ sign 究竟是做什么的？以及为什么我们将 (duplication[x]=1) 放在括号

之间

const game = {
  score: "4:0",
  scored: ["Lewandowski", "Gnarby", "Lewandowski", "Hummels"],
}; 


const duplication = {};
for (let x of game.scored) {
 duplication[x]++ || (duplication[x]=1) // I'm confused in this line
}
 
console.log(duplication);

Answer 1

让我们看看这条线上发生了什么：

duplication[x]++ || (duplication[x]=1)

duplication[x]++ ，首先 duplication[x] 它将检查 duplication 是否有任何值为 x，如果是则它将执行 duplication[x]++ 否则移动到 or 条件
的其他部分将是未定义的
duplication[x]=1，这是一个简单的赋值，它将赋值为 1，duplication[x]，如果 duplication 对象中不存在，这将创建一个键

现在，如果您运行下面的脚本并检查每个循环的控制台日志，它会让您清楚地知道实际发生了什么。

const game = {
  score: "4:0",
  scored: ["Lewandowski", "Gnarby", "Lewandowski", "Hummels"],
}; 


const duplication = {};
let index = 0;

for (let x of game.scored) {

  console.log( `INDEX : ${index} ` , x , duplication[x] ? 'FOUND , INCREMENT CURRENT VALUE WITH ++' : 'NOT FOUND, SO ASSIGN VALUE 1' );
  duplication[x]++ || (duplication[x]=1)
  console.log( `INDEX : ${index} \n` , duplication);
  index++;

}
 
console.log( 'FINAL OBJECT \n' , duplication);

Answer 2

非描述性的变量名并不能真正帮助解释这种情况。让我们从使用更具描述性的变量名称重写代码开始。

const game = {
  score: "4:0",
  scored: ["Lewandowski", "Gnarby", "Lewandowski", "Hummels"],
}; 


const goals = {};
for (const player of game.scored) {
  goals[player]++ || (goals[player] = 1);
}
 
console.log(goals);

goals[player]++ 将 player 的 goals 增加 1，returns 旧值。 goals[player]++ 中棘手的事情是 player 可能还没有出现在 goals 中。在这种情况下 undefined 被返回（这是假的）。因为该值为 falsy，所以将执行 OR 运算符的第二个操作数。 (goals[player] = 1) 会将 player 的 goals 设置为 1。

代码本质上是计算特定名称在 game.scored 数组中出现的频率。名字的存在象征着他们的目标。

编写类似代码的一种不太隐晦的方式是：

const goals = {};
for (const player of game.scored) {
  if (player in goals) {
    goals[player] += 1; // add 1 to the current score
  } else {
    goals[player] = 1; // no score present so use 1
  }
}

不过我通常更喜欢设置默认值，这样您就不必将逻辑拆分为两个操作：

const goals = {};
for (const player of game.scored) {
  goals[player] ||= 0; // assign 0 if the current value is falsy
  goals[player] += 1;  // add 1 to the current value
}

请注意，||= 是相当新的，如果您为较旧的浏览器编写 JavaScript，则可以改用以下内容：

if (!goals[player]) goals[player] = 0;

Answer 3

第一部分

duplication[x]++ || (duplication[x] = 1)
^^^^^^^^^^^^^^^^

有四个部分：

一个变量duplication和
a property accessor x 中括号
后缀 increment operator ++ 和
logical OR || 运算符的表达式。

第二部分 returns undefined 在第一次调用时未知属性。

尝试增加此值 returns NaN, because of the following operation of duplication[x] = duplication[x] + 1. The result is is a falsy 值。

这会强制表达式计算逻辑或右侧的部分。

因为左边有一个表达式，所以需要先用grouping operator ()求值。现在进行赋值，1 的结果返回给 OR。

在 JavaScript 中的对象中使用短路 ( || )

using Short-Circuiting ( || ) in Object in JavaScript

javascript

object

short-circuiting