JavaScript 入门教程
JavaScript是一门Web编程语言，用来实现网页的交互功能，它和HTML、CSS共同组成了个Web开发的基础工具集合，也是前端开发者必备的技能；学习JavaScript教程可以了解它在网页开发中的所有特性和相关概念，让我们能够更加快速的去开发Web应用。
W3CAPI
1
2020-06-18 07:05:48
逻辑运算符
JavaScript：逻辑运算符——AND、OR、NOT
逻辑运算符
Javascript中的逻辑运算符如下：
| Operator | Usage | 详细说明 |
|---|---|---|
| 逻辑与（&&） | a ?&&?b | 当a和b均为真时为真。 |
| 逻辑或（||） | a?||?b | 当a或b任一为真时则为真。 |
| 逻辑非（!） | !a | 当a不为真时为真。 |
JavaScript 逻辑与运算符（&&）
以下条件为真：
- true && true
- (20 > 5) 且 (5 < 20)
以下条件为假：
- true && false
- (20大于5)且(20小于5)
- false && true
- (20 < 5) 且 (20 > 5)
- 假 && 假
- (20 小于 5) 且 (5 大于 20)
上述图示助您理解以下概念逻辑与采用龙头与水流的类比机制进行操作。
在图1中，两个水龙头均处于关闭状态，因此水流无法通过。这说明当两个条件均为FALSE或0时，返回值将为FALSE或0。
在图-2中，其中一个水龙头处于关闭状态，即便如此，水流仍无法向下流动。这表明：在逻辑与操作中，若任一条件为FALSE（假）或0，则结果为FALSE（假）或0。
图-3 与 案例-2 类似。
在图4中，两个开关均处于开启状态，因此水流向下流动。这表明若两个条件均为TRUE或1（成立），则返回值为TRUE或1。
因此我们可以得出结论：当且仅当两个条件均为TRUE或1时，逻辑AND运算才会返回TRUE或1。
Example:
如下网页文档演示了逻辑与运算符（&&）的用法。
HTML代码
<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript logical AND operator example</title>
<meta name="description" content="This document contains an example of JavaScript logical AND operator"/>
<style>
h1 {
color:red;
border-bottom: 3px groove silver;
padding-bottom: 8px;
}
</style>
</head>
<body>
<h1>JavaScript equal operator (==) example</h1>
<form name="logical_or_test" action="javascript-logical-and-operator-example1-with-dom.html">
<input type="text" id="no" placeholder="Input a number between 5 and 10 and press tab" size="60" onchange="viewOutput();"/>
<input type="submit" value="Submit" />
</form>
<script src="javascript-logical-and-operator-example1.js"></script>
</body>
</html>
JS代码
function viewOutput()
{
'use strict';
var no = document.getElementById('no').value;
if( no>= 5 && no<10 )
{
var newParagraph = document.createElement("p"); //creates a new paragraph element
var newText = document.createTextNode('The number is between 5 and 10'); //creates text along with ouput to be displayed
newParagraph.appendChild(newText); //created text is appended to the paragraph element created
document.body.appendChild(newParagraph); // created paragraph and text along with output is appended to the document body
}
else
{
var newParagraph1 = document.createElement("p"); //creates a new paragraph element
var newText1 = document.createTextNode('Wrong input'); //creates text along with ouput to be displayed
newParagraph1.appendChild(newText1); //created text is appended to the paragraph element created
document.body.appendChild(newParagraph1); // created paragraph and text along with output is appended to the document body
}
}
JavaScript 逻辑或运算符 (||)
以下条件为真：
- true || true
- （20大于5）或（5小于20）
- true || false
- (20 大于 5) 或 (20 小于 5)
- false || true
- (20 小于 5) 或 (20 大于 5)
以下条件为假：
- false || false
- (20小于5)或(5大于20)
上述图示有助于理解相关概念。逻辑或采用龙头与水流的类比机制进行操作。
在图1中，两个水龙头均处于关闭状态，因此水流无法通过。这说明当两个条件均为FALSE或0时，返回值将为FALSE或0。
在图-2中，一个开关处于关闭状态，此时可见水流向下流动。这表明只要任一条件为TRUE或1，返回值即为TRUE或1。
图-3 与 案例-2 类似。
在图4中，两个开关均处于开启状态，因此水流向下流动。这表明若两个条件均为TRUE或1（成立），则返回值为TRUE或1。
因此可以得出结论，在逻辑或运算中，只要任一条件为真，输出即为真或1。
Example:
以下网页文档展示了逻辑或运算符（||）的使用方法。
<!doctype html>
<head><meta charset="utf-8">
<title>JavaScript logical OR operator example</title>
<meta name="description" content="This document contains an example of JavaScript logical OR operator"/>
<style>
h1 {
color:red;
border-bottom: 3px groove silver;
padding-bottom: 8px;
}</style>
</head>
<h1>JavaScript logical OR operator example</h1>
<form name="logical_or_test" action="javascript-logical-or-operator-example1-with-dom.html">
<input type="text" id="no" placeholder="Input a number less than 5 or greater than 20 and press tab" size="60" onchange="viewOutput();"/>
<input type="submit" value="Submit" />
</form>
<script src="javascript-logical-or-operator-example1.js">
</script>
</body>
</html>
JS代码
function viewOutput()
{
'use strict';
var no = document.getElementById('no').value;
if( no<5 || no>20 )
{
var newParagraph = document.createElement("p"); //creates a new paragraph element
var newText = document.createTextNode('Value of input is less than 5 or greater than 20'); //creates text along with ouput to be displayed
newParagraph.appendChild(newText); //created text is appended to the paragraph element created
document.body.appendChild(newParagraph); // created paragraph and text along with output is appended to the document body
}
else
{
var newParagraph1 = document.createElement("p"); //creates a new paragraph element
var newText1 = document.createTextNode('Wrong input'); //creates text along with ouput to be displayed
newParagraph1.appendChild(newText1); //created text is appended to the paragraph element created
document.body.appendChild(newParagraph1); // created paragraph and text along with output is appended to the document body
}
}
JavaScript 逻辑非运算符（!）
HTML代码
<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript logical NOT operator example with DOM</title>
<meta name="description" content="This document contains an example of JavaScript logical NOT operator"/>
<style>
h1 {
color:red;
border-bottom: 3px groove silver;
padding-bottom: 8px;
}
</style>
</head>
<h1>JavaScript logical NOT operator example</h1>
<script src="javascript-logical-not-operator-example1.js"></script>
</body>
</html>
JS代码
var a = 20;
var b = 5;
var newParagraph = document.createElement("p"); //creates a new paragraph element
var newText = document.createTextNode('Value of a = '+a+' b = '+b); //creates text along with ouput to be displayed
newParagraph.appendChild(newText); //created text is appended to the paragraph element created
document.body.appendChild(newParagraph); // created paragraph and text along with output is appended to the document body
if( a != b )
{
var newParagraph1 = document.createElement("p"); //creates a new paragraph element
var newText1 = document.createTextNode('a is not equal to b [ != operator ]'); //creates text along with ouput to be displayed
newParagraph1.appendChild(newText1); //created text is appended to the paragraph element created
document.body.appendChild(newParagraph1); // created paragraph and text along with output is appended to the document body
}
else
{
var newParagraph2 = document.createElement("p"); //creates a new paragraph element
var newText2 = document.createTextNode('a is equal to b.'); //creates text along with ouput to be displayed
newParagraph2.appendChild(newText2); //created text is appended to the paragraph element created
document.body.appendChild(newParagraph2); // created paragraph and text along with output is appended to the document body
}
想测测你的JavaScript技能？
想要练习 JavaScript 练习题吗？
作者文档
相关提问
敬请期待
扫一扫关注官方微信公众号
豫ICP备18043494号-2 以API的视角诠释计算机技术