search

博客列表 >数据类型与流程控制

数据类型与流程控制

glen
glen原创
2022年10月05日 20:58:30364浏览

数据类型与流程控制

1数据类型：
原始数据：
原始类型: number, string, boolean, undefined, null

  1. 原始类型，二大特点:
  2.       1. 单值: a = 1, b='a'   
  3.       2动态: 数据类型,由值的类型确定
  4.         console.log(typeof 'php.cn');
  5.         console.log(typeof true, typeof false);
  6.         let a; // undefined是变量的默认值
  7.         console.log(typeof null);  /* null 返回是object类型,并非是 Null */
  8.         console.log(typeof undefined);
  10.           let x = 123;
  11.          console.log(typeof x);
  12.           x = 'php.cn';
  13.          console.log(typeof x);
引用类型

1.数组: 每个成员可以是原始类型,也可以是引用类型

  1. 声明数组：const arr =  ['电脑', 2, 5000];
  2. 为了看的方便一点，可以给它弄成表格形式：console.table(arr)
  3. 返回数组：console.log(arr);
  4. 返回数组中的第一个值 0：console.log(arr[0]);
  5. 返回数组中的第二个值 1：console.log(arr[1]);
  6. 返回数组中的第三个值 2：console.log(arr[2]);
  7. 查看当前数组的长度：console.log(arr.length);
  8. 判断当前数组是不是个数组：console.log(typeof arr); 返回object，object是个对象，
  9. console.log(Array.isArray(arr));    Array。isArray:是数组的一个原型，，，结果如果返回true说明它是一个数组 
  11. ----------------------------------------------------------------
  13.  const arr = ['电脑', 2, 5000];
  14.       console.table(arr);
  15.       console.log(arr[0]);
  16.       console.log(arr[1]);
  17.       console.log(arr[2]);
  18.       console.log(arr.length); /*  length：查看当前数字为多少个原型/当前数组的长度 */
  19.       console.log(Array.isArray(arr));

2对象

  1.       const arr = ['电脑', 2, 5000];，给它语义化一下：
  2.   const obj = {  /*  语义化： */
  3.         /* 名称 */ name: '电脑',
  4.         /* 数量 */ num: 2,
  5.        /*  价格 */ price: 5000,
  6.        'my email': 'a@php.cn',
  8.      拿到里的第一个值：   console.log(obj['name']);
  9.       };
  10.      拿到数组中的第二个值：console.log(obj.num);
  12.   //   对于符合js标识符命名规范的属性名,可以用点来访问,也可以不用点，用两个单引号访问如：'my email': 'a@php.cn',
  13.   }
  1.  对象最主要的功能：可以把一些常用操作给他封装进去  ：
  3.              obj123 = {
  4. /* 名称 */   name: '电脑',
  5. /* 数量 */   num: 2,
  6. /* 价格 */   price: 5000,
  7.         'my email': 'a@php.cn',
  8.         total: function () {    /* total: function:函数声明 */
  9.           // this: 当前对象的引用, 和当前对象绑定，，不用更改obj也可以显示，因为this已经和当前对象绑定
  10.           return /* ：计算 */  this.name + '总价 : ' + this.num * this.price + ' 元';
  11.         },
  12.       };
  14.       console.log(obj123.total());

  1.     通常还可以把数组跟对象混到一起用：
  3.      console.log(obj123.total());
  4. /*以下是创建的一个数组，，这个数组里所有的数据都是对象；*/
  5.       obj = [
  6.         { name: '手机', num: 2, price: 5000 },
  7.         { name: '电脑', num: 5, price: 6000 },
  8.         { name: '相机', num: 4, price: 2000 },
  9.       ];
  10.       console.log(obj); /* 进行访问  */
  12.       进行其他操作：求和：
  13.   let res = obj.map(item => item.num * item.price).reduce((acc, cur) => acc + cur);
  15.       console.log(res);

3.函数:
函数既是数据类型,也是对象
1将函数当成数据类型的优点
// 1. 当成函数的参数: 回调

  1.   function f1() {}
  3.       function f2(f) {
  4.         console.log(typeof f); /*  回调，就是将一个函数做为参数传递到另一个函数去 */
  5.       }
  6.       //   f2是一函数, 它接受一个函数做为参数,可以将上面声明的f1传入
  7.       f2(f1);
  10. 第二种方法，当作闭包来用：
  11.   function f3() {
  12.         return function () {
  13.           return 'hello world';
  14.         };
  15.       }
  17.       console.log(f3()());

流程控制

1.分支
分支: 本质上来说,就是有条件执行某段代码
1.单分支：

  1. let age = 28;
  3.       console.log(age >= 18);
  4.       if (age >= 18) {
  5.         console.log('成年了允许进入');
  6.       }

2.双分支：

  1. /*语法糖: 三元操作
  2.          条件 ? true : false
  3.          age >= 18 ? console.log('成年了允许进入') : console.log('未成年人禁止进入');*/
  4.     age = 17;
  5.       console.log(age >= 18);
  6.       if (age >= 18) {
  7.         console.log('成年了允许进入');
  8.       }
  9.       // 默认选项
  10.       else {
  11.         console.log('未成年人禁止进入');
  12.       }
  1. 多分支：
    1. age = 126;
    2. /* &&表示且，并且 */
    3.    if (age >= 0 && age < 18) {
    4.      console.log('未成年人禁止入内');
    5.    }
    6.    //   默认的第1个分支
    7.    else if (age >= 18 && age < 30) {   
    8.      console.log('可以两人或多人结伴进入');
    9.    }
    10.    //   默认的第2个分支
    11.    else if (age >= 30 && age < 60) {   
    12.      console.log('建议在孩子陪同下进入');
    13.    }
    14.    else if (age >=60 && age <120){
    15.      console.log('不建议进入网吧')
    16.    }
    17.    //   默认的第3个分支,进行非法数据的过滤
    18.    /*|| 表示或，或者什么什么....  */
    19.    else if (age >= 120 || age < 8) {
    20.      console.log('非法年龄段');
    21.    }
    22.    else {
    23.      console.log('禁止入内');
    24.    }

多分支的语法糖: switch

  1. 区间判断,并非单值,一定用true才能进入分支
  2. 必须要用true做为switch入口判断条件
  3.      /*  switch （条件）{
  4.         每个分支用 case 表示，如第一个分支：case 1；
  5.         case 1;
  6.        /* 语句......*/
  7.         break;  跳出该分支 */
  9.      /* 最后还有一个默认分支：
  10.         default: */
  12. 代码如下：
  13.            switch (true) {
  14.         case age >=1 && age <18: 
  15.         console.log('未成年人')
  16.         case age >= 18 && age < 35: /* 条件 */
  17.           console.log('成年人');/* 语句 */
  18.           break;/* 跳出 */
  19.         case age >= 35 && age < 60:
  20.           console.log('中年人');
  21.           break;
  22.         case age >= 60 && age < 120:
  23.           console.log('老年人');
  24.           break;
  25.         case age >= 120 || age < 8:
  26.           console.log('非法年龄段');
  27.           break;
  29.         default:
  30.           console.log('未成年人');
  31.       }

经典应用: 单值判断：

  1. let language = 'html';
  2.       language = 'Css';/*都会被转为小写*/
  3.       //   实现js/javascript都能正确输出
  4.       language = 'javascript';
  6.       //   language = 'php';
  7.       switch (language.toLowerCase()) {
  8.         case 'html':
  9.           console.log('超文本标记语言');
  10.           break;
  11.         case 'css':
  12.           console.log('层叠样式表');
  13.           break;
  14.         case 'js':
  15.         // case之间没有break,会连续输出，按顺序输出
  16.         case 'javascript':
  17.           console.log('前端通用脚本语言');
  18.           break;
  20.         default:
  21.           console.log('未定义的选项');

循环：
  1.      const colors = ['red', 'green', 'blue'];
  2.       console.log(colors);
  3.       console.log(colors.length);
  4.       console.log(colors[0], colors[1], colors[2]);
  5.       // 最后一个元素的索引是 当前数组的长度减一: 2=colors.length-1
  6.       console.log(colors.length - 1);
  7.       console.log(colors[colors.length - 1]);/* 最后一个元素可以用length - 1拿到 */ 
  8.       console.log(colors[colors.length]);
  10. // !号进行 取反
  11.       if (!undefined) {
  12.         console.log(true);
  13.       }
  15.       //   数组的遍历：
  17.       // 数组起始索引：
  18.       let i = 0;
  20. // 遍历的条件：
  21.       let length = colors.length;
  22.     /*   if (i < length) {
  23.            console.log(colors[i]);
  24.        必须要更新循环条件,否则进入死循环
  25.            i = i + 1;
  26.          }
  27.          if (i < length) {
  28.            console.log(colors[i]);
  29.        必须要更新循环条件,否则进入死循环
  30.        i = i + 1;
  31.        i += 1;
  32.            i++;
  33.          }
  34.          if (i < length) {
  35.            console.log(colors[i]);
  36.      必须要更新循环条件,否则进入死循环
  37.            i = i + 1;
  38.          }
  39.          if (i < length) {
  40.            console.log(colors[i]);
  41.        必须要更新循环条件,否则进入死循环
  42.            i = i + 1;
  43.          } else {
  44.            console.log('遍历结束');
  45.         }  */
  47.         用循环来简化以上操作：
  48.         console.log('----------------');
  49.       i = 0;
  50.       // 入口判断
  51.       while (i > length) {
  52.         console.log(colors[i]);
  53.         // 必须要更新循环条件,否则进入死循环
  54.         i++;
  55.       }
  56.       console.log('----------------');
  57.       console.log(i);
  58.       i = 0;
  59.       // 出口判断, 至少要执行一次循环体中的代码,哪必条件为false/假
  60.       do {
  61.         console.log(colors[i]);
  62.         // 必须要更新循环条件,否则进入死循环
  63.         i++;
  64.       } while (i > length);
  66.       console.log('===============');
  1. 循环三要素:
  2.       /*   1. 索引初始化: 0
  3.          2. 循环条件: i < length
  4.          3. 更新循环条件: i++  
  5.          for 可以看成 while 语法糖或简化 */
  6.          for (let i = 0; i < length; i++)  //{全部写进for中
  7.        console.log(colors[i]);
  8.       }
  9.    // es6 : for-of
  10.       for (let item of colors) {
  11.         console.log('phpcn: ' + item);
  12.       }
  1. // 用循环方式来遍历对象
  2.       const obj = {
  3.         a: 1,
  4.         b: 2,
  5.         c: function () {},
  6.       }
  7.       // 不能用for-of, 要用 for -in
  8.       for (let key in obj) {
  9.         console.log(obj[key]);
  10.       }
  11.       // 数组也是对象, 也可以用for in
  12.       for (let key in colors) {
  13.         console.log(colors[key]);
  14.       }
  16.       // 数组可以用while,for,for-of,for-in
  17.       // 对象用for-in
上一条：云服务器ESC 学习下一条：grid和flex布局实现右侧布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议