欢迎光临
我的个人博客网站

JavaScript 运算符与流程控制

赋值运算符与算术运算符:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body>     <script>         let a = 3, b = 5;         console.log(a,b);         let c = a + b;         console.log(c);          a = a + 5;         console.log(a);         a += 5;         console.log(a);     </script> </body> </html>

 

一元运算符的前置与后置操作:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body>     <script>         // 在不参与其他表达式的情况下,前置加和后置加没有区别         // let a = 1;         // a++;         // console.log(a);          // let a = 1;         // ++a;         // console.log(a);          // let a = 1;         // let b = 2;         // let c = a + ++b;         // console.log(b,c);          // let a = 1;         // let b = 2;         // let c = a + b++;         // console.log(b,c);      </script> </body> </html>

 

比较运算符注意事项:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head>  <body>     <input type="text" name="age">     <span id="msg"></span>      <script>         // let a = 1;         // let b = 2;         // console.log(a<b);          // let a = 1;         // let b = '1';         // console.log(a==b);         // console.log(a===b);         // console.log(typeof a);         // console.log(typeof b);         // console.log(a<=b);          let span = document.querySelector('#msg');         document.querySelector('[name=age]').addEventListener('keyup', function () {             // let msg = '';             // if(this.value > 90){             //     msg = '年龄不能超过90岁~';             // }             // span.innerHTML = msg;             span.innerHTML = this.value > 90 ? '年龄不能超过90岁~' : '';         });      </script> </body>  </html>

 

逻辑运算符实例详解:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head>  <body>     <input type="text" name="pwd"><br>     <input type="text" name="repwd">     <br>     <span name="msg"></span>      <script>         // let a = 1, b = 1;         // if (a == 1 && b == 1) {         //     console.log('都是1');         // }         // if (a == 1 || b == 1) {         //     console.log('至少有1个为1');         // }         // if (a == 1 && b != 2) {         //     console.log('a是1,b不是2');         // }          // 通过name值获取元素的方法         function query(name) {             return document.querySelector(`[name=${name}]`);         }         // console.log(query("repwd"));          let inputs = document.querySelectorAll('[name=pwd], [name=repwd]');         // console.log(inputs);         // 对数组中的每个元素进行操作         [...inputs].map(item => {             item.addEventListener('keyup', function () {                 let msg = '';                 if (query("pwd").value != query("repwd").value) {                     msg = '两次密码不一致~';                 }                 if (query("pwd").value.length < 5) {                     msg = '密码长度不得小于5位~';                 }                 query("msg").innerHTML = msg;             })         })     </script> </body>  </html>

 

短路运算的妙用:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head>  <body>     <script>         // let a = 1, b = 0;         // console.log(a == true);         // console.log(b == true);         // if (a) {         //     console.log('a');         // }         // if (b) {         //     console.log('b');         // }          // if (a || b) {         //     console.log(111);         // }         // if (b || a) {         //     console.log(111);         // }          // let a = 6, b = 0;         // let c = a || b;         // console.log(c)          // let sex = prompt('请输入性别');         // if (!sex) {         //     sex = '保密';         // }         // console.log(sex);          // 不同的语言是不一样的,js的短路运算可以返回数据,php的会返回布尔值         // let sex = prompt('请输入性别') || '保密';         // console.log(sex);          // function star(num) {         //     // repeat字符串重复         //     return '*'.repeat(num || 5);         // }         // console.log(star(3));         // console.log(star()); // 不传入num的话,num是undefined          // function star(num = 6) {         //     return '*'.repeat(num);         // }         // console.log(star());      </script> </body>  </html>

 

网站协议接受验证:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head>  <body>      <form action="#" id="form">         用户名:<input type="text" name="user"><br>         <input type="checkbox" name="copyright" id="">接受协议<br>         <button type="submit">提交</button>     </form>      <script>         function query(el) {             return document.querySelector(el);         }         query('#form').addEventListener('submit', function (event) {             let user = query('[name=user]').value.trim(); // trim去除值两边的空白             let copyright = query('[name=copyright]').checked;             // console.log(user, copyright);             if (!user || !copyright) {                 event.preventDefault();// 阻止默认事件                 alert('请填写用户名并接受协议~');             }          });     </script> </body>  </html>

 

使用if else 判断密码强度:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head>  <body>     <input type="password" name="pwd">     <span id="msg"></span>      <script>          // 只有一行语句的话,花括号可以省略         // if (true) {         //     console.log(1);         // }          // if (true) console.log(2);          // if (false) console.log(1);         // console.log(2);          // let a = 2;         // if (a == 1) {         //     console.log(1);         // } else {         //     console.log('==');         // }          let span = document.querySelector('#msg');         document.querySelector('[name=pwd]').addEventListener('keyup', function () {             let msg = '', length = this.value.length;             if (length > 10) {                 msg = '密码无敌安全~';             } else if (length > 6) {                 msg = '密码强度中等~';             } else {                 msg = '密码强度太弱啦';             }             span.innerHTML = msg;         });     </script> </body>  </html>

 

三元表达式真的好可爱:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head>  <body>      <script>         // 三元运算符的嵌套         // let a = 2 ? (5 ? 'haha' : 'jj') : 3;         // console.log(a);          function div(options = {}) {             let div = document.createElement('div');             div.style.width = options.width ? options.width : '100px';             div.style.height = options.height ? options.height : '100px';             div.style.backgroundColor = options.bgcolor ? options.bgcolor : 'pink';             document.body.appendChild(div);         }         div();         div({ width: '50px', height: '50px', bgcolor: '#abcdef' });     </script> </body>  </html>

JavaScript 运算符与流程控制

 

 

switch使用注意事项:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head>  <body>      <script>         // let name = 'cyy';         // switch (name) {         //     case 'cc':         //         console.log('cc');         //         break;         //     case 'dd':         //         console.log('dd');         //         break;         //     default:         //         console.log('cyy');         // }          // 多个case存在相同的操作         // let name = 'ee';         // switch (name) {         //     case 'cc':         //     case 'dd':         //         console.log('cc');         //         break;         //     case 'ee':         //     default:         //         console.log('cyy');         // }          // switch 和 case里可以填写条件表达式         function age(age) {             switch (true) {                 case age > 60:                     console.log('老年');                     break;                 case age > 40:                     console.log('中年');                     break;                 case age > 20:                     console.log('青年');                     break;                 default:                     console.log('少年');                     break;             }         }         age(18);     </script> </body>  </html>

 

while循环控制:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head>  <body>      <script>         // document.write(`<table border="1" width="100%">`);          // let tr = 5;         // while (tr-- != 0) {         //     document.write(`<tr>`);          //     let td = 3;         //     while (td-- != 0) {         //         document.write(`<td>${td}</td>`);         //     }          //     document.write(`</tr>`);         // }          // document.write('</table>');            function tables(options = { tr: 5, td: 3 }) {             document.write(`<table border="1" width="100%">`);              let tr = options.tr;             while (tr-- != 0) {                 document.write(`<tr>`);                  let td = options.td;                 while (td-- != 0) {                     document.write(`<td>${td}</td>`);                 }                  document.write(`</tr>`);             }              document.write('</table>');         }         tables();         document.write('<hr/>');         tables({ tr: 10, td: 5 });     </script> </body>  </html>

JavaScript 运算符与流程控制

 

 

do while循环实例操作:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head>  <body>      <script>         // while 条件成立则执行,条件不成立则不执行         // while(false){         //     console.log(11);         // }          // do while先执行一次,再判断条件是否成立;成立则继续,不成立则停止         // do {         //     console.log(1);         // } while (false);          // let start = 0;         // do {         //     let n = 0;         //     do {         //         document.write('*');         //     } while (++n <= start);         //     document.write('<br/>');         // } while (++start <= 5);           function star(row = 3) {             let start = 0;             do {                 let n = 0;                 do {                     document.write('*');                 } while (++n <= start);                 document.write('<br/>');             } while (++start <= row);         }         star();         document.write('<hr/>');         star(10);     </script> </body>  </html>

JavaScript 运算符与流程控制

 

 

使用for循环打印杨辉三角:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head>  <body>     <style>         span {             color: white;         }     </style>     <script>         // for (let i = 0; i < 10; i++) {         //     console.log(i);         // }          // for (let i = 0; i < 10; i++) {         //     for (j = 0; j < i; j++) {         //         document.write('*');         //     }         //     document.write('<br/>');         // }           // for (let i = 0; i < 5; i++) {         //     for (let j = 5 - i; j > 0; j--) {         //         document.write('<span>*</span>');         //     }         //     for (let m = 2 * i - 1; m > 0; m--) {         //         document.write('*');         //     }         //     document.write('<br/>');         // }          function hd(row = 5) {             for (let i = 0; i < row; i++) {                 for (let j = row - i; j > 0; j--) {                     document.write('<span>*</span>');                 }                 for (let m = 2 * i - 1; m > 0; m--) {                     document.write('*');                 }                 document.write('<br/>');             }         }         hd(10);     </script> </body>  </html>

JavaScript 运算符与流程控制

 

 

beark continue与label标签的使用:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head>  <body>     <script>         // for (let i = 1; i <= 10; i++) {         //     if (i % 2) continue; // 奇数,跳出本次循环,不打印         //     console.log(i);         // }          // for (let i = 1; i <= 10; i++) {         //     if (i % 2) break;         //     console.log(i);         // }          // 打印3个奇数         // let count = 0;         // for (let i = 1; i <= 10; i++) {         //     if (i % 2) {         //         if (count++ == 3) {         //             break;         //         }         //         console.log(i);         //     }          // }          // cyy: for (let i = 1; i <= 10; i++) {         //     if (i % 2) continue cyy;         //     console.log(i);         // }          // cyy1: for (let i = 0; i < 10; i++) {         //     cyy2: for (let j = 0; j < 10; j++) {         //         if (j % 2) {         //             console.log(i, j);         //         }           //         if (i + j >= 5) {         //             break; // 默认跳出当前循环,外层循环还会继续         //         }         //     }         // }          // cyy1: for (let i = 0; i < 10; i++) {         //     cyy2: for (let j = 0; j < 10; j++) {         //         if (j % 2) {         //             console.log(i, j);         //         }           //         if (i + j >= 5) {         //             break cyy1; // 跳出两层循环         //         }         //     }         // }       </script> </body>  </html>

 

for-in与for-of使用方法:

for-of主要用于迭代对象

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <style>     ul {         list-style: none;     }      li {         width: 200px;         height: 50px;         border: 1px solid #ddd;     } </style>  <body>     <ul>         <li></li>         <li></li>         <li></li>     </ul>     <script>         let news = [             { title: 'title1', id: 1 },             { title: 'title2', id: 2 },             { title: 'title3', id: 3 }         ];          document.write(`             <table border="1" width="100%">                 <thead>                     <tr><th>课程名</th><th>课程编号</th></tr>                     </thead>         `);          // for (let k in news) {         //     document.write(`         //         <tr>         //             <td>${news[k].title}</td>         //             <td>${news[k].id}</td>         //         </tr>         //     `);         // }         for (let i of news) {             document.write(`                 <tr>                     <td>${i.title}</td>                     <td>${i.id}</td>                 </tr>             `);         }          document.write(`</table>`);           // let arr = ['a', 'b', 'c'];         // for (let k in arr) {         //     console.log(arr[k]);         // }          // let arr = ['a', 'b', 'c'];         // for (let i of arr) {         //     console.log(i);         // }          // for (let k in window) {         //     console.log(window[k]);         // }          // for (let i of window) {         //     console.log(i);         // }          // 字符串也有迭代对象         // for (let i of 'cyy') {         //     console.log(i);         // }          let lis = document.querySelectorAll('li');         // console.log(lis.length);         for (const li of lis) {             console.log(li);             li.addEventListener('click', function () {                 this.style.backgroundColor = "red";             });         }     </script> </body>  </html>

JavaScript 运算符与流程控制

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript 运算符与流程控制
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏