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());
  1. 我们想要得到两个数之间的随机整数,并且包含这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>

在这里插入图片描述

  1. 简单的写法(最常用的写法)
<script>
      var date1= +new Date();//+new Date()  返回的就是总的毫秒数
      console.log(date1);
      
    
</script>

在这里插入图片描述

  1. 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)根据位置返回字符
    在这里插入图片描述
    在这里插入图片描述
  1. 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 字符串操作方法(重点)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不能瞌睡呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值