Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1. 实例演示数组与对象的解构 ；2 实例演示常用的流程控制方法
Blogger Information
Blog 23
fans 0
comment 3
visits 23654
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1. 实例演示数组与对象的解构 ；2 实例演示常用的流程控制方法
a.
Original
658 people have browsed it

1. 对象解构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>对象和数组解构</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       //解析要求等于2边类型相同
  11.       ({ name, age } = { name: "誓言", age: 22 });
  12.       console.log(name, age);
  14.       //支持默认值
  15.       ({ UserName, Age, Sex = "男" } = { UserName: "誓言1", Age: 28 });
  16.       console.log(UserName, Age, Sex);
  18.       //支持别名
  19.       ({ UserName: 姓名, Age, Sex = "男" } = { UserName: "誓言1", Age: 28 });
  21.       console.log("姓名", Age, Sex);
  22.     </script>
  23.   </body>
  24. </html>

2. 数组解构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>对象和数组解构</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       //解析要求等于2边类型相同
  11.       ({ name, age } = { name: "誓言", age: 22 });
  12.       console.log(name, age);
  14.       //支持默认值
  15.       ({ UserName, Age, Sex = "男" } = { UserName: "誓言1", Age: 28 });
  16.       console.log(UserName, Age, Sex);
  18.       //支持别名
  19.       ({ UserName: 姓名, Age, Sex = "男" } = { UserName: "誓言1", Age: 28 });
  21.       console.log("姓名", Age, Sex);
  23.       //数组解构
  24.       const color = ["red", "bule", "green"];
  25.       let [c1, c2, c3] = color;
  26.       console.log(c1, c2, c3);
  28.       //多维数组解构
  29.       let [a, [b, c], d] = [1, [2, 3], 4];
  30.       console.log(a, b, c, d);
  32.       //数组也支持默认值
  34.       let [x, y, z = 100] = [100, 200];
  35.       console.log(x, y, z);
  36.     </script>
  37.   </body>
  38. </html>

3.流程控制

3.1. 单分支

  1. let score = 70 ;
  2. if(score >= 60) console.log("及格了");

3.2. 双分支

  1. if(score >= 60) console.log("及格了")
  2. else console.log("不及格");

3.3. 多分支

  1. if (score >= 60 && score <= 80) console.log('合格');
  2. else if (score >= 81 && score <= 100) console.log('学霸');
  3. else if (score >= 100 && score <= 0) console.log('分数无效');
  4. else console.log("不及格");

3.4. switch简化分支

  1. let response = 'Success';
  2. //单值字符串需要格式统一化，使用.tolowerCase()方法，全转为大写或小写
  3. switch(response.toLowerCase()){
  4.     case 'fail':
  5.         console.log('请求失败');
  6.         break;
  7.     case 'success':
  8.         console.log('请求成功');
  9.         break;
  10.     case 'error':
  11.         console.log('参数错误');
  12.         break;
  13.     default:console.log('未知错误');
  14. }

3.5.三元运算

  • 语法：

（判断）? true : false;

  1. let score = 20;
  2. let str = (score >= 60) ? '及格了' ：'补考吧';
  3. console.log(str);

3.6. 循环

一般用来遍历数组
可以用arr.length来获取数组长度

3.6.1 入口判断型

  1. const arr = [1,2,3,4,5];
  2. let i = 0;
  3. while(i < arr.length){
  4. console.log(arr[i]);
  5. i++;
  6. }

3.6.2 出口判断型do...while

do…while不管条件成立不成立都会执行一次，而while只有条件成立都会执行

  1. do{
  2. console.log(arr[i]);
  3. i++;
  4. }while(i < arr.length);

3.6.3 for循环

语法：

for(初始化循环变量;设置循环条件;更新循环条件){...}

  1. const arr = [1,2,3,4,5];
  2. for(let i = 0;i < arr.length; i ++){
  3. //从第三个开始输出
  4. if(i >= 3) console.log(arr[i]);
  5. //或者
  6. if(i < 3) baeak;
  7. console.log(arr[i]);
  8. //continue调出
  10. if(arr[i] % 2 ===0) continue;
  11. console.log(arr[i]);
  13. }

3.6.4 对象的遍历

for in

  1. const arr = [1,2,3,4,5];
  2. const obj = {
  3.     id:10000,
  4.     userName:'誓言',
  5.     email:'php@php.cn'
  6. }
  8. for(let key in obj){
  9.     console.log(`${key} => ${obj[key]}`);
  11. }

for of

  1. for(let val of arr){
  2.     console.log(val);
  3. }

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       const arr = [1, 2, 3, 4, 5];
  11.       const obj = {
  12.         id: 10000,
  13.         userName: "誓言",
  14.         email: "php@php.cn",
  15.       };
  17.       for (let key in obj) {
  18.         console.log(`${key} => ${obj[key]}`);
  19.       }
  20.       for (let val of arr) {
  21.         console.log(val);
  22.       }
  23.     </script>
  24.   </body>
  25. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post