Question

我在控制台中写了一小段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 )

});

但是，当它运行时，有时会出现“无法读取null的textContent”错误（继续进行迭代）。

但是，当我编写这样的代码时：

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上，某些建议的联系人没有“ .member-insights__count”类，而是具有“ .member-insights__info”。

但是，那仍然应该使文本解析为null，对吗？

任何见识都会很棒！

Answer 1

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

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

您需要先检查null。

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

Answer 2

如果textContent为null（例如，如您所说，该联系人使用的是“ .member-insights__info”），则!text.textContent.includes('Sharon')将导致错误消息。

在第二个版本中，仅当文本不为null时才能到达该行。

Answer 3

||运算符仅在第一个参数为false时才对第二个参数求值。

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

您需要做的是先检查null，如下所示：

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

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

为什么我的if语句与else if而不是OR运算符一起工作

3 个答案: