数据类型与流程控制

数据类型与流程控制

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

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

---

引用类型

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

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

2对象

      const arr = ['电脑', 2, 5000];，给它语义化一下：
  const obj = {  /*  语义化： */
        /* 名称 */ name: '电脑',
        /* 数量 */ num: 2,
       /*  价格 */ price: 5000,
       'my email': 'a@php.cn',
     拿到里的第一个值：   console.log(obj['name']);
      };
     拿到数组中的第二个值：console.log(obj.num);
  //   对于符合js标识符命名规范的属性名,可以用点来访问,也可以不用点，用两个单引号访问如：'my email': 'a@php.cn',
  }

 对象最主要的功能：可以把一些常用操作给他封装进去  ：
             obj123 = {
/* 名称 */   name: '电脑',
/* 数量 */   num: 2,
/* 价格 */   price: 5000,
        'my email': 'a@php.cn',
        total: function () {    /* total: function:函数声明 */
          // this: 当前对象的引用, 和当前对象绑定，，不用更改obj也可以显示，因为this已经和当前对象绑定
          return /* ：计算 */  this.name + '总价 : ' + this.num * this.price + ' 元';
        },
      };
      console.log(obj123.total());

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

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

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

---

流程控制

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

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

2.双分支：

/*语法糖: 三元操作
         条件 ? true : false
         age >= 18 ? console.log('成年了允许进入') : console.log('未成年人禁止进入');*/
    age = 17;
      console.log(age >= 18);
      if (age >= 18) {
        console.log('成年了允许进入');
      }
      // 默认选项
      else {
        console.log('未成年人禁止进入');
      }

1. 多分支：

   age = 126;
   /* &&表示且，并且 */
      if (age >= 0 && age < 18) {
        console.log('未成年人禁止入内');
      }
      //   默认的第1个分支
      else if (age >= 18 && age < 30) {   
        console.log('可以两人或多人结伴进入');
      }
      //   默认的第2个分支
      else if (age >= 30 && age < 60) {   
        console.log('建议在孩子陪同下进入');
      }
      else if (age >=60 && age <120){
        console.log('不建议进入网吧')
      }
      //   默认的第3个分支,进行非法数据的过滤
      /*|| 表示或，或者什么什么....  */
      else if (age >= 120 || age < 8) {
        console.log('非法年龄段');
      }
      else {
        console.log('禁止入内');
      }

   

多分支的语法糖: switch

区间判断,并非单值,一定用true才能进入分支
必须要用true做为switch入口判断条件
     /*  switch （条件）{
        每个分支用 case 表示，如第一个分支：case 1；
        case 1;
       /* 语句......*/
        break;  跳出该分支 */
     /* 最后还有一个默认分支：
        default: */
代码如下：
           switch (true) {
        case age >=1 && age <18: 
        console.log('未成年人')
        case age >= 18 && age < 35: /* 条件 */
          console.log('成年人');/* 语句 */
          break;/* 跳出 */
        case age >= 35 && age < 60:
          console.log('中年人');
          break;
        case age >= 60 && age < 120:
          console.log('老年人');
          break;
        case age >= 120 || age < 8:
          console.log('非法年龄段');
          break;
        default:
          console.log('未成年人');
      }

经典应用: 单值判断：

let language = 'html';
      language = 'Css';/*都会被转为小写*/
      //   实现js/javascript都能正确输出
      language = 'javascript';
      //   language = 'php';
      switch (language.toLowerCase()) {
        case 'html':
          console.log('超文本标记语言');
          break;
        case 'css':
          console.log('层叠样式表');
          break;
        case 'js':
        // case之间没有break,会连续输出，按顺序输出
        case 'javascript':
          console.log('前端通用脚本语言');
          break;
        default:
          console.log('未定义的选项');

---

循环：

     const colors = ['red', 'green', 'blue'];
      console.log(colors);
      console.log(colors.length);
      console.log(colors[0], colors[1], colors[2]);
      // 最后一个元素的索引是 当前数组的长度减一: 2=colors.length-1
      console.log(colors.length - 1);
      console.log(colors[colors.length - 1]);/* 最后一个元素可以用length - 1拿到 */ 
      console.log(colors[colors.length]);
// !号进行 取反
      if (!undefined) {
        console.log(true);
      }
      //   数组的遍历：
      // 数组起始索引：
      let i = 0;
// 遍历的条件：
      let length = colors.length;
    /*   if (i < length) {
           console.log(colors[i]);
       必须要更新循环条件,否则进入死循环
           i = i + 1;
         }
         if (i < length) {
           console.log(colors[i]);
       必须要更新循环条件,否则进入死循环
       i = i + 1;
       i += 1;
           i++;
         }
         if (i < length) {
           console.log(colors[i]);
     必须要更新循环条件,否则进入死循环
           i = i + 1;
         }
         if (i < length) {
           console.log(colors[i]);
       必须要更新循环条件,否则进入死循环
           i = i + 1;
         } else {
           console.log('遍历结束');
        }  */
        用循环来简化以上操作：
        console.log('----------------');
      i = 0;
      // 入口判断
      while (i > length) {
        console.log(colors[i]);
        // 必须要更新循环条件,否则进入死循环
        i++;
      }
      console.log('----------------');
      console.log(i);
      i = 0;
      // 出口判断, 至少要执行一次循环体中的代码,哪必条件为false/假
      do {
        console.log(colors[i]);
        // 必须要更新循环条件,否则进入死循环
        i++;
      } while (i > length);
      console.log('===============');

循环三要素:
      /*   1. 索引初始化: 0
         2. 循环条件: i < length
         3. 更新循环条件: i++  
         for 可以看成 while 语法糖或简化 */
         for (let i = 0; i < length; i++)  //{全部写进for中
       console.log(colors[i]);
      }
   // es6 : for-of
      for (let item of colors) {
        console.log('phpcn: ' + item);
      }

// 用循环方式来遍历对象
      const obj = {
        a: 1,
        b: 2,
        c: function () {},
      }
      // 不能用for-of, 要用 for -in
      for (let key in obj) {
        console.log(obj[key]);
      }
      // 数组也是对象, 也可以用for in
      for (let key in colors) {
        console.log(colors[key]);
      }
      // 数组可以用while,for,for-of,for-in
      // 对象用for-in