JavaScript基础——第十二节：内置对象，文档查询指定API，Math 对象，Date对象，Array对象，String对象

目标

• 能够说出什么是内置对象
• 能够根据文档查询指定API的使用方法
• 能够使用Math 对象的常用方法
• 能够使用Date对象的常用方法
• 能够使用Array对象的常用方法
• 能够使用String对象的常用方法

1. 内置对象

JavaScript中的对象分为3种︰自定义对象、内置对象、浏览器对象，前面两种对象是JS基础内容，属于ECMAScript;第三个浏览器对象属于我们JS独有的，我们JS API讲解。

• 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法)
• 内置对象最大的优点就是帮助我们快速开发
• JavaScript提供了多个内置对象∶Math、Date . Array、string等

2.查文档

2.1 MDN

学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
Mozilla开发者网络(MDN)提供了有关开放网络技术( Open Web ) 的信息，包括HTML、CSS和万维网及HTML5应用的API。
MDN:https://developer.mozilla.org/zh-CN/

2.2如何学习对象中的方法

1. 查阅该方法的功能
2. 查看里面参数的意义和类型
3. 查看返回值的意义和类型
4. 通过demo进行测试

3. Math对象

Math数学对象不是一个构造函数﹐所以我们不需要new来调用而是直接使用里面的属性和方法即可

3.1 案例：封装自己的数学对象

利用对象封装自己的数学对象里面有PI最大值和最小值

<script>
       var myMath={
           PI:3.141592653,
           max:function(){
               var max =arguments[0];
               for(var i=1;i<arguments.length;i++){
                   if(arguments[i]>max){
                       max=arguments[i];
                   }
               }
               return max;
           },
           min:function(){
            var min =arguments[0];
               for(var i=1;i<arguments.length;i++){
                   if(arguments[i]<min){
                       min=arguments[i];
                   }
               }
               return min;
           }

       }
       console.log(myMath.PI);
       console.log(myMath.max(1,56,9));
       console.log(myMath.min(5,9,3));


    </script>

3.2 Math概述

Math对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用Math中的成员。

3.2.1 绝对值方法（Math.abs() )

3.2.2 三个取整方法

Math.floor()   //floor 地板的意思  向下取整 往最小了取值

Math.ceil()   //ceil 天花板的意思  向上取整 往最大了取值

Math.round()   //四舍五入 其他数字都是四舍五入，但是 .5 特殊 它往大了取

3.3 随机数方法 ：random（）

1. Math对象随机数方法 random(）返回一个浮点型伪随机数字，在0（包括0）和1（不包括）之间。
2. 这个方法里面不跟参数
3. 代码验证

console.log（Math.random（））；

4. 我们想要得到两个数之间的随机整数，并且包含这2个整数

Math.floor(Math.random()*(max-min+1))+min;

<script>
       function getRandom(min,max){
           return Math.floor(Math.random()*(max-min+1))+min;
       }
       console.log(getRandom(1,10));

    </script>

3.3.1 随机点名

<script>
        function getRandom(min,max){
            return Math.floor(Math.random()*(max-min+1))+min;
        }
       var arr=['小明','小亮','小华','小超'];
       console.log(arr[getRandom(0,3)]);
    </script>

3.3.2 猜数字游戏

程序随机生成一个1~10之间的数字，并让用户输入一个数字，
1.如果大于该数字，就提示，数字大了，继续猜;
2.如果小于该数字，就提示数字小了，继续猜;
3.如果等于该数字，就提示猜对了，结束程序。

<script>
        function getRandom(min,max){
            return Math.floor(Math.random()*(max-min+1))+min;
        }
        var random =getRandom(1,10);
        while(true){//死循环
            var num =prompt('你来猜?输入1~10之间的一个数字');
            if(num>random){
                alert('你猜大了');
            }else if(num<random){
                alert('你猜小了');

            }else{
                alert('你好帅,猜对了');
                break;//退出整个循环结束程序
            }
        }
 </script>

4.日期对象 Date()

Date() 日期对象 是一个构造函数，必须使用new来调用创建我们的日期对象

var arr=new Array();//创建一个数组对象
var obj=new Object();//创建了一个对象实例

使用Date ,如果没有参数，返回当前系统的当前时间

var date =new Date();
console.log(date);

4.1 日期格式化

4.2 格式化日期 年月日

<script>
//格式化日期，年月日
       var date=new Date();
       console.log(date.getFullYear());//返回当前日期的年 2019
       console.log(date.getMonth());//月份，返回的月份小1个月
       console.log(date.getDate());//返回的是几号      
       console.log(date.getDay());//周一返回的是1，周六返回的是6  但是 周日返回的是0
       //我们写了一个2019年5月1日  星期三
       var year=date.getFullYear();
       var month=date.getMonth()+1;
       var dates=date.getDate();
       var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
       var day=date.getDay();
       console.log('今天是:'+year+'年'+month+'月'+dates+'日'+arr[day]);
    </script>

4.3 格式化日期 时分秒

<script>
        //格式化日期   时分秒
      var date =new Date();
      console.log(date.getHours());
      console.log(date.getMinutes());
      console.log(date.getSeconds());
      //要求封装一个函数返回当前的时分秒 格式：08:08:08
      function getTime(){
          var time=new Date();
          var h=time.getHours();
          h=h<10?'0'+h:h;
          var m=time.getMinutes();
          m=m<10?'0'+m:m;
          var s=time.getSeconds();
          s=s<10?'0'+s : s;
          return h+':'+m+':'+s;
      }
      console.log(getTime());
    </script>

4.4 获取日期的总的毫秒形式

1. 获得Date总的毫秒数，不是当前时间的毫秒数而是距离1970年1月1号过了多少毫秒数。

• 通过 valueOf() getTime()

<script>
      var date=new Date();
      console.log(date.valueOf());//就是 我们现在的时间 距离1970.1.1 总的毫秒数
      console.log(date.getTime());
    
    </script>

2. 简单的写法（最常用的写法）

<script>
      var date1= +new Date();//+new Date()  返回的就是总的毫秒数
      console.log(date1);
      
    
</script>

3. H5 新增的 获得总的毫秒数

console.log(Date.now());

4.5 倒计时的效果

核心算法∶

• 输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒
  相减，比如05分减去25分，结果会是负数的。
• 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
• 把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒)
• 转换公式如下：
  

<script>
     function countDown(time){
         var nowTime=+new Date();//返回的是当前时间总的毫秒数
         var inputTime=+new Date(time);//返回的是用户输入时间总的毫秒数
         var times=(inputTime-nowTime)/1000;//times是剩余时间总的秒数
         var d=parseInt(times/60/60/24);//天
         d=d<10?'0'+d:d;
         var h=parseInt(times/60/60%24);//时
          h=h<10?'0'+h:h;
         var m=parseInt(times/60%60);//分
         m=m<10?'0'+m:m;
         var s=parseInt(times%60);//当前的秒
           s=s<10?'0'+s : s;
         return d+'天'+h+'时'+m+'分'+s+'秒';

     }
     console.log(countDown('2022-4-10 19:00:00'));
     var date=new Date();
     console.log(date);
    </script>

5.数组对象

5.1 数组对象的创建

5.2 检测是否为数组

• instanceof 运算符 它可以用来检测是否为数组

var arr=[];
console.log(arr instanceof Array);

• Array.isArray(参数) ；用于确定传递的值是否是一个 Array
  
  

Array.isArray([1, 2, 3]);
// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false

5.3 添加删除数组元素的方法

5.3.1 push(） 末尾添加一个或者多个数组元素

在我们数组的末尾添加一个或者多个数组元素，push推

<script>
    var arr=[1,2,3];
    console.log(arr.push(4,'pink'));//返回的结果是  新数组的长度
    </script>

 <script>
    var arr=[1,2,3];
    arr.push(4,'pink');
    console.log(arr);//返回的结果是  新数组
    </script>

5.3.2 unshift（）开头添加元素

在我们数组的开头添加一个或者多个数组元素

<script>
    var arr=[1,2,3];
    arr.push(4,'pink');
    arr.unshift('red');
    console.log(arr);//返回的结果是  新数组的长度
    </script>

• unshift是可以给数组前面追加新的元素
• unshift(）参数直接写数组元素就可以了
• unshift完毕之后，返回的结果是 新数组的长度
• 原数组也会发生变化

5.3.3 pop( ) 删除数组的最后一个元素

它可以删除数组的最后一个元素

代码：

<script>
    var arr=[1,2,3];
    arr.pop();
    console.log(arr);//删除数组最后一个元素,所得的数组
    </script>

运行结果：

代码：

<script>
    var arr=[1,2,3];
  
    console.log(arr.pop());
    console.log(arr);//删除数组最后一个元素,所得的数组
</script>

运行结果：

注意：

5.3.4 shift（）；删去数组第一个元素

代码：

<script>
    var arr=[1,2,3];
    arr.shift();
    console.log(arr);//删除数组第一个元素,所得的数组
    </script>

• shift是可以删除数组的第一个元素记住一次只能删除一个元素
• shift()没有参数
• shift完毕之后，返回的结果是删除的那个元素
• 原数组也会发生变化

5.4 筛选数组

有一个包含工资的数组[1500,1200,2000,2100,1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面

<script>
    var arr=[1500,1200,2000,1800];
    var newArr=[];
    for(var i=0;i<arr.length;i++){
        if(arr[i]<2000){
            newArr[newArr.length]=arr[i];
        }
    }
    console.log(newArr);
    </script>

<script>
    var arr=[1500,1200,2000,1800];
    var newArr=[];
    for(var i=0;i<arr.length;i++){
        if(arr[i]<2000){
           newArr.push(arr[i]);
        }
    }
    console.log(newArr);//直接追加到新数组里面
    </script>

5.5 数组排序

代码：

 <script>
   //数组排序
   // 1.翻转数组
   var arr=['pink','dog','cat'];
   arr.reverse();
   console.log(arr);
 </script>

运行结果：

5.6 数组排序（冒泡排序）

代码：

  <script>
   //数组排序
   // 1.冒泡排序
   var arr=[3,9,8,6];
   arr.sort(function(a,b){
       return a-b;//升序的顺序排列
       return b-a;//降序的顺序排列
   });
   console.log(arr);
  </script>

5.7 返回数组元素索引号方法

// 返回数组元素索引号方法：indexOf(数组元素）;
//作用就是返回该数组元素的索引号，它只返回第一个满足条件的索引号

 <script>
        // 返回数组元素索引号方法：indexof(数组元素）
        //作用就是返回该数组元素的索引号，它只返回第一个满足条件的索引号
        //从前面开始查找
        //它如果在该数组里面找不到元素，则返回的是-1

        var arr=['red','green','blue','pink','blue'];
        console.log(arr.indexOf('blue'));
       // 返回数组元素索引号方法:lastIndexOf(数组元素)
       //作用就是返回该数组元素的索引号
       // 从后面开始查找

        console.log(arr.lastIndexOf('blue'));
 </script>

5.8 数组去重（重点）

代码：

<script>
     //封装一个  去重的函数 unique 独一无二的
     function unique(arr){
         var newArr=[];
         for (var i=0;i<arr.length;i++){    //遍历数组
           if(newArr.indexOf(arr[i])===-1){// newArr.indexOf(arr[i]) 旧数组元素去查询新数组,

               newArr.push(arr[i]);
           }
         }
         return newArr;
     }
     var demo =unique([ 'c', 'a', 'z', 'a', 'x', 'a', 'x' , 'c','b']);
     console.log(demo);
 </script>

5.9 数组转换为字符串

5.10 toString() 将我们的数组转换为字符串

<body>
  <script>
    var arr=[1,2,3];
    console.log(arr.toString());   //  输出结果：1,2,3
    //join('分隔符')；
    console.log(arr.join('-'));  //   1-2-3
    console.log(arr.join('&'));   //  1&2&3
  </script>
</body>

6. 字符串对象

6.1 基本包装类型

为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型:String、Number和Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js会把基本数据类型包装为复杂数据类型，其执行过程如下:

6.2 字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

6.3 根据字符返回位置

字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。

案例：

查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数

核心算法：

• 先查找第一个o出现的位置
• 然后只要 indexOf返回的结果不是-1 就继续往后查找
• 因为indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找

 <script>
    var str ='oabcoefoxyozzopp';
    var index=str.indexOf('o');//查找第一个o出现的位置
    var num=0;
    while(index !=-1){
        console.log(index);
        num++;
        index=str.indexOf('o',index+1);
    }
    console.log('o出现的次数是:'+num);
    </script>

6.4根据位置返回字符（重点)

• 根据位置返回字符
• charAt(index）根据位置返回字符
  
  

2. charCodeAt(index)返回相应索引号的字符ASCII值。目的:判断用户按下了那个键
   
   

   <script>
   var str ='abcoefoxyozzopp';
   var o={};
   for (var i =0;i<str.length;i++){
       var chars=str.charAt(i);//chars 是字符串的每一个字符
       if(o[chars]){
           //o[chars]得到的是属性值
           o[chars]++;
       }else {
           o[chars]=1;
       }
   }
   console.log(o);
 </script>

6.5 字符串操作方法（重点)