Let's talk about JavaScript operators

<p>This article brings you relevant knowledge about <a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript视频教程">javascript</a>, which mainly introduces related issues about operators. Operators are also called operators and are used to implement assignment and comparison. and symbols that perform arithmetic operations and other functions. Let’s take a look at them together. I hope it will be helpful to everyone. </p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/067/62ea421337ce7665.jpg" class="lazy" alt="Let's talk about JavaScript operators" ></p> <p>[Related recommendations: <a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript视频教程">javascript video tutorial</a>, <a href="https://www.php.cn/course/list/1.html" target="_blank">web front-end</a>】</p> <p>Operator (operator) also Known as operators, they are symbols used to implement functions such as assignment, comparison, and performing arithmetic operations. </p> <p><strong>Commonly used operators in JavaScript are: </strong></p> <ul> <li>Arithmetic operators</li> <li>Increment and decrement operators</li> <li>Comparison Operator</li> <li>Logical operator</li> <li>Assignment operator</li> </ul> <h2 id="Arithmetic-operator">Arithmetic operator</h2> <p>Concept: Symbols used in arithmetic operations, used to perform two operations Arithmetic operations on variables or values. </p> <table> <thead><tr class="firstRow"> <th>Operator</th> <th>Description</th> <th>Instance</th> </tr></thead> <tbody> <tr> <td> </td> <td>Add</td> <td>10 20=30</td> </tr> <tr> <td>-</td> <td>minus</td> <td>20-10=10</td> </tr> <tr> <td>*</td> <td>Multiply</td> <td>10*20=200</td> </tr> <tr> <td>/</td> <td>divide</td> <td>10/20=0.5</td> </tr> <tr> <td>%</td> <td>Get the remainder (modulo)</td> <td>Return the remainder of the division 9%2=1</td> </tr> </tbody> </table> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(1 + 1); //2     console.log(1 - 1); //0     console.log(1 * 1); //1     console.log(1 / 1); //1     console.log(4 % 2); //0</pre><div class="contentsignin">Copy after login</div></div> <p>Floating point numbers will have errors in arithmetic operations (avoid direct participation in operations): </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(0.1 + 0.2); //0.30000000000000004</pre><div class="contentsignin">Copy after login</div></div> <p>Cannot directly determine whether two floating point numbers are equal. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var num = 0.1 + 0.2;     console.log(num == 0.3); //false</pre><div class="contentsignin">Copy after login</div></div> <ul> <li>Arithmetic operator priority: multiplication and division first, addition and subtraction</li> <li>You can use the % remainder operator to determine whether a number is divisible</li> </ul> <p><strong> Expressions and return values: </strong></p> <p> Formulas composed of numbers, operators, variables, etc. are called expressions. </p> <p>The expression will eventually return a result to us, which we call the return value. </p> <h2 id="Increment-and-decrement-operators">Increment and decrement operators</h2> <p>If you need to repeatedly add or subtract 1 to a numeric variable, you can use increment (<code> </code>) and decrement (<code>--</code>) operator to complete. </p> <p><strong>Complicated writing: </strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var num = 1;     num = num + 1;     num = num + 1;     console.log(num); //3</pre><div class="contentsignin">Copy after login</div></div> <h3 id="strong-Preceding-increment-operator-strong"><strong>Preceding increment operator: </strong></h3> <p><code> </code>Write in the variable The front </p> <p><code> num</code> prefix increment is to add 1, similar to <code>num=num 1</code></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var age = 10;     ++age;     console.log(age);//11 类似于age = age + 1</pre><div class="contentsignin">Copy after login</div></div> <p><strong>Usage formula: </strong> Add self first, then return the value </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(age);     var a = 10;     console.log(++a + 10); //(10+1)+10=21</pre><div class="contentsignin">Copy after login</div></div> <h3 id="Postincrement-operator">Postincrement operator</h3> <p><code> </code>Write after the variable</p> <p><code>num </code> Setting increment means adding 1, similar to <code>num=num 1</code></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var age = 10;     age++;     console.log(age);//11 类似于age = age + 1</pre><div class="contentsignin">Copy after login</div></div> <p><strong>Usage formula: </strong>Return to the original value first, then increment </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var a = 10;     console.log(a++ + 10); //10+10=20     console.log(a); //11</pre><div class="contentsignin">Copy after login</div></div> <h3 id="Difference-summary">Difference summary</h3> <ul> <li>The pre-increment and post-increment operators can simplify the writing of code, making the variable value 1 easier to write than before. </li> <li>When used alone, the running results are the same. </li> <li>When used in conjunction with other codes, the execution results will be different. </li> <li> Preposition: add self first, then calculate (<strong> put yourself first, then others</strong>) </li> <li> Postposition: first calculate the original value, then add yourself (<strong> first, others Later, </strong>)</li> <li>When developing, post-increment/decrement is mostly used, and the code occupies one line. Example: <code>num ;</code> </li> </ul> <p><strong>Exercise: </strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var e = 10;     var f = e++ + ++e; //1.e++=10 e=11  2.++e=12 f=10+12     console.log(f); //22</pre><div class="contentsignin">Copy after login</div></div> <h2 id="Comparison-operator">Comparison operator</h2> <p><strong>Concept: </strong>Comparison operator (relational operator) is the operator <strong> used when comparing two data. After the comparison operation, a Boolean value (true/false) will be returned as the result of the comparison operation. </strong></p> <table> <thead><tr class="firstRow">Operator name<th></th>Description<th></th>Case<th></th>Result<th></th> </tr></thead> <tbody> <tr><<td></td>Less than number<td></td>1>2<td></td>true<td></td> </tr>##><tr> <td>Greater than sign</td> <td>1>2</td> <td>false</td> <td></td>##>=</tr> <tr>Greater than or equal to sign (greater than or equal to) <td></td>2>=2<td></td>true<td></td> <td>##<=</td></tr>Less than or equal sign (less than or equal to)<tr><td>3<=2</td><td>false</td><td></td><td>==</td></tr>determine equal sign (will transform)<tr><td>17==17 </td><td>true</td><td></td><td>!=</td></tr>unequal sign<tr><td>17!=17</td><td>false</td><td></td><td>=== !==</td></tr>Congruent, the value and data type are required to be consistent<tr><td>17==='17'</td><td>false</td><td></td><td><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(2 <= 5); //true console.log(&#39;岳泽以&#39; = &#39;个人博客&#39;); //false console.log(17 == &#39;17&#39;); //true 默认转换数据类型，字符串型转换为数字型 console.log(17 = &#39;17&#39;); //false 数据类型不同，要求值和数据类型一致</pre><div class="contentsignin">Copy after login</div></div></td></tr></tbody></table>Symbol<table><thead>Function<tr class="firstRow"><th>Usage</th><th></th><th></th></tr>=</thead><tbody>Assignment<tr><td>Give the right side to the left side</td><td></td><td>==</td></tr>Judgement<tr><td> Determine whether the values ​​on both sides are equal (there is implicit conversion) </td><td></td><td>===</td></tr>Congruent<tr><td> Determine whether the values ​​and data types of both sides are equal Identical </td><td></td><td><h2 id="逻辑运算符">逻辑运算符</h2><p><strong>概念</strong>：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断。</p><table><thead><tr class="firstRow"><th>逻辑运算符</th><th>说明</th><th>案例</th></tr></thead><tbody><tr><td><code>&&</code></td><td>"逻辑与"，简称“与”and</td><td>ture <code>&&</code>false</td></tr><tr><td><code>丨丨</code></td><td>"逻辑或"，简称“或”or</td><td>ture <code>丨丨</code>false</td></tr><tr><td><code>!</code></td><td>"逻辑非"，简称“非”not</td><td><code>!</code>true</td></tr></tbody></table><h3 id="逻辑与">逻辑与</h3><p>符号：<code>&& </code>相对于and</p><p>两侧都为 <code>true</code>结果才是 <code>true</code>，只要有一侧为 <code>false</code>，结果就为 <code>false</code></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(3 > 5 && 3 > 2); //false     console.log(3 < 5 && 3 < 7); //true</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><h3 id="逻辑或">逻辑或</h3><p>符号：<code>||</code>相当于or</p><p>俩侧都为 <code>false</code>，结果才是 <code>false</code>，只要有一侧为 <code>true</code>，结果就是 <code>true</code></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(3 > 5 && 3 > 2); //false     console.log(3 < 5 && 3 < 7); //true</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><h3 id="逻辑非">逻辑非</h3><p>符号：<code>!</code>相对于not</p><p>逻辑非也叫作取反符，用来取一个布尔值相反的值。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(!true); //false console.log(!false); //true</pre><div class="contentsignin">Copy after login</div></div><h3 id="短路运算-逻辑中断">短路运算（逻辑中断）</h3><p>短路运算的原理：当有多个表达式（值）时，左边的表达值可以确定结果时，就不再继续运算右边的表达式的值。</p><p><strong>逻辑与：</strong></p><ul><li><strong>语法</strong>：<code>表达式1 && 表达式2</code></li><li>如果第一个表达式的值为真，则返回表达上2</li><li>如果第一个表达式的值为假，则返回表达式1</li></ul><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(123 && 456); //返回456，除了0以外的所有数字都为真。 console.log(123 && 456 && 789); //返回789，依次后推 console.log(0 && 456); //0</pre><div class="contentsignin">Copy after login</div></div><p><strong>逻辑或：</strong></p><ul><li><strong>语法</strong>：<code>表达式1 || 表达式2</code></li><li>如果表达式1结果为真，则返回表达式1</li><li>如果表达式1结果为假，则返回表达式2</li></ul><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(123 || 456); //123 console.log(123 || 456 || 123 + 456); //123 console.log(0 || 456 || 123 + 456); //456</pre><div class="contentsignin">Copy after login</div></div><p>注意：逻辑中断会造成短路操作，即不执行后面的代码，影响程序员的运行结果。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var num = 0; console.log(123 || num++); //逻辑中断造成num++未执行 console.log(num); //0</pre><div class="contentsignin">Copy after login</div></div><h2 id="赋值运算符">赋值运算符</h2><p><strong>概念</strong>：用来把数据赋值给变量的运算符</p><table><thead><tr class="firstRow"><th>赋值运算符</th><th>说明</th><th>案例</th></tr></thead><tbody><tr><td>=</td><td>直接赋值</td><td>var name='岳泽以';</td></tr><tr><td>+=、-=</td><td>加、减一个数后再赋值</td><td>var age=10; age+=5; //15</td></tr><tr><td>*=、/=、%=</td><td>乘、除、取余后再赋值</td><td>var age=10; age*=5; //10</td></tr></tbody></table><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var num = 5; num += 10; console.log(num); //5+10=15 num *= 3; console.log(num); //15*3=45</pre><div class="contentsignin">Copy after login</div></div><h2 id="运算符优先级">运算符优先级</h2><table><thead><tr class="firstRow"><th>优先级</th><th>运算符</th><th>顺序</th></tr></thead><tbody><tr><td>1</td><td>小括号</td><td><code>()</code></td></tr><tr><td>2</td><td>一元运算符</td><td><code>++</code> <code>--</code> <code>!</code></td></tr><tr><td>3</td><td>算术运算符</td><td>先 <code>*</code> <code>/ </code>后 <code>+</code> <code>-</code></td></tr><tr><td>4</td><td>关系运算符</td><td><code>> <code>>=</code> <code><</code> <code><=</code></td></tr><tr><td>5</td><td>相等运算符</td><td><code>==</code> <code>!=</code> <code>===</code> <code>!==</code></td></tr><tr><td>6</td><td>逻辑运算符</td><td>先 <code>&&</code>后 <code>丨丨</code></td></tr><tr><td>7</td><td>赋值运算符</td><td><code>=</code></td></tr><tr><td>8</td><td>逗号运算符</td><td><code>,</code></td></tr></tbody></table><ul><li>一元运算符里的逻辑非优先级很高。</li><li>逻辑与比逻辑或优先级高</li></ul><pre class="brush:php;toolbar:false">console.log(4 >= 6 || '我' != '你' && !(12 * 2 == 144) && true); //true     /*      逻辑运算符分四段     1.4 >= 6 得false     2.'我' != '你'得true     3.!(12 * 2 == 144)得ture     4.true     然后判断逻辑与：2与3得true 3和4得true      再判断逻辑或得：true      */<p>【相关推荐：<a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript视频教程">javascript视频教程</a>、<a href="https://www.php.cn/course/list/1.html" target="_blank">web前端</a>】</p></code> </td> </tr> </tbody> </table>

The above is the detailed content of Let's talk about JavaScript operators. For more information, please follow other related articles on the PHP Chinese website!