为什么我的 if 语句适用于 else if,而不适用于 OR 运算符

Why does my if statement work with an else if, but not an OR operator

我在控制台写了一小段 JS,循环遍历 LinkedIn 上的推荐连接,如果文本包含某个单词,则忽略该卡片,否则单击 'X' 关闭按钮。

最初我是这样写的:

const list = document.querySelector('.mn-pymk-list__cards');
const cards = list.querySelectorAll('.mn-pymk-list__card');

cards.forEach( (card, i) => {

  setTimeout( ()=>{
    let text = card.querySelector('.member-insights__count');

    if( !text.textContent.includes('Sharon') || text === null ) {
        card.querySelector('.pymk-card__close-btn').click();
       } else {
        card.style.background = 'green';
       }
  }, i * 1000 )

});

但是,当它 运行 时,它有时会出错(同时继续迭代)'Could not read textContent of null'。

然而,当我这样写代码时:

const list = document.querySelector('.mn-pymk-list__cards');
const cards = list.querySelectorAll('.mn-pymk-list__card');

cards.forEach( (card, i) => {

  setTimeout( ()=>{
    let text = card.querySelector('.member-insights__count');

    if( text === null ) {
        card.querySelector('.pymk-card__close-btn').click();
    } else if (!text.textContent.includes('Sharon')) {
        card.querySelector('.pymk-card__close-btn').click();
    } else {
        card.style.background = 'green';
    }
  }, i * 1000 )

});

它运行得非常好,并且按照我的要求进行。

问题:我不明白为什么第一个选项不起作用,因为它看起来更简洁并且理论上应该做同样的事情?

我怀疑这与以下事实有关:在 LinkedIn 上,一些建议的联系人没有 class 的 '.member-insights__count' 而是 '.member-insights__info'.

但是,这仍然会使文本解析为空,对吗?

任何见解都会很棒!

如果 textContent 为 null(例如,如您所说,联系人使用“.member-insights__info”代替),!text.textContent.includes('Sharon') 将导致错误消息。

在第二个版本中,只有当文本不为空时才能到达该行。

if( !text.textContent.includes('Sharon') || text === null ) {

text 为空时,您希望这段代码做什么?它会崩溃,因为您无法访问 null 的属性或方法。

您需要先检查是否为空。

if( text === null || !text.textContent.includes('Sharon') ) {

如果第一个参数为假,|| 运算符将仅计算第二个参数。

在您的情况下,第一个和第二个代码片段之间的唯一区别是您检查值是否为 null 的顺序

您需要做的是先检查是否为 null,如下所示:

if( text === null ||  !text.textContent.includes('Sharon')) {

这样它只会在确定 text 不为空后检查 text 是否包含特定文本