JS基础（下）

一、for循环与while循环
1、介绍： 在循环中, 有特别常见的循环四要素
     1.1、循环变量初始值
     1.2、循环条件
     1.3、循环体
     1.4、循环变量的运算
2、语法：
     for (循环变量初始值; 循环条件; 循环变量的运算) {循环体}
3、for循环执行顺序逻辑：
     循环变量初始值==>循环条件==>循环体==>循环变量的运算==>循环条件==>循环体==>循环变量的运算
4、while更适合使用在不明确循环的次数的时候
     while (true) {
             // 循环体
          if (跳出循环的条件) {
             // 跳出循环
                   break;
          }
      }

例：while (true) {
               // 循环体
               //  询问“在吗，能借我点钱不？”
               let result = prompt('在吗，能借我点钱不?');
               // 跳出循环
               if (result === '行') {
                     alert('我们形影不离');
                // 跳出循环
                break;
                }
                //他不借，就一直循环
              }

5、do-while循环（了解）
      do {循环体} while (条件)
      //先不管条件成立与否 先执行一次循环体 然后再去看条件
6、循环进阶--双循环

 例：
     <script>
         for (let i = 1; i <= 10; i++) {
               // 上述代码重复 所以可以使用循环完成
               for (let count = 1; count <= 8; count++) {
                     document.write('❤');
                }
                // 等到一行结束在添加一个换行
                document.write('<br />');
          }
     </script>

     问：1、外层for循环控制什么? => 行数  一共循环了多少次 => 10次
     问：2、内层for循环控制什么? => 每一行的列数 一共循环了多少次 => 80次
7、break与continue
     7.1、break: 跳出整个循环 代表循环完全结束=>一般用于结果已经得到,后续的循环不需要
     7.2、continue: 跳出当前这一次的循环 继续下一次的循环=>一般用于跳过当前选项 继续下一次的循环
二、数组
1、创建数组 => 数据集合

例：let arr = ['数值0', '数值1', '数值2', '数值3'];
    //所有的数组都有下标, 而且下标(索引)默认都是从0开始 往后依次递增

2、数据集合的使用 => 增删改查
     

例：let arr = ['秒杀', '优惠券', 'PLUS会员', '品牌闪购'];
      //2.1、查 => 数组名[下标]
      arr[2]
      //2.2、改 => 数组名[下标] = 新值
      arr[1] = '不优惠券';
      //2.3、删 => 数组名.splice(操作的下标, 删除的个数)
      arr.splice(1, 1);
       //2.4、增 => 傻瓜式的操作下标
       arr[4] = '拍卖';
       arr[5] = '家电';
       arr[6] = '超市';
       //2.4（改良）、数组名.push(添加的内容)
       arr.push('拍卖', '家电', '瑟提');

3、数组特性
      3.1、 每一个数组都有一个length属性, 代表数组的长度
      3.2、 数组的长度 = 数组的最大下标 + 1
      3.3、 获取数组的长度: 数组名.length
      3.4、 数组的长度 JS会自动更新
4、遍历数组 => 将数组的每一项挨个访问

     公式:

for (let i = 0; i < 数组名.length; i++) {
     //数组的每一项 => 数组名[i]
     //数组的下标 => i
}

5、翻转数组
      5.1、核心：倒着遍历 在遍历的过程中,将对应的选项添加到新数组里面去
      5.2、提示：循环变量初始值应该是从 最大下标 开始 每一次下标自行减1 一直减到0 需要等于0 因为需要访问到第0项（最大下标 = 数组.length - 1）
      5.3、做法：    

 <script>
    let arr = [1, 2, 3, 4, 5];
    let newArr = [ ]; // 用来装倒着遍历的每一个选项
    for (let i = arr.length - 1; i >= 0; i--) {
           // 将倒着遍历的每一项 追加到新数组里面去
           newArr.push(arr[i]);
    }
 </script>

6、累加简写
     sum += arr[index]; ==>  sum = sum + arr[index]
三、函数
1、函数的声明与调用
     1.1、函数声明：用来装特定代码的容器  一旦将这个放入函数中, 就可以重复使用它
     1.2、顺序：
            //函数声明 => 创建函数
            function 自定义的函数名 (){}
            //函数调用 => 使用函数
            函数名()
     1.3、特点说明：
             // 1.3.1. 函数默认不会主动执行,必须通过函数名() 调用才会执行.
             // 1.3.2. 函数一次声明可以多次调用,每一次函数调用函数体里面的代码会重新执行一次.
             // 1.3.3. 函数的命名尽量遵守动词或者动词+名词的方式,这样函数的作用一目了然.
             // 1.34. 我们曾经使用的 alert(), Number(), console.log() ,push() 这种名字后面跟小括号的本质都是函数的调用
2、函数的传参(先写死一种固定的情况, 后期将这个对应的值提取出来作为参数传递即可）

例：
    <script>
       function greet(name, content) {
             console.log(`${name},${content}`);
       }

       greet('飞飞', '早上好');
       greet('棠哥', '晚上好');
    </script>

3、函数的返回值
     我们自己定义的函数,如何拥有返回值=>只需要在函数体里面添加上一个return return后面的内容就是函数的返回值

   <script>
      function test() {
         // 函数的代码逻辑 xxxxxx     
         return 11111;
      }
      onsole.log(test())
   </script>

4、函数内部调用函数 与在外部调用函数一样
     例：        

 <script>
     function getMax(a, b) {
         return a > b ? a : b;
     }
     //console.log(getMax(getMax(10, 20), 30));
     function getMax2(a, b, c) {
         // 先求两个数的最大值
         let max = getMax(a, b);
         return max > c ? max : c;
      }
      console.log(getMax2(10, 20, 30));
 </script>

5、函数细节补充
     5.1、两个相同的函数后面的会覆盖前面的函数
     解释：预解析 => 会提前解析函数声明 => 函数可以先调用  在声明；
              在真正执行代码之前 函数声明会提前解析, 如果两个函数一样，会导致内存中只有一个函数声明 => 后面的生效
     5.2、在Javascript中 实参的个数和形参的个数可以不一致
     解释：1. 如果形参过多 会自动填上undefined (了解即可)
               2、如果实参过多 那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)  

 例：
       <script>
           function getMax() {
                  let max = arguments[0];
                  // 遍历数组
                  for (let i = 0; i < arguments.length; i++) {
                       if (arguments[i] > max) {
                              max = arguments[i];
                       }
                    }
                     // 返回最大值
                    return max;
            }
            getMax(10, 20, 30)
            getMax(10, 20, 30, 50, 60)
            getMax(10, 20, 30, 50, 60, 80, 100)
       </script>

6、函数返回值补充
     6.1、函数一旦遇到return 就会提前结束 所以一般函数的返回值放到最后==>可以使用return 结束函数
     6.2、function check() {if (不合法) {return;}   //可以使用return 结束函数
     6.3、return 用于函数里面 结束函数 而break 用于循环当中 结束循环
四、作用域
1、作用域: 变量起作用的区域
2、全局作用域就是在全局声明过的变量起作用的区域
3、局部作用域就是在局部声明过的变量起作用的区域
4、块级作用：（if大括号/for大括号/while大括号/function大括号/独立的大括号）
5、注意：局部变量必须是函数里面声明过(let)的变量, 不要认为只要在函数里面的就是局部变量 要看在哪里声明
6、变量的访问原则: 在能够访问到的情况下 先局部 局部没有在找全局

五、匿名函数: 没有名字的函数
1、特点：匿名函数无法直接使用,需要满足一些条件才可以
2、解决：
     2.1、函数表达式 => 将匿名函数赋值给一个变量  这个变量就可以理解为函数的名称
             

例：
    1、let a = function () {
               console.log('我被调用了');
     };
     a();
    //注：调用  => 函数表达式不可以先使用 在声明
    2、// 允许先调用 在声明
    test();
    // 函数声明
    function test() {
         console.log('我是函数声明');
    }

      2.2、自执行 => 将函数伪装成一个表达式 然后自己调用自己    
              使用场景: 使用形成作用域 保护内部的变量不受外部影响 => 沙箱模式              

例：
   (function () {
    // 函数可以形成一个局部作用域
    // fn就可以理解为是一个局部变量 所以只能在当前函数内部调用
           function fn() {
                console.log('这是我三哥的代码 实现了一个很强大的功能');
           }
           fn();
    })();

六、对象
1、对象:   万物皆对象 自然界的任何实体都可以理解为一个对象
     特征：在Js中, 对象就是一组无序的键值对的集合
               // 静态特征
               // 姓名, 性别, 体重, 年龄, ....
               // 动态行为
               // 点名, 唱, 跳, rap ...
2、对象本质上就是一个数据集合, 所以使用对象无非就是 增删改查

例：
   <script>
      let obj = {
          name: 'zs',
          age: 18,
          hair: '乌黑靓丽的秀发',
          // 这里的sing 就相当于函数的名称
          //称之为方法
          sing: function () {
               console.log('嘿~~~~');
           },
          };
         //2.1、查 => 对象名.属性名
         console.log(obj.name);
         //2.2、改语法 => 对象名.属性名 = 新值
         obj.hair = '地中海';
         //2.3、增语法 => 对象名.新属性名 = 新值
         obj.girlFriend = '乔碧萝殿下';
         //2.4、删语法 => delete 对象名.属性名
         delete obj.girlFriend;
   </script>

3、 点语法可以操作对象的属性 [ ]语法也可以
      3.1、相同点: 都可以操作对象属性==>对象名.属性名 === 对象名['属性名']
      3.2、不同点:点语法无法解析变量，但是[ ]语法可以解析变量 (前提: 中括号里面的内容不能添加引号)
4、遍历对象：将对象里面的数据都访问一遍
     问题：对象没有length属性，对象没有类似于数组那样有规律的下标
     解决：for(let 变量 in 对象名) {}

例：let obj = {
          name: 'zs',
          age: 18,
          hair: '乌黑靓丽的秀发',
          sing: function () {
               console.log('嘿~~~~');
           },
          };
    for (let attr in obj) {
        // attr 是一个变量 在遍历的过程中 表示当前对象的每一个'键名'
        // console.log(attr);
        // 这里不能使用点语法 因为attr是一个变量 而点语法是无法解析变量的
        // console.log(obj.attr); =>四个undefined
        // 这里必须使用中括号语法 而且不能添加引号 这样就可以让attr作为变量去解析
        console.log(obj[attr]);
    }

5、字面量 推荐使用字面量的形式 => 直观 底层本质上还是通过内置构造函数的形式创建  

   let obj = {};     ===       let obj2 = new Object();
   let arr = [];     ===       let arr2 = new Array();

6、 Math 是一个数学对象 里面包含着很多关于数学的属性和方法
      6.1、Math.PI  => 圆周率
      6.2、Math.abs(-2); // => 2=>绝对值
      6.3、let max = Math.max(10, 20, 50, 60, 18);=>最大值, 参数: 需要比较的数值, 返回值: 参数列表的最大值
      6.4、let min = Math.min(10, 20, 50, 60, 18); =>最小值,  参数： 需要比较的数值, 返回值: 参数列表的最小值
      6.5、Math.floor() => 向下取整；Math.ceil() => 向上取整；Math.round() => 四舍五入
      6.6、Math.random() => 产生一个随机数 => 0 到 1之间的任意随机的小数，可以取到0 但是永远取不到1

例：1、0 - n之间的随机数:  Math.floor(Math.random() * (n + 1))
   2、随机数组里面的数据:  Math.floor(Math.random() * arr.length)
    3、m - n之间的随机数:  Math.floor(Math.random() * (n - m + 1)) + m

7、日期对象 
     7.1、如何获取日期对象  => new Date();
          
     7.2、获取日期的指定部分: 年月日 时分秒 => 纯数字 => 在使用字符串拼接成我们想要的任何的格式
     

 例：
    <script>
       //获取日期对象
       let d = new Date();
       // 年
       let Y = d.getFullYear();
       // 月 坑: 月份默认是从0开始的, 所以需要手动加1
       let M = d.getMonth() + 1;
       // 日
       let D = d.getDate();
        // 时
       let h = d.getHours();
       // 分
       let m = d.getMinutes();
        // 秒
       let s = d.getSeconds();
           
       let str = 
      `${Y}-${addZero(M)}-${addZero(D)}${addZero(h)}:${addZero(m)}:${addZero(s)}`;
       //补零操作，检测是否 < 10 如果<10成立, 需要在这个个位数前面添加一个0 否则直接输出
       function addZero(n) {
           return n < 10 ? '0' + n : n;
       }
    </script>

8、时间戳: 从1970年1月1号 00:00:00 到现在的毫秒数
     获取时间戳  => 直接将时间转换成number类型即可 => let start = +new Date();
     未来的时间戳 => let furture = +new Date('2021-05-26 16:26:00'); //得到一个毫秒数