JavaScript 语法条件语法？和

Question

经常发现条件语法，如数组后跟“？”和 ”。”和元素，例如 - edges[0]?.node。如何解读以下代码？

export default function Index({ allPosts: { edges }, preview }) {
  const heroPost = edges[0]?.node;
  const morePosts = edges.slice(1);
  ....// rest of the code 
}

Answer 1

这是 if-else 语句的单行 shorthand。它被称为条件运算符。1

这是一个可以使用条件运算符缩短的代码示例：

var codeName;
if (userIsYoungerThan18) {
  codeName = "Minor";
} else {
  codeName = "Adult";
}

if (memberCheck) {
  serveDrink("Grape Juice");
} else {
  serveDrink("Wine");
}

这可以用 ?: 缩短，如下所示：

var codeName = userIsYoungerThan18 ? "Minor" : "Adult";

serveDrink(memberCheck ? "Grape Juice" : "Wine");

与所有表达式一样，条件运算符也可以用作具有副作用的独立语句，尽管这在缩小之外并不常见：

memberCheck ? serveGrapeJuice() : serveWine();

它们甚至可以链接起来：

serveDrink(userIsYoungerThan4 ? 'Milk' : memberCheck ? 'Grape Juice' : 'Wine');

不过要小心，否则你会得到像这样令人费解的代码：

var k = a ? (b ? (c ? d : e) : (d ? e : f)) : f ? (g ? h : i) : j;   

function getFee(isMember) {
      return (isMember ? '.00' : '.00');
    }
    
    console.log(getFee(true));
    // expected output: ".00"
    
    console.log(getFee(false));
    // expected output: ".00"
    
    console.log(getFee(null));
    // expected output: ".00"

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

逻辑与运算符

const a = true, b = false;
const c = 4;

// logical AND
console.log(a && a); // true
console.log(a && b);  // false

console.log((c > 2) && (c < 2)); // false

使用 AND

a1 = true  && true       // t && t returns true
a2 = true  && false      // t && f returns false
a3 = false && true       // f && t returns false
a4 = false && (3 == 4)   // f && f returns false
a5 = 'Cat' && 'Dog'      // t && t returns "Dog"
a6 = false && 'Cat'      // f && t returns false
a7 = 'Cat' && false      // t && f returns false
a8 = ''    && false      // f && f returns ""
a9 = false && ''         // f && f returns false

Answer 2

这是 optional chaining 运算符 (?.)，它使您能够读取位于连接对象链深处的属性的值，而无需检查链中的每个引用在每个参考中都有效，保护您免受错误 Uncaught TypeError: Cannot read properties of undefined

这个运算符就像 .链接运算符，除了如果引用被认为是无效的（这意味着 null 或未定义），表达式不会导致错误，而是使用 return 值 undefined 短路（因此，不会抛出异常）。

const person = {
  name: 'John',
  dog: {
    name: 'cc'
  }
};

const dogName = person.dog?.name;
console.log(dogName);

console.log(person.cat?.name?.prop); // undefined instead of throwing an error

JavaScript 语法条件语法？和

JavaScript Syntaxt conditional syntaxt ? and

javascript

conditional-statements