JavaScript内置对象:数学对象、日期对象、数组对象、字符串对象

JavaScript常用的内置对象有数学对象、日期对象、数组对象、字符串对象等,白龙网学习其它内置对象,都是从MDN文档或者W3C上去查找学习的。
对象为3种,自定义对象,内置对象,浏览器对象。前两个是ECMASCRIPT部分内容,浏览器对象是JS独有的。
内容对象是JS自带的一些对象,已经封装好的属性与方法,会用即可,不用关心其实现过程。
了解常见的内置对象的使用技巧,能够到MDN查询对象的使用方法。
1、Math对象
Math是一个对象,不是构造函数,无须调用,直接使用对象中的属性、方法即可。参数可以有,一定要跟上数字型的;也可以没有,打印负无穷大。如果是非数字和数字型的属性值,打印结果是NaN。
(1)求最大值、最小值
    <script>
    console.log(Math.PI);//使用Math属性
     console.log(Math.max());//使用Math方法
     console.log(Math.max(1,9,2,6));
     console.log(Math.max(-1,-9));
     console.log(Math.max(1,'白龙网'));//NaN
    </script>
    案例:使用对象封装PI,最大值,最小值
    <script>
    var mymath = {
        PI: 3.1415926,
        max: function() {
            var max = arguments[0];
            for (var i = 0; i < arguments.length; i++) {
                if (arguments[i] > max) {
                    max = arguments[i];
                }
            }
            return max;
        },
        min: function() {
            var min = arguments[0];
            for (var i = 0; i < arguments.length; i++) {
                if (arguments[i] < min) {
                    min = arguments[i];
                }
            }
            return min;
        }
    }
    //字面量创建的对象,调用时用珊种普通方法即可
    console.log(mymath.PI);
    console.log(mymath.max(1,3,2));
    console.log(mymath.min(1,3,2));
    </script>
(2)绝对值、整数、四舍五入
    <script>
    //1.取绝对值
     console.log(Math.abs(1));
     console.log(Math.abs(-1));
     console.log(Math.abs('-1'));//-1
     console.log(Math.abs('白龙网'));/NaN
     //2.取整数
     console.log(Math.floor(8.111));//向下取整
     console.log(Math.ceil(1.1));//向上取整
    //四舍五入
    console.log(Math.round(1.1));
    console.log(Math.round(1.9));
    console.log(Math.round(-1.1));//-1
    console.log(Math.round(-1.5));//-1
    </script>
(3)随时数,实现随机抽奖功能
    <script>
    console.log(Math.random());//1.返回一个随机浮点数,取值范围大于等于0,并且小于1
    //2.得到两个数之间的随机整数,并包含这两个数,实现随时抽奖的功能
    function getRandom(min,max) {
        return Math.floor(Math.random() * (max - min + 1) + min);//取两个数之间(a<=x<=C)所有整数
    }
    var arr = ['张三','李四','王五','李麻子','李飞机','王大炮','白龙网'];
    console.log(arr[getRandom(0,arr.length -1)]);
    </script>
案例:随时猜字游戏
    <script>
    function getRandom(min,max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    var random = getRandom(1,100);
    for (i = 1; i <=10; i++) {
        var num =prompt('请输入1-10之间的数字');
        if (num > random) {
            alert('你猜大了,继续加油哦');
        } else if (num < random) {
            alert('又猜小啦,哈哈');
        } else {
            alert('恭喜你,猜对了');
        }
    }
    </script>
2、日期对象
(1)日期调用
如果没有参数,返回当前系统的当前时间;也可以跟参数,设置数字型:2022,7,15,或者字符型:2022-1-15
    <script>
    //Date()是一个构造函数,必须使用new来创建日期对象,类似于创建数组与创建对象
    var arr = new Array();
    var obj = new Object()
    var date = new Date();
    console.log(date);
    var date1 = new Date(2022,7,15);
    console.log(date1);
    var date2 = new Date('2022-7-15 15:21:56');
    console.log(date2);
    </script>
(2)年月日星期
    <script>
    var date = new Date();
    console.log(date.getFullYear());
    console.log(date.getMonth() + 1);//月的取值范围是0-11,比实际月数小于,因此加1即可
    console.log(date.getDate());
    console.log(date.getDay());//1-6对应星期,但是星期日是0
    //打印2022年7月15日星期五这个日期
    var yaer = date.getFullYear();
    var month = date.getMonth() + 1;
    var dates = date.getDate();
    var day = date.getDay();
    var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    console.log(yaer + '年' + month + '月' + dates + '日' + arr[day]);//用数组指定格式,用getDay()返回的数字作为下标,访问数组元素;另外,星期是0开始,到6结束
    </script>
 
(3)打印时分秒:14:20:08分,时与秒如果小于10,前面要补个0
    <script>
    var time = new Date();
    console.log(time.getHours());
    console.log(time.getMinutes());
    console.log(time.getSeconds());
    function getTime() {
        var time = new Date();
        var h = time.getHours();
        h = h < 10 ? '0' + h : h;
        var m = time.getMinutes();
        var s = time.getSeconds();
        s = s < 10 ? '0' + s : s;
        return h + ':' + m + ':' + s;
    }
    console.log(getTime());
    </script>
(4)获取毫秒数
①方法
获取Date()总的毫秒数(时间戳),不是当前时间的毫秒数,而是1970年后到现在,过了多少毫秒
    <script>
        var time = new Date();
        console.log(time.valueOf());//1.返回毫秒
        console.log(time.getTime());//2.返回毫秒
 
        var dates = +new Date();//3.返回毫秒,常用,不需要时间对象,直接使用
 
        console.log(dates);
 
        console.log(Date.now());//4.H5新增的;没参数表示当前时间,有参数表示你输入的时间,不需要时间对象,直接使用
    </script>
案例1:倒计时功能时间
    <script>
        function getCountDown(time) {
            var nowTime = +new Date();//计算当前时间
            var inputTime = +new Date(time);//计算停止时间
            var times = (inputTime - nowTime) / 1000;//转换为秒
            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(getCountDown('2022-7-15 17:38:21'));//实参,传递给形参time
    </script>
3、数组对象
(1)创建数组
    <script>
        //1.字面量创建数组
        var arr = [1,2,3];
        console.log(arr);
        //2.关键字创建数组
        var arr1 = new Array();//没有参数表示空数组
        console.log(arr1);
        var arr2 = new Array(6);//一个参数表示数组长度
        console.log(arr2);
        var arr3 = new Array(6,9)//两个或者两个以上参数,表示数组元素
        console.log(arr3);
    </script>
(2)判断是否为数组 instance of
    <script>
        //instanceof 检测是否为数组
        function reverse(arr) {
            if (arr instanceof Array) {//1.判断arr是否为一个数组
                var newArr = [];
                for (i = arr.length - 1; i >= 0; i--) {
                    newArr[newArr.length] = arr[i];
                }
                return newArr;
            } else {
                console.log('请输入一个数组,例如[1,2,3,4]');
            }
        }
        console.log(reverse([1,2,3,4,5,6]));
    </script>
 
    <script>
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array);//运算符判断
       console.log(obj instanceof Array);
       console.log(Array.isArray(arr));//新增方法判断
       console.log(Array.isArray(obj));
    </script>
(3)添加数组元素的两种方法 push() unshift()
    <script>
       var arr = [1,2,4,45,0];
       console.log(arr);
       //1.后面添加数组元素
       arr.push(90);//push()可以给数组添加一个或者多个新元素
       arr.push('白龙网','drupal');//参数直接写数组元素即可
       console.log(arr);//添加新元素后,原数组发生了变化;
       console.log(arr.push());//追加元素后返回新数组长度
       //2.从前面添加数组元素
       arr.unshift('abcde','front');
       console.log(arr);
       console.log(arr.unshift());
(4)删除数组元素 pop() shfit()
    <script>
    <script>
       var addarr = [1,2,3,5];
       console.log(addarr.pop());//删除最后一个元素;不带参数;原数组有变化;返回最后面删除的那个元素
       console.log(addarr);
       console.log(addarr.shift());//返回最前面删除的那个元素
       console.log(addarr);
    </script>
    </script>
案例1:把工资小于2000的元素放到新数组中去
    <script>
       var arr = [1800,1200,1500,2500,3600];
       var newArr = [];
       for (i = 0; i < arr.length; i++) {
        if (arr[i] < 2000) {
            newArr.push(arr[i]);//直接把符合条件的元素从后面追加到新数组,不用考虑下标的事儿
        }
       }
       console.log(newArr);
    </script>
(5)数组排序reverse() sort()
    <script>
       var arr = [8,4,15,98,2];
       //reverse()实现数据元素翻转
       arr.reverse();
       //冒泡排序,按升序排列
       console.log(arr);
       arr.sort(function(a,b){
        return a -b;
       });
       console.log(arr);
       //冒泡排序,按降序排列
       arr.sort(function(a,b){
        return b - a;
       });
       console.log(arr);
    </script>
(6)索引号  indexof() lastindexof()
    <script>
       var arr = ['白龙网',8,4,15,98,2,15];//数组名.indexof(数组元素),即可显示数组元素的索引号;从前往后找
       console.log(arr.indexOf(15));//返回第一个找到的索引号
       console.log(arr.indexOf(888));//如果找不到数据元素,就返回-1
       console.log(arr.lastIndexOf(15));//arr.lastIndexOf(15)从后面开始查找
    </script>
案例:使用indexof() 返回-1这一特性,实现去重的功能
    <script>
      function unique(arr) {
        var newArr = [];
        for (i = 0; i < arr.length;i++) {
            if (newArr.indexOf(arr[i]) == -1) {//在新数组中查找旧数组中的所有元素,如果返回值等于-1,说明新数组中没有旧数组的元素,就把旧数组中的该元素追加到新数组的后面
                newArr.push(arr[i]);
            }
        }
        return newArr;
      }
      var demo = unique([1,1,2,2,3,3]);
      console.log(demo);
    </script>
(7)数组转化为字符串 toString()  join()
    <script>
      var arr = [1,2,3,'白龙网'];
      console.log(arr.toString());//1,2,3,白龙网,默认是逗号隔开
      console.log(arr.join());//1,2,3,白龙网,默认是逗号分隔
      console.log(arr.join('-'));//1-2-3-白龙网,可任意修改分隔符号
    </script>
4、字符串对象
理论上说,对象才有属性和方法,只有复杂数据类型才有属性和方法。简单的数据类型为什么也有属性、方法呢?
这就涉及到基本包装类型:把简单的数据类型包装成复杂的数据类型。这个过程有3步:
var temp = new String('andy');//把临时变量转换为对象
str = tmp;//再把这个对象赋值给str
tmp =null;//销毁临时变量
把简单的数据类型包装成复杂的数据类型之后,简单数据类型就可以使用复杂数据类型的属性、方法了。
字符串不可变:给一个字符串赋值,看上去似乎是修改了原字符串的内容,实际上并没有修改原字符串内容。赋值操作实际是在内存中重新开辟了一个新的空间,然后让变量重新指向新的字符串,并且保留了原字符串。
由上可知,字符串的所有方法都不会改变字符串本身的内容,因此,操作完后,都会返回一个新的字符串。
(1)返回字符串位置(根据字符串返回字符串位置) indexof(str)  lastindexof(str)
    <script>
    var str = '春风春又生';
    console.log(str.indexOf('春'));//indexof()默认第一个参数填写要查找的字符即可
    console.log(str.indexOf('春',1));//第2个参数是起始位置,可以省略
    console.log(str.lastIndexOf('春'));//lastindexof()使用方法与上类同
    </script>
案例1:用indexof()查找a出现的位置和次数
    <script>
        var str = 'amnbvcxabacadjhggaaeafagwertyui';
        var index = str.indexOf('a');
        var num = 0;
        while (index !== -1) {
            console.log(index);//打印A出现的第一个位置:序号
            num++;//计数器记录A出现的次数
            index = str.indexOf('a',index + 1);//利用第一个位置的序号,依次寻找下一个A出现的位置:序号
        }
        console.log('a出现的次数是:' + num);
    </script>
同时,我们可以计算出数组中某元素出现的位置及次数
    <script>
        var arr = ['red','blue','red','green','black','red','orange','red'];
        var index = arr.indexOf('red');
        var num = 0;
        while (index !== -1) {
            console.log(index);
            num++;
            index = arr.indexOf('red',index + 1);
        }
        console.log('red出现的次数是:' + num);
    </script>
(2)返回字符串(根据字符串位置返回字符串)charAt(index) charCodeAt(index) str[index]
    <script>
       var str = 'www.bailong.org.cn';//遍历字符串
       for (i = 0 ; i < str.length; i++) {
        console.log(str.charAt(i));//1.charAt(index)根据位置/索引号返回字符串
       }
       console.log(str.charCodeAt(0));//2.charCodeAt(index),根据索引号返回字符对应的ASCII值,用来判断用来输入哪个键
       console.log(str[0]);//3.h5新增的,直接返回字符串
    </script>
案例1:每个字符重复次数与重复次数最多的字符
这个案例的精髓在于通过方法遍历字符串,把找到的字符串存入对象,通过判断对象属性值来记录每个字符出现的次数;同时还得到了一个新的对象。
然后,再遍历对象,计算出对象属性值中的最大值,同时把最大值对应的属性名传递至全局变量,进而打印出出现次数最多的字符。
<script>
      var str = 'aaabbcdefnnnnnnnnnnnnnnnnafkmkvbdd';
      var obj = {};
      for (i = 0; i < str.length; i++) {
        var chars = str.charAt(i);//1.遍历字符串,得到每个字符
        if (obj[chars]) {//2.把遍历到的字符存入对象,判断是否为真
            obj[chars]++;//3.若字符存在,则把字符存入对象,并记录数量:1++
        } else {
            obj[chars] = 1;//4.若字符不存在,则把该字符存入对象,并记录当前值=1
        }
      }
      console.log(obj);
      var max = 0;
      var ch = '';
      for (var k in obj) {//1.遍历对象
        if (obj[k] > max) { //2.计算对象中属性值的最大值
            max = obj[k];//3.obj[k]是属性值
            ch = k;//4.k是对象属性,是局部变量,需要传递给全局变量ch,方便在外部打印
        }
      }
      console.log('出现次数最多次数:' + max);
      console.log(ch);
    </script>
(3)拼接字符串 concat()
    <script>
      var str1 = 'bailong';
      var str2 = 'seo';
      var str3 = str1.concat(str2);//concat()方法类似+,用来拼接字符串,参数可以是变量,也可以是字符串
      var str4 = str1.concat('wang');
      console.log(str3);
      console.log(str4);
    </script>
(4)截取字符串 substr(index,length)
    <script>
      var str1 = 'bailong';
      console.log(str1.substr(2,2));//截取字符串,第一个参数表示索引号,第二个参数表示数据长度
    </script>
(5)替换字符串 replace(str1,str2)
使用遍历字符串的方法,借用replace()方法替换所有相同的字符
    <script>
      var str = 'wwwbailongorgcn';
      console.log(str.replace('w','n'));//1.把第一个字符堆成成第二个字符,只能替换第一次找到的字符,如果要替换所有相同字符,可以遍历字符串实现
      while (str.indexOf('w') !== -1) {//2.如果能查询到这个字符,就替换了
        str = str.replace('w','n');
      }
      console.log(str);
    </script>
(6)字符串转换为数组 split('|')
这个转换成join()把数组转换了字符串相反。
    <script>
      var str1 = 'www,bai,long,wang';
      var str2 = 'www#bai#long#wang'
      console.log(str1.split(','));//split('分隔符')把字符串转换成数组,字符串之间用什么隔开,就把这个隔开的符号放到split的参数中去即可
      console.log(str2.split('#'));
    </script>
(7)数据类型
简单数据类型,又叫值类型,有数字型,字符型,布尔型,未定义,null(返回空对象,没有想好存什么,可以用null).
复杂数据类型,又叫引用数据类型,如对象,数组。
 
简单数据类型放在栈里面,直接开辟一个空间,在栈里面存放的是值,
复杂数据类型放到堆里面。首先在栈进而存放地址,用十六进制表示,这个地址指向堆里面的数据,即值在堆里面放。
 
简单数据类型在传递参数时,是在栈中把值赋值给另外一个变量;而复杂数据类型在传递参数时,是在栈中把地址给另外一个变量,然后再通过地址到堆中去找到对应的值。