博客列表 >JS的解构赋值与流程控制

JS的解构赋值与流程控制

Jason Pu?
Jason Pu?原创
2020年12月30日 16:22:42630浏览

一:js数组与对象的解构赋值

解构赋值语法是一种 Javascript 表达式,通过解构赋值, 可以将属性/值从对象/数组中取出并赋值给其他变量,要求两边类型一致,如果是解构一个对象,外面需要加上大括号,以视为一个代码块
1:对象的解构:

  1. const Jason = {name: 'Jason',age: 18,family: {mother: 'Mom',father: 'Dady',brother: 'Oldbrother'}};
  2. //要求两边类型一致:
  3. ({name,age} = Jason);
  4. console.log(name);//Jason
  5. console.log(age);//18
  6. // 解析也可以是嵌套的,例如:
  7. ({mother,father,brother}=Jason.family);
  8. console.log(mother,father,brother);//Mom Dady Oldbrother
  9. // 或者两边完全一致,获取所有属性
  10. ({name,age,family:{mother,father,brother}}=Jason);
  11. console.log(name,age,mother,father,brother);//Jason 18 Mom Dady Oldbrother
  12. // 如果解构的数组中没有这个属性的情况下,会报undefined
  13. ({mother,father,brother,sister}=Jason.family);
  14. console.log(sister);//undefined
  15. // 我们可以给数组中没有的属性添加默认值来解决
  16. ({mother,father,brother,sister='Panda'}=Jason.family);
  17. console.log(sister);//Panda

2:数组解构
假如有如下几个数组,里面都是名字

  1. const names = ['Luky','Eva','Philip','Mary','Jason','Mark'];
  2. let [name1,name2]=names;
  3. console.log(name1,name2);//Luky Eva

也可以把剩下的提取到一个变量当中,变成单独的一个数组

  1. [name1,name2,...rest]=names;
  2. console.log(rest);//[ "Philip", "Mary", "Jason", "Mark" ]

如果数组里面还有一个数组, 那我们左右保持一致就可以了

  1. const nums = [1,2,3,[4,5,6]];
  2. [a,b,c,[d,e,f]]=nums;
  3. console.log(a,b,c,d,e,f);//1 2 3 4 5 6

跳过数组中的元素:通过添加逗号,就可以避免分配相应的元素,直接跳到下一个

  1. [a,,b]=nums;
  2. console.log(a,b);//1 3

二:js的流程控制

根据孩子的成绩来判断相应的奖励与惩罚,我们先用伪代码来操作:
假如分数在80分以上,奖励一部Iphone手机
假如分数线在70分以上80分以下,奖励一部小米手机
假如分数线在分数线在60分以上70分以下奖励2本练习册
假如分数在60分以下,奖励10本练习册

方案1:

  1. let score = 60;
  2. if(score>100 || score<0){
  3. console.log("请输入合法的成绩");
  4. }else if(score>=80){
  5. console.log("奖励一部Iphone手机");
  6. }else if(score<80 && score>=70){
  7. console.log("奖励一部小米手机");
  8. }else if(score<70 && score>=60){
  9. console.log("奖励2本练习册");
  10. }else if(score<60){
  11. console.log("奖励10本练习册");
  12. };

方案2:switch

  1. let score = 100;
  2. switch(true){
  3. case score>100 || score<0: console.log("请输入合法的成绩");
  4. break;
  5. case score>=80:console.log("奖励一部Iphone手机");
  6. break;
  7. case score<80 && score>=70: console.log("奖励一部小米手机");
  8. break;
  9. case score<70 && score>=60:console.log("奖励2本练习册");
  10. break;
  11. default: console.log("奖励10本练习册");
  12. }

流程控制:循环
循环,就是可以干重复的事,我们用js中的while来叫同学们去写作业

  1. const stutents = ['小明','小李','小何','小红','小张','小刘'];
  2. // while循环:
  3. let i = 0;
  4. while(i<stutents.length){
  5. console.log(`${stutents[i]}写作业去!`);
  6. i++;
  7. };
  8. //运行结果:
  9. //小明写作业去!
  10. //小李写作业去!
  11. //小何写作业去!
  12. //小红写作业去!
  13. //小张写作业去!
  14. //小刘写作业去!

也可以用for循环来实现

  1. for(let value of stutents){
  2. console.log(`${value}写作业去!`);
  3. }

也可以在遍历当中添加条件判断:

  1. let num = 10;
  2. for(let i=0; i<=num;i++){
  3. if(num%2==0){
  4. console.log(`${i}是一个偶数`);
  5. };
  6. };
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议