[JavaScript学习笔记]内置对象那些儿事儿(都是细节，我已收藏！)

内置对象

JavaScript中的对象分为3种：

• 自定义对象
• 内置对象
• 浏览器对象

---

前面两种对象是JS基础内容，属于ECMAScript；第三个浏览器对象属于我们JS独有的

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

查文档

MDN

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

网站地址

如何学习对象种的方法

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

Math对象

max最大值方法

        console.log(Math.PI);
        console.log(Math.max(1,99,3));
        console.log(Math.max(1,99,'41老师'));//NaN
        console.log(Math.max());//-Infinity

封装自己的数学对象

        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,2,3));
        console.log(myMath.min(1,2,3));

随机数方法 random()

• random()返回一个随机的效数 [0,1)
• 这个方法里面不跟参数
• 代码验证

        console.log(Math.random());

得到两个数之间的随机整数 并且包含这2个整数

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

其他math方法列举

方法	作用
Math.PI	圆周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入版，就近取整 -3.5->-3
Math.abs()	绝对值
Math.max()	最大值
Math.min()	最小值

案例：猜数字游戏

• 1.随机生成一个1-10的整数 我们需要用到Math.random()方法
• 2.需要一直菜刀正确位置，所以需要一直循环
• 3.while循环更简单
• 4.核心算法：使用if else if多分支语句来判断大于，小于，等于。

        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之间的一个数字');2
            if(num>random) alert('猜大了！');
            else if(num<random) alert('猜小了!');
            else{
                alert('猜对了！');
                break;
            }
        }

日期对象

Date()日期对象 是一个构造函数 必须使用new来调用创建我们的日期对象。
Date对象和Math对象不一样，它是一个构造函数，所以我们需要实例化后才能使用。

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

日期格式化

方法名	说明
getFullYear()	获取当年
getMonth()	获取当月(0-11)
getDate()	获取当天日期
getDay()	获取星期几(0-6)
getHours()	获取当前小时
getMinutes()	获取当前分钟
getSeconds()	获取当前秒钟

年月日星期

        var date = new Date();
        var year=date.getFullYear();
        var month=date.getMonth()+1;
        var days=date.getDate();
        var arr=['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
        var weekday=date.getDay();
        console.log('今天是'+year+'年'+month+'月'+days+'日'+arr[weekday]);

时分秒

        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());

Date总的毫秒数

距离1970.1.1过了多少毫秒数。

• 1.通过 valueof() getTime()
• 2.+new Date()返回的就是总的毫秒数
• 3.H5新增获得现在毫秒数 now()

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

        var date1 =+new Date();
        console.log(date1);

        console.log(Date.now());

案例：倒计时

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

        function countDown(time){
            var nowTime = +new Date();//返回当前时间总的毫秒数
            var inputTime = +new Date(time);//返回的时用户输入时间总的毫秒数
            var times = (inputTime -nowTime)/1000;//time时剩余时间总的秒数
            var d=parseInt(times/60/60/24);//day
            d=d<10?'0'+d:d;
            var h=parseInt(times/60/60%24);//hour
            h=h<10?'0'+h:h;
            var m=parseInt(times/60%60);//minite
            m=m<10?'0'+m:m;
            var s=parseInt(times%60);//second
            s=s<10?'0'+s:s;
            return d+' day '+h+' hour '+m+' minute '+s+' second ';
        }
        console.log(countDown('2021-5-1 18:00:00'))

数组对象

创建数学对象的两种方式

• 字面量方式
• new Array()

        //1.利用数组字面量
        var arr=[1,2,3];
        console.log(arr[0]);
        //2.利用new Array()    
        var arr1=new Array(2);//这个2表示数组的长度为2
        var arr2=new Array(2,3);//这个2是数组中的第一个元素2
        console.log(arr1);

检测是否为数组

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

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

• Array.isArray(参数) H5新增的方法，ie9以上版本支持

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

添加删除数组元素的方法

方法名	说明	返回值
push(参数1…)	末尾添加一个或多个元素，注意修改原数组	并返回新的长度
pop()	删除数组最后一个元素，把数组长度减1无参数，修改原数组	返回它删除的元素的值
unshift(参数1…)	向数组的开头添加一个或更多元素，注意修改原数组	并返回新的长度
shift()	删除数组的第一个元素，数组长度减1无参数，修改原数组	并返回第一个元素的值

数组排序

方法名	说明	返回值
reverse()	倾倒数组中元素的顺序，无参数	该方法会改变原来的数组，返回新数组
sort()	对数组的元素进行排序	该方法会改变原来的数组，返回新数组

注意sort出现双位数会存在一定的bug 比如

        var arr1=[13,4,77,1,7];
        arr1.sort();
        console.log(arr1);//1 13 4 7 77  会先看第一位数

数组索引方法

方法名	说明	返回值
indexOf()	数组中查找给定元素的第一个索引	如果存在返回索引号，如果不存在，则返回-1
lastIndexOf()	在数组中的最后一个索引	如果存在返回索引号，如果不存在，则返回-1

数组转换为字符串

方法名	说明	返回值
toString()	把数组转换成字符串，逗号分隔每一项	返回一个字符串
join(‘分隔符’)	方法用于把数组中的所有元素转换为一个字符串	返回一个字符串

        var arr=[1,2,3];
        console.log(arr.toString());
        var arr1=['green','blue','yellow'];
        console.log(arr1.join('-'));//可以为空分隔符

课下查询

方法名	说明	返回值
concat()	连接两个或多个数组，不影响原数组	返回一个新的数组
slice()	数组截取slice(begin，end)	返回被截取项目的新数组
splice()	数组删除splice(第几个开始，要删除个数)	返回被删除项目的新数组，注意，这个会影响原数组

slice()和splice()目的基本相同，建议同学们重点看下splice()

案例

1.筛选数组

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

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

2.数组去重

        function unique(arr){
            var newArr=[];
            for(var i=0;i<arr.length;i++){
                if(newArr.indexOf(arr[i]) === -1){
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var demo=unique(['c','a','a','a','b','b']);
        console.log(demo);

字符串对象

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

字符串的不可变

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

因为我们字符串的不可变所以不要大量的拼接字符串

根据字符返回位置

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

方法名	说明
indexOf(‘要查找的字符’,‘开始的位置’)	返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是index索引号
lastIndexOf()	从后往前找，只找第一个匹配的

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

方法名	说明	返回值
charAt(index)	返回指定位置的字符(index 字符串的索引号)	str.charAt(0)
charCodeAt(index)	获取指定位置处字符的ASCII码(index索引号)	str.charCodeAt(0)
str[index]	获取指定位置处字符	HTML5,IE8+支持和charAt()等效

字符串操作方法(重点)

方法名	说明
concat(str1,str2,str3…)	concat()方法用于连接两个或多个字符串，拼接字符串，等效于+，+更常用
substr(start,length)	从start位置开始(索引号)，length取得个数，重点记住这个
slice(start,end)	从start位置开始，截取到end位置，end取不到(他们俩都是索引号)
substring(start,end)	从start位置开始，截取到end位置，end娶不到，基本和slice相同，但是不接受负值
replace(‘被替换的字符’,‘替换的字符’)	它只会替换第一个字符
split(‘分隔符’)	转数组

        var str='red&green&yellow';
        console.log(str.split('&'));

课下查询

• toUpperCase() //转换大写
• toLowerCase() //转换小写

案例

1.求某个字符出现的位置以及次数

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

        var str='abcoefoxyozzopp';
        var index=str.indexOf('o');
        var num=0;
        while(index!== -1){
            num++;
            console.log(index);
            index=str.indexOf('o',index+1);
        }
        console.log('出现次数:'+num);

2.出现次数最多的字符

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

3.替换所有的o为*

        var str='abcoefoxyozzopp';
        while(str.indexOf('o')!==-1){
            str=str.replace('o','*')
        }
        console.log(str);