js内置对象

1.内置对象

JavaScript中的对象分为三种:自定义对象(var obj= {})、内置对象、浏览器对象。
前面两种对象是js基础内容，属于ecmascript;第三个浏览器对象属于我们js独有的，到JS API讲解
内置对象： 就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是基本而必要的功能(属性和方法)
内置对象最大的优点就是帮助我们快速开发。
JavaScript提供了多个内置对象:Math,Date，Array，String等

2.查文档

2.1MDN

2.2如何学习对象中的方法

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

3.Math对象

 //Math 数学对象，不是一个构造函数  ，我们不需要new调用，而是直接使用里面属性和方法即可
        console.log(Math.PI); //3.1415926
        console.log(Math.max(1, 66, 8, 24, 52, 16, 111)); //111
        console.log(Math.max(11, 22, 65, 4, 'ss')); //NaN
        console.log(Math.max()); //-infinity

3.1封装自己的数学对象

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(5, 6, 9, 52, 2, 5, 11, 22));
        console.log(myMath.min(5, 6, 9, 52, 2, 5, 11, 22));

3.2取绝对值和取值

//1.取绝对值自
        console.log(Math.abs(-1)); //1
        console.log(Math.abs('-1')); //1  有隐式转换，会把字符串-1转换为数字型

        //2.三个取整方法
        // (1) Math.floor() 向下取整 往最小取值
        console.log(Math.floor(1.1)); //1
        console.log(Math.floor(1.9)); //1
        //（2）Math.ceil()往上取整  取最大值
        console.log(Math.ceil(1.1)); //2
        console.log(Math.ceil(1.9)); //2
        //(3)Math.round()四舍五入  其他数字都是四舍五入  但是.5特殊，它往大的取
        console.log(Math.round(1.1)); //1
        console.log(Math.round(1.5)); //2
        console.log(Math.round(1.9)); //2
        console.log(Math.round(-1.5)); //-1

3.3随机数方法

        //随机数方法:1.Math.random()  返回一个随机的小数  0<=x<1
        //2.这个方法里面不跟参数
        //3.代码验证
        console.log(Math.random());
        //4.得到两个数之间的随机整数 包括两个整数在内
        function getRandomIntInclusive(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
        }
        console.log(getRandomIntInclusive(1, 10));
        //5.随机点名
        var arr = ['张三丰', '风清扬', '天山童姥', '华山', '李四'];
        console.log(arr[getRandomIntInclusive(0, arr.length - 1)]);

4.Date（）日期对象

4.1date方法的使用

1.获取当前时间必须实例化:

 //1.使用Date  如果没有参数  返回当前系统的当前时间
        var date = Date();
        console.log(date);

2.date（）构造函数的参数
如果括号里面有时间，就返回当前参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写出new Date（‘2019-5-1’），或者new Date(‘2019/5/1’);

 //2.参数的常用写法  数字型2019,10,01  或者是字符串型  '2019-10-1 8:8:8'
        var date1 = new Date(2019, 01, 1);
        console.log(date1); //返回11月 不是10月
        var date2 = new Date('2019-10-01 8:8:8')
        console.log(date2);

4.2日期格式化

年月日格式化

        //格式化日期年月
        var dategeshi = new Date();
        console.log(dategeshi.getFullYear());
        console.log(dategeshi.getMonth()); //返回月份  是0-11月  返回的月份小一个月  要返回真实的  +1即可
        console.log(dategeshi.getMonth() + 1);
        console.log(dategeshi.getDate()); //返回的是几号
        console.log(dategeshi.getDay()); //返回的是周几  周一返回1 周六返回6  周日返回0
        //我们写一个2019年5月1日星期三
        var year = dategeshi.getFullYear();
        var month = dategeshi.getMonth() + 1;
        var dates = dategeshi.getDay();
        var day = dategeshi.getDay();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        console.log('今天是' + year + '年' + month + '月' + dates + '日' + arr[day]);

时分秒格式化

  //格式化日期 时分秒
        //要求封装一个函数 返回当前的时分秒  格式08:05:08
        var datt = new Date();
        console.log(datt.getHours()); //当前小时
        console.log(datt.getMinutes()); //当前分数
        console.log(datt.getSeconds()); //当前秒数
        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());

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

Date对象是基于1970年1月1日(世界标准时间)起的毫秒数
我们经常用总的毫秒数来计算时间，因为它更精确。

  //获取Date毫秒数(时间戳)   不是当前时间的毫秒数  而是距离1970年1月1日过了多少毫秒
        //1.通过valueOf() getTime();
        var da = new Date();
        console.log(da.valueOf()); //就是我们现在时间距离1970.1.1总的毫秒数
        console.log(da.getTime());
        //2.简单写法
        var da1 = +new Date(); //+new Date()返回的就是总的毫秒数   最常用!!!
        console.log(da1);
        //3.H5新增方法获得总的毫秒数
        console.log(Date.now());

4.4倒计时

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

    /* d = parseInt(总秒数 / 60 / 60 / 24);
    计算天数
    h = parseInt(总秒数 / 60 / 60 % 24);
    计算小时
    m = parseInt(总秒数 / 60 % 60);
    计算分数
    s = parseInt(总秒数 % 60);
    计算当前秒数 */

function countDowm(time) {
            var nowTime = +new Date(); //返回的是当前时间总的毫秒数
            var inpuTime = +new Date(time); //返回的是用户输入时间总的毫秒数
            var times = (inpuTime - nowTime) / 1000; //time剩余时间总的秒数
            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(countDowm('2021-6-9 18:00:00'));

5.Array()数组对象

5.1创建数组的两种方式

//创建数组两种方式
        //1.利用数组字面量
        var arr = [1, 2, 3];
        console.log(arr[0]);
        //2.利用new Arrat()
        //var arr1 = new Array(); //创建了一个空数组
        //var arr1 = new Array(2); //这个2表示数组长度为2，里面有两个空的数组元素
        var arr1 = new Array(2, 3); //等价于[2,3]  这样写表示里面有2个数组元素 是2和3
        console.log(arr1);

5.2检测是否为数组

  //翻转数组
        function rev(arr) {
            // if (Array.isArray(arr))
            if (arr instanceof Array) { //判断是否为数组
                var newArray = [];
                for (var i = arr.length - 1; i >= 0; i--) {
                    newArray[newArray.length] = arr[i];
                }
                return newArray;
            } else {
                return '这个参数必须要求是数组格式'
            }

        }
        console.log(rev([1, 2, 3]));
        console.log(rev(1, 2, 3));
        //检测是否为数组
        //(1)instanceof  运算符 它可以用来检测是否为数组
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array); //true
        console.log(obj instanceof Array); //false
        //(2)Array.isArray(参数)   H5新增方法  ie9以上版本支持
        console.log(Array.isArray(arr)); //true
        console.log(Array.isArray(obj)); //false

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

‘

 //添加数组元素方法

        //1.push() 在我们数组的末尾 添加一个或多个数组元素 push 推
        var arr = [1, 2, 3];
        // arr.push(4, 'xu');
        console.log(arr.push(4, 'xu')); //返回新数组长度
        console.log(arr);
        //(1)push 目的是可以给数组追加新的元素
        //(2)push()参数直接写 数组元素就可以了
        //(3)push完毕后 ，返回结果是新数组的长度
        //(4)原数组也会发生变化


        //2.unshift() 在我们数组的开头 添加一个或多个数组元素
        console.log(arr.unshift('sada', 23)); //返回新数组长度
        console.log(arr);
        //(1)unshift 目的是可以给数组追加新的元素
        //(2)unshift()参数直接写 数组元素就可以了
        //(3)unshift()完毕后 ，返回结果是新数组的长度
        //(4)原数组也会发生变化

        //3.pop()可以删除数组最后一个元素
        console.log(arr.pop());
        console.log(arr);
        //(1)pop 目的是可以删除数组最后一个元素  记住一次只能删除一个数组元素
        //(2)pop()没有参数
        //(3)pop结束后，返回结果是删除的那个元素
        //(4)原数组也会发生变化

        //4.shift() 可以删除数组的一个元素
        console.log(arr.shift());
        console.log(arr);
        //(1)shift() 目的是可以删除数组最前面一个元素  记住一次只能删除一个数组元素
        //(2)shift()没有参数
        //(3)shift()结束后，返回结果是删除的那个元素
        //(4)原数组也会发生变化

筛选数组

var arr = [1500, 1200, 2000, 2100, 1800];
        var newArray = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] < 2000) {
                //newArray[newArray.length] = arr[i];
                newArray.push(arr[i]);
            }

        }
        console.log(newArray);

核心代码:

  newArray.push(arr[i]);

5.4数组排序

 //数组排序
        //1.翻转数组
        var arr = ['pink', 'blue', 'green'];
        arr.reverse();
        console.log(arr);


        //2.数组排序(冒泡排序)
        // var arr1 = [3, 4, 5, 9, 1, 2];
        var arr1 = [13, 1, 4, 77, 7]; //不是规则排列了  因为它先看左边  1和13左边都是1 就排在一起


        //解决方案
        arr1.sort(function(a, b) {
            // return a - b; //按照升序排列
            return b - a; //降序排列
        })
        console.log(arr1);

5.5数组索引

str.indexOf(‘要查找的字符’,[起始的位置]) 默认起始位置从开头开始

 console.log(arr.indexOf('blue',4));//从索引号4开始查找

   //返回数组索引号方法  indexOf（）从前往后找，如果找不到就返回-1
        //他只返回第一个满足条件的索引号
        //如果在该数组里面找不到元素  返回-1
        var arr = ['red', 'blue', 'green', 'pink', 'blue']
        console.log(arr.indexOf('blue'));//1
        console.log(arr.indexOf('ss')); //-1
        //lastIndexOf()了解即可，从后往前找，如果找不到就返回-1
        console.log(arr.lastIndexOf('blue')); //4
        console.log(arr.lastIndexOf('ss')); //-1

小案例:(数组去重)

 //目标 就数组里面不重复的元素放到新数组中，重复元素只保留其中一个，放到新数组中去重
        //核心算法:遍历就数组，然后拿着旧数组的元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加
        //利用新数组indexOf()如果返回-1，说明没有 就可以添加
        //var arr = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']
        //封装一个去重函数
        function uni(arr) {
            var newArray = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArray.indexOf(arr[i]) === -1) {
                    newArray.push(arr[i]);
                }
            }
            return newArray;
        }
        var arr1 = uni(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
        console.log(arr1);

5.6数组转换为字符串

//数组转换为字符串
        //老方法
        var str = '';
        var arr = ['red', 'green', 'blue', 'xujiang'];
        var sep = prompt('输入您的分隔符')
        for (var i = 0; i < arr.length; i++) {
           str += arr[i] + sep;
         }
        console.log(str);
        //1.toString() 将我们数组转换为字符串
        var arr = [1, 2, 3];
        console.log(arr.toString()); //1,2,3
        //2.join(分隔符);
        var arr1 = ['green', 'pink', 'blue']
        console.log(arr1.join()); //什么都不写 默认用逗号隔开
        console.log(arr1.join('-')); //green-pink-blue
        console.log(arr1.join('&')); //green&pink&blue

6.字符串对象

6.1基本包装类型

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

 var str = 'andy';
        console.log(str.length);//4
        //对象才有属性和方法   复杂数据类型才有属性和方法
        //简单数据类型为什么会有length属性呢？
        //基本包装类型:就是把简单数据类型 包装成为了 复杂数据类型
        //包装流程:
        //(1)把简单数据类型包装成为复杂数据类型
        var temp = new String('andy');
        //(2)把临时变量的值给str
        str = temp;
        //(3)销毁这个临时变量
        temp = null;

6.2字符串的不可变性

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

  //字符串不可变性
        var str = 'pink';
        console.log(str);
        str = 'red';
        console.log(str);
        //因为字符串的不可变 所以不要大量拼接字符串
        var str = '';
        for (var i = 0; i <= 100; i++) {
            var sum = 0;
            sum += i;
        }
        console.log(str);

6.3根据字符返回位置

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

//字符串对象  根据字符返回位置  str.indexOf('要查找的字符',[起始的位置])
        var str = '改革春风吹满地，春天来了';
        console.log(str.indexOf('春')); //返回2
        console.log(str.indexOf('春', 3)); //从索引号3开始  查找春  返回8

案例

 //查找字符串'abcoefoxyozzopp'中所有o出现的位置以及次数
        //核心算法:先查找第一个o出现的位置
        //然后 只要indexOf()结果不是-1就继续往后去查找
        //因为indexOf()只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找
        var str = 'abcoefoxyozzopp';
        var index = str.indexOf('o')
            // console.log(index);
        var num = 0;
        while (index !== -1) {
            console.log(index);
            num++;
            index = str.indexOf('o', index + 1);

        }
        console.log('o出现次数为:' + num);

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

ASCII表

 //根据位置返回字符
        //1. charAt(index) 根据位置返回字符
        var str = 'andy';
        console.log(str.charAt(3));
        //遍历所有字符
        for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i));
        }
        //2.charCodeAt(index) 返回相应索引号字符的ASCII值  目的:判断用户按了哪些键
        console.log(str.charCodeAt(0)); //97 ASCII值
        //3. str[index] H5新增的
        console.log(str[2]); //d

案例
判断一个字符串中出现最多次数的字符，并统计其次数

 //核心算法  
        //1.利用charAt()遍历整个字符串
        //2.把每个字符都存储给对象，如果对象没有该属性 就为1，如果存在了就+1
        //3.遍历对象，得到最大值和该字符
        //o.a=1;
        //o.b=1;
        //o.3=1;
        //o.4=4;
        var str = 'abcoefoxyozzopp';
        var o = {

        }
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i);
            if (o[chars]) { //o[chars]得到的是属性值
                o[chars]++;

            } else {
                o[chars] = 1;
            }
        }
        console.log(o);
        var max = 0;
        var ch = '';
        for (var k in o) {
            if (max < o[k]) {
                max = o[k];
                ch = k;

            }
        }
        console.log(max, '最多的字符是:' + ch);

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

//字符串操作方法
        //1.conact('字符串1','字符串2'...) 拼接
        var str = 'andy';
        console.log(str.concat('red')); //andyred
        //2.substr('截取的起始位置','截取几个字符');
        var str1 = '改革春风吹满地';
        console.log(str1.substr(2, 2)); //春风 第一个2是索引号2 从第几个开始  第二个2 是截取几个字符


        //3.替换字符串 replace('被替换的字符','替换为的字符');
        var str3 = 'andyll';
        console.log(str3.replace('a', 'b')); //bndyll 只会替换第一个字符
        //有一个字符串  'abcoefoxyozzopp'要求把里面所有的o替换为*
        var tihu = 'abcoefoxyozzopp';
        while (tihu.indexOf('o') !== -1) {
            tihu = tihu.replace('o', '*')
        }
        console.log(tihu); //abc*ef*xy*zz*pp

        //4.字符串转换为数组 split('分隔符')  前面我们学过join把数组转换为字符串   console.log(arr1.join('-')); //green-pink-blue
        var tiArr = 'red,blue,green';
        console.log(tiArr.split(',')); //(3) ["red", "blue", "green"]
        var tirr1 = 'red&blue&green';
        console.log(tirr1.split('&')); //(3) ["red", "blue", "green"]

     //5.大小写转换
        var xiaoxie = 'sasjkxnc';
        console.log(xiaoxie.toUpperCase()); //SASJKXNC
        var daxie = 'ASDSCCS';
        console.log(daxie.toLowerCase()); //asdsccs

案例

 //给定一个字符出啊安  如:'absadjakdaklcnbjcajklssdasc',问题如下
        //字符串长度
        //取出指定位置字符 如0,3,6，9
        //查找指定字符
        //替换字符
        //截取字符
        //找出最多次数
        var str = 'absadjakdaklcnbjcajklssdasci';
        console.log(str.length);
        console.log(str.charAt(0));
        console.log(str[3]);
        console.log(str.charAt(5));
        console.log(str.charAt(9));
        var iii = 'i';
        for (var i = 0; i < str.length; i++) {
            if (iii === str[i]) {
                console.log('存在');
            } else {
                console.log('不存在');
            }
        }
        // console.log(str.replace('a', '555'));
        while (str.indexOf('b') !== -1) {
            str = str.replace('b', 'z')
        }
        console.log(str);
        console.log(str.substr(2, 6));

        var o = {

        }
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i);
            if (o[chars]) {
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);
        var max = 0;
        var ch = '';
        for (var k in o) {
            if (max < o[k]) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max, '最多的字符是' + ch);
        console.log(str.split(''));