为什么我的 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
是否包含特定文本
我在控制台写了一小段 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
是否包含特定文本