实例演示分支与循环结构,对象字面量的简化,解构

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
分支与循环解构1. 分支

分支主要分为:单分支,双分支,多分支.
1 . 单分支

  1. let status = true;
  2. if (status){
  3. console.log('hello,world');
  4. }

2 . 双分支

  1. status = false;
  2. if(status){
  3. console.log('hello,world');
  4. }
  5. else{
  6. console.log('false');
  7. }
  8. // 三元运算符,双分支语法糖
  9. status?console.log('hello,world'):console.log('false');;

3 . 多分支

  1. let time=10;
  2. if (time>=0 &&time<8){
  3. console.log('现在是凌晨');
  4. }else if (time>=8 &&time<12){
  5. console.log('现在是上午');
  6. }else if(time>=12 && time<=14){
  7. console.log('现在是中午');
  8. }else if(time>14 && time<18){
  9. console.log('现在是下午');
  10. }else if(time>=18 && time<=24){
  11. console.log('现在是晚上');
  12. }else {
  13. console.log('时间输入错误');
  14. }
  15. // 多分支语法糖switch,如果是做区间查询,switch()不是单值,就只需填上true switch(true)
  16. time=20;
  17. switch(true){
  18. case time>=0 && time<8:
  19. console.log('现在是凌晨');
  20. break;
  21. case time>=8 && time<12:
  22. console.log('现在是上午');
  23. break;
  24. case time>=12 && time<=14:
  25. console.log('现在是中午');
  26. break;
  27. case time>14 && time<18:
  28. console.log('现在是下午');
  29. break;
  30. case time>=18 && time<=24:
  31. console.log('现在是晚上');
  32. break;
  33. default:
  34. console.log('时间输入错误');
  35. }
2. 循环结构

循环结构主要分为,while和for.

  • 循环三要素:

    • 初始化,从哪里开始,从哪里入口
    • 条件:从哪里结束,true继续执行,false停止执行
    • 更新条件:避免死循环

1 . whilefor

  1. // 从索引0开始
  2. let i=0 //初始化,从哪里开始,入口
  3. while(i<arr.length){ //条件,ture继续执行,false停止执行
  4. console.log(arr[i]); //执行代码
  5. i++; //更新条件,避免死循环
  6. }
  7. // while的语法糖,for
  8. for(let i=0; i<arr.length;i++){
  9. console.log(arr[i]);
  10. }

2 . for - of

  1. // for-of :只能遍历数组
  2. for(let value of arr){
  3. console.log(value);
  4. }

3 . for - in

  1. // for-in:遍历对象
  2. let obj = {
  3. name:'张三',
  4. 年龄:18,
  5. 工资:5000,
  6. }
  7. for(let key in obj){
  8. console.log(key+':'+obj[key]);
  9. }

4 . forEach

  1. // forEach 遍历数组
  2. // 语法:forEach(function(值,该值的说索引,正在遍历的数组))
  3. arr.forEach(function(item,index,arr){
  4. console.log(item,index,arr);
  5. })
  6. //实际中,只有第一个参数是必选的,后面的2个参数可选
  7. arr.forEach(function(item){
  8. console.log(item);
  9. })
  10. //匿名函数,所以可以用箭头函数简化
  11. arr.forEach((item)=>console.log(item))
  12. console.log('以下是map遍历数组');

5 . map

  1. //map:遍历数组
  2. //map和forEach 使用方法一样,不同的是map有返回值(正在被遍历的数组)
  3. arr.map((item)=>console.log(item))
  4. //以下是map简化后的- 遍历数组
  5. let res = arr.map(item=>item) ;
  6. console.log(res);
3. 对象字面量简化

对象字面量简化包含属性简化和方法简化:

  1. let username = '张五';
  2. let user= {
  3. username:username,
  4. fn:function(){
  5. return `hello,${this.username}`;
  6. }
  7. }
  8. console.log(user.username);
  9. //对象字面量简化
  10. /**
  11. * 属性简化:
  12. * 1 .属性值如果来自同一作用域中的变量,可以只写属性名
  13. * 2. 属性与变量名同名,可以只写属性,不写变量
  14. * 方法简化:
  15. * 删除":function"
  16. */
  17. //简化后,代码如下
  18. username = '张五';
  19. user= {
  20. username,
  21. fn(){
  22. return `hello,${this.username}`;
  23. }
  24. }
  25. console.log(user.username);
4. 解构赋值与应用场景(克隆与传参)1. 解构赋值
  1. let [uname,email] = ['admin','admin@qq.com']
  2. console.log(uname,email);
  3. //变量不足,默认值
  4. [uname,email,age=20] = ['admin','admin@qq.com']
  5. console.log(uname,email,age);
  6. //数据过多,剩余参数"..."
  7. [uname,email,...arr] = ['admin','admin@qq.com',40,5000]
  8. console.log(uname,email,arr);
2. 应用场景
  1. // 1. 克隆对象
  2. let item = {name:'手机',price:1900}
  3. let{...obj} = item;
  4. // obj 就是由item克隆而来的fuzhipin,不是同一个
  5. console.log(item);
  6. console.log(obj);
  7. console.log(item==obj); //返回false .说明不是同一个对象
  8. // 2. 传参
  9. let show = function(item){
  10. //item是object
  11. return `${item.name}:${item.price}`;
  12. }
  13. console.log(show({name:'手机',price:1900}));
【感谢龙石为本站提供数据共享平台 http://www.longshidata.com/pages/exchange.html】