&&操作符和词变量做在react native官方文档的映射示例中

Question

是否有人能够建议word && '🍕'中的word在下面的链接中做什么。我不太明白为什么&&操作符，条件操作符在里面执行操作。

我在下面附上了代码摘录。

{text.split(' ').map((word) => word && '🍕').join(' ')}

当我删除word时，使其变成如下:

{text.split(' ').map((word) =>  '🍕').join(' ')}

我可以在输入任何文本之前观察到一个披萨。

https://reactnative.dev/docs/handling-text-input

Answer 1

它正在处理空白文本的边缘情况。

"".split(" ")返回一个空字符串数组:

> "".split(" ")
[ '' ]

在返回🍕之前，我们需要确保word不是一个空字符串。

注意，空字符串在Javascript中是一个假值。

Answer 2

Word在该上下文中用作内联条件语句返回🍕。例如，在传统的javascript代码中将是:

if (word) return '🍕'

在Reactjs中，你可以用花括号把表达式嵌入到JSX中。这包括JavaScript逻辑&&操作符。它可以方便地有条件地包含元素

所以，给定句子或文本Hello there Bob。map函数遍历每个单词并将其替换为🍕，给定文本的最终输出将是🍕🍕🍕🍕🍕 🍕🍕🍕🍕🍕 🍕🍕🍕

Check - and-operator-in-reactjs或not -understand-in-this-javascript-jsx-syntax或understanding-the-use-of- in-a-react-component。学习javascript逻辑和参考

Answer 3

使用&&运算符，您将确保只运行第一个第二个条件。如果word的值为真。空字符串""为假值

在您的情况下几乎不相关，当您的输入具有多个连续空格时，它会有所帮助。． 如果您不使用&&，那么' '将被视为多一个字符。

let text1 = "I love 0 pizza a lot   - false";
let text2 = "I love 0 pizza a lot   - false";
let newText = text1.split(' ').map((word) => word && '🍕').join(' ');
let newText2 = text2.split(' ').map((word) => '🍕').join(' ');
console.log(newText);
console.log(newText2);