JS 内置对象

内置对象

JS 的对象分三种：自定义对象，内置对象，浏览器对象；前两种是JS的基础内容，第三个是JS独有的

1.内置对象：是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的的功能（属性和方法）

查找文档，用MDN来查询 内置对象，可以看内置对象的属性和方法
学习内置对象中的方法：

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

2.Math对象

1. Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法
2. Math 不是一个构造器（构造函数）就不需要new来调用，Math 的所有属性与方法都是静态的。引用圆周率的写法是 Math.PI，调用正余弦函数的写法是 Math.sin(x)，x 是要传入的参数。

1. Math.max() 和 Math.min()

1. 参数：一组数值

如果没有参数，则结果为 - Infinity

2. 返回值：

如果有任一参数不能被转换为数值，则结果为 NaN

<script>
        console.log(Math.max(1,99,'nihao'));//NaN
        console.log(Math.max());//-Infinity
        console.log(Math.max(1, 3, 2));//3
    </script>

3.利用对象封装自己的数学对象，里面有PI 属性，最大值和最小值方法

var myMath = {
            PI:3.1459,
            max:function(){//不确定要比较多少个数值中的最大值时，调用伪数组arguments
                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));

2. Math.floor() 向下取整

3. Math. ceil() 向 上取整

4. Math.round() 四舍五入取整

5. Math. abs() 求绝对值

 console.log(Math.floor(1.5));//1
         console.log(Math.floor(1.9));//1
         console.log(Math.ceil(2.1));//3
         console.log(Math.ceil(2.9));//3
         console.log(Math.round(3.5));//4
         console.log(Math.round(3.9));//4
         console.log(Math.round(-1.1));//-1
         console.log(Math.round(-1.5));//-1
         console.log( Math. abs(-1));//1
         console.log(Math. abs('-1'));//1
         //此处有隐式转换，把字符串型的-1转换成数字型

6.Math.random() 求随机数

1.Math.random() 函数返回一个浮点数, 伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1），然后您可以缩放到所需的范围
这个方法里面不跟参数
2.返回一个浮点型伪随机数字，在0（包括0）和1（不包括）之间：

function getRandom() {
  return Math.random();
}

3.返回两个数中之间的随机整数，并且包含这两个整数

<script>
        // 要调用Math.floor(Math.random()*(max-min+1))+min
        function  getRandom(min,max){
            return Math.floor(Math.random()*(max-min+1))+min;
        }
        console.log(getRandom(1,10));
        // 例如随机点名
        var arr=['小小','童童','大大','aiai','asas','asoaso'];
        console.log(arr[getRandom(0,arr.length-1)]);
        //将各个同学的姓名保存在数组中，是对数组的索引进行求随机数，注意从0开始，到数组长度减1
    </script>

4. 猜数字游戏：
   要求：程序随机生成一个1到10之间的数字，并让用户输入一个数字
   若大于该数字，就提示，数字大了，继续猜
   若小于该数字，就提示，数字小了，继续猜
   若等于该数字，就提示猜对了，结束程序

<script>
        //  分析：
        //  1.要生成随机数调用Math.random()方法中的返回两个数中之间的随机整数，并且包含这两个整数
        //  要调用Math.floor(Math.random()*(max-min+1))+min
        //  2. 一直猜到正确为止，用到循环，此处用while循环简单，那循环条件，需要保证一直猜，只到正确，才退出
        //  3. 用到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的数字：');
            if(num>random){
                alert('你猜大了');
            }
            else if(num<random){
                alert('你猜小了');
            }
            else{
                alert('你猜对了');
                break;//一定要结束此循环
            }
        }
    </script>

3. 日期对象（Date对象）

1. Date（）是一个构造函数，创建一个新Date对象的唯一方法是通过new 操作符
2. 如果没有输入任何参数，则Date的构造器会依据系统设置的当前时间来创建一个Date对象

      类比于之前学过的：
//    1. 创建一个数组对象：
//    var arr = new Array();
//    2. 创建一个对象：
//    var obj = new Object();
//    3. 创建一个新Date对象
   var date = new Date();
   console.log(date);//Wed Nov 03 2021 16:54:47 GMT+0800 (中国标准时间)

3. 参数常用的写法：
   数字型 2019,10,01
   (常用) 字符串型 ‘2019-10-1 10:20:30 ’

 <script>
   var date1 = new Date('2019-10-1 10:20:30');
   console.log(date1);
// Tue Oct 01 2019 10:20:30 GMT+0800 (中国标准时间)
var date2 = new Date(2021,11,3);
console.log(date2);
//Fri Dec 03 2021 00:00:00 GMT+0800 (中国标准时间)
    </script>

4. 日期格式化
   （1）getFullYear() 方法根据本地时间返回指定日期的年份，
   里面没有参数 ，返回一个四位数字，如1995
   （2）getMonth()方法根据本地时间返回指定日期的月份，
   里面没有参数
   getMonth返回一个0 到 11的整数值： 0 代表一月份，1 代表二月份， 2 代表三月份，依次类推，
   所以返回的月份比实际月份小一个月，记得在月份后加1后再输出
   （3）getDate()方法根据本地时间，返回一个指定的日期对象为一个月中的哪一日
   里面没有参数
   getDate() 返回一个1 到 31的整数值
   （4）getDay()方法根据本地时间，返回一个具体日期中一周的第几天
   里面没有参数
   返回一个0到6之间的整数值，代表星期几：** 0 代表星期日，** 1 代表星期一，2 代表星期二， 依次类推

格式化年月日 星期
var today = new Date();
        var year = today.getFullYear();
        var month = today.getMonth() + 1;//记得在月份后加1后再输出
        var date = today.getDate();
        var day = today.getDay();
        //输出2021年11月3日  星期三
        //getDay()返回的是数字，可以：采用数组格式：
        // 将星期一，星期二等全部写到数组中去，然后getDay()返回的是数组的索引号去调用数组中的元素
        //数组中第一个必定是星期日，因为在getDay()方法返回中0 代表星期日
        var arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        //getDay()今天返回3，正好对应数组中的星期三
        console.log(year + '年' + month + '月' + date + '日' + arr[day]);
//2021年11月3日星期三

（5）getHours() 方法根据本地时间，返回一个指定的日期对象的小时
里面没有参数
getHours返回一个0 到 23之间的整数值
（6）getMinutes() 方法根据本地时间，返回一个指定的日期对象的分钟数
里面没有参数
getMinutes 返回一个0 到 59的整数值
（7）getSeconds() 方法根据本地时间，返回一个指定的日期对象的秒数
里面没有参数
该方法返回一个 0 到 59 的整数值

 <script>
        // 要求封装一个函数返回当前的时分秒  格式  08：08：08
        function getTimer(){
            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;//18:07:09
        }
        console.log(getTimer());//17:58:53
        // 但此处若遇到0到9的各位数时，只显示单个数字
        // 若想出现01：03：02 的效果，用到前面学过的使用三元运算符来实现数字前面补零方法
        // 若数字在小于10，就在数字前面补零，否则，不补0
        //h=h < 10 ? '0' + h : h;别忘记三元表达式是有返回值的
    </script>

(8)获取日期的总的毫秒数(时间戳)；
Date对象是基于1970年1月1号（世界标准时间）起的毫秒数，得到当前时间距离1970年1月1号所经过的总的毫秒数

 // 1. 通过  valueOf() 和 getTime()
        var date = new Date();
        console.log(date. valueOf());
        console.log(date.getTime());
        // 2. 常用： +new date()
        var date1 = +new Date();
        console.log(date1);
        //3.H5新增的
        console.log(Date.now());

5. 倒计时案例：
   分析：
6. 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但不能拿着时分秒来相减，会出现负数：
7. 用时间戳来做，因为时间戳是过去的总的秒数，永远不会重复，所以用户输入时间的时间戳（毫秒数）减去现在的时间戳就是剩余的毫秒数
8. 把剩余的时间戳转换为天，时，分，秒
   公式：
   计算天数：d = parseInt(总秒数/60/60/24)
   计算小时：h = parseInt(总秒数/60/60%24)
   计算分钟：m = parseInt(总秒数/60%60)
   计算当前秒数：s = parseInt(总秒数%60)

<script>
        function countDown(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(countDown('2021-12-15 12:00:00'));
        //41天17时3分10秒,若想出现03分，要用到数字若小于10，在数字前补0的三元表达式
        //此时距离四级还有41天16时57分25秒
    </script>

3. 数组对象Array

1. 创建数组的两种方式：

<script>
        // 1.利用数组字面量
        var arr = [1, 2, 3];
        // 2. 利用new Array()
        // 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);
    </script>

2.检测是否是数组的方法：

1.用到 instanceof 运算符
2.用到 Array.isArray(参数)

<script>
         var arr = [];//创建空数组
         var obj = {};//创建空对象
         console.log(arr instanceof Array);//true
         console.log(obj instanceof Array);//false
         console.log(Array.isArray(arr));//true
         console.log(Array.isArray(obj));//false
    </script>

在翻转数组的函数体中，就可以加上判断用户传过来的实参是否为数组

function reverse(arr) {
            if(Array.isArray(arr)){
                var newArr = [];
                for (var i = arr.length-1; i >= 0; i--) {
                    newArr[newArr.length] = arr[i];
                }
                return newArr;
            }
            else {
                return 'error 这个参数要求是数组的格式';
            }
        }
        console.log(reverse([1, 3, 4, 'pink老师']));
        // ["pink老师", 4, 3, 1]
        console.log(reverse(1,2,3));
//error 这个参数要求是数组的格式

3.添加和删除数组元素的方法

1. push() 数组的末尾添加一个或多个元素

// 1. push(参数)  末尾添加一个或多个元素， 参数直接写要追加的元素
         var arr = [1,2,3];
        //  arr.push(4);
        //  console.log(arr);//[1, 2, 3, 4]
         console.log(arr.push(4));//4
//push()完之后，本身是有返回值的，返回结果是新数组长度

2. unshift() 数组的开头添加一个或多个元素

 // unshift(参数)  末尾添加一个或多个元素， 参数直接写要追加的元素
         var arr = [1,2,3]; 
         console.log(arr.unshift(4,6));//5
         arr.unshift(4,6);
         console.log(arr);//[4, 6, 1, 2, 3]
        //  unshift()_完之后，本身是有返回值的，返回结果是新数组长度

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

var arr = [1,2,3]; 
       //console.log(arr.pop());//3
       arr.pop();
       console.log(arr);// [1, 2]
    //    1. pop() 删除数组的最后一个元素,每次只能删除一个元素
    // 2.pop()是没有参数的
    // 3.pop()之后，返回结果是删除的那个元素

4.shift() 删除数组的第一个元素

 var arr = [1,2,3]; 
    //console.log( arr.shift());//1
        arr.shift();
        console.log(arr);// [2, 3]
       //1. shift() 删除数组的最后一个元素,每次只能删除一个元素
    // 2.shift()是没有参数的
    // 3.shift()之后，返回结果是删除的那个元素 

实例：要求将数组中的大于20的删除，剩余的放到新数组里面：
思想：用到 push() 将符合条件的添加到 新数组的末尾

<script>
       var arr = [1,5,8,3,56,34,21];
       var newArr = [];
       for(var i=0;i<arr.length;i++){
           if(arr[i]<20){
               newArr.push(arr[i]);
           }
       }
       console.log(newArr);
    </script>

4.数组的排序

1.数组的翻转：reverse()

// 数组的翻转
       var arr = [1,5,8,3,56,34,21];
        arr.reverse();
        console.log(arr);//[21, 34, 56, 3, 8, 5, 1]

2. 数组的冒泡排序： sort()

 var arr = [1,5,8,3,56,34,21];
        arr.sort(function(a,b){
            return a - b;
        });
        console.log(arr);//[1, 3, 5, 8, 21, 34, 56] 
// 此格式记住，a-b是升序排列，则b - a是降序排列

5.查找数组索引的方法

1. indexOf(数组元素)

1. 在数组中查找给定元素的第一个索引，若存在就返回索引号，若不存在，就返回 -1
2. 在数组中从前往后找，只返回第一个满足条件的索引号

2. lastIndexOf(数组元素)

1. 在数组中查找给定元素的最后一个索引，若存在就返回索引号，若不存在，就返回 -1
2. 在数组中从后往前找
3. 不是数组的索引号倒着数了

 var arr = [1,5,8,3,5,6,34,21];
     console.log(arr.indexOf(5));//1
     console.log(arr.lastIndexOf(5));//4

5.查找数组索引的方法

1. indexOf(数组元素)

1. 在数组中查找给定元素的第一个索引，若存在就返回索引号，若不存在，就返回 -1
2. 在数组中从前往后找，只返回第一个满足条件的索引号

2. lastIndexOf(数组元素)

1. 在数组中查找给定元素的最后一个索引，若存在就返回索引号，若不存在，就返回 -1
2. 在数组中从后往前找
3. 不是数组的索引号倒着数了

 var arr = [1,5,8,3,5,6,34,21];
     console.log(arr.indexOf(5));//1
     console.log(arr.lastIndexOf(5));//4

3. 案例：数组去重：（重点）

1. 要求：将旧数组里面不重复的元素选出来放到新数组中，重复的元素只保留一个
2. 核心算法：遍历旧数组，拿着旧数组元素去查询新数组，若该元素在新数组中没有出现过，就添加到新数组中，否则不添加
3. 关键：该元素在新数组中没有出现过，如何得知？
   利用在新数组中的 indexOf(数组元素)，若返回-1，则该元素在新数组中没有出现过

<script>
        // 封装一个去重函数
        function unique(arr){
            var newArray = [];
            for(var i=0;i<arr.length;i++){
                if(newArray.indexOf(arr[i])==-1){
                    newArray.push(arr[i]);
                    // 将元素放到一个新数组中利用push()方法
                }
            }
            return newArray;//别忘记返回
        }
        console.log(unique([1,3,2,2,4,4,5,5,6,6,7]));
        //[1, 3, 2, 4, 5, 6, 7]
    </script>

5.数组转换为字符串

1. 数组名. toString()
2. 数组名.join(分隔符) ，分隔符是自定义的各个元素的分隔符，默认的是逗号

<script>
        // 1. 数组名. toString()
        var arr = [1, 2, 3, 4];
        console.log(arr.toString());//1,2,3,4
        //2.   数组名.join(分隔符)  
        console.log(arr.join('-'));//1-2-3-4
    </script>

4. 字符串对象

1. 基本包装数据类型：
   把简单数据类型包装为复杂数据类型 ,这样基本数据类型就有了属性和方法
   本来，基本数据类型没有属性和方法，对象才有，过程如下代码实现：

 //  基本包装类型
        var str = 'hello';
        console.log(str.length);
        //str是简单的数据类型字符串类型，却有了属性length
        //实际包装的过程：有一个临时变量
        var t = new String('hello');
        str = t;
        t = null;//临时变量置空

JS中有三种基本包装类型：String Number Boolean
2. 字符串的不可变：
指的是：表面上可以通过给字符串赋值或拼接来改变字符串，但是仅仅是字符串指向了在内存中新开辟的空间，它的原来的值仍在占据着内存
3.关于字符串的所有方法，都不会修改字符串本身（字符串的不可变），操作完成就返回一个新的字符串

1. 根据字符返回位置

1. indexOf(字符串中的字符，[起始位置]) ,从前往后找，返回的是索引号，索引从0开始

此方法中的第二个参数，使用中括号，表示选填，当然也可以用于数组对象中

<script>
       var str = '0,1,2,3,4,5,1,3';
       //在字符串中别忘记逗号也是一个字符呀！索引号从0开始
       console.log(str.indexOf('1'));//找字符串中的1，从前往后找，找到它的索引
       //2
       console.log(str.indexOf('1',3));//从索引号3开始查找
       //8
     </script>

2. lastIndexOf(数组元素，[起始位置])，从后往前找，返回的是索引号，索引从0开始

3. 案例：求某个字符出现的位置以及次数：
   要求：查找字符串“abcoefoxyozzopp”中所有o出现的位置以及次数
   **核心算法：
   先查找第一个o出现的位置，然后只要indexOf()返回党的结果不是 -1 ，就继续往后查找，但因为indexOf()只能查找到第一个o,所以后面的查找，利用第二个参数，就是当前索引加1，从而继续查找 **

<script>
        var str = 'abcoefoxyozzopp';
        var index = str.indexOf('o');//找到第一个o的索引
        var num = 0;//次数
        while (index != -1) {
            console.log(index);//输出当前的o
            num++;
           index= str.indexOf('o', index + 1);//从当前o的索引加1查找下一个o,并且不断更新index
        }
        console.log(num);
        //3,6,9,12
        //4
    </script>

3.根据位置返回字符

1. charAt(索引号) 返回指定索引位置的字符

2.charCodeAt(索引号) 返回指定索引位置的字符的ASCII码

例如：大写的A的ASCII码是65，小写的是97

3.str[索引号] HTML5新增的

<script>
        //  1. charAt(index)  根据位置返回字符
       var str = 'hello';
       console.log(str.charAt(1));//e
       console.log(str);//hello
       //2.charCodeAt(索引号) 
       console.log(str.charCodeAt(0));//说明h的ASCII码值是104
       //3.str[索引号]
       console.log(str[0]);//h
     </script>

4. 案例：统计一个字符串中出现次数最多的字符
   要求：判断一个字符串“abcoefoxyozzopp”中出现次数最多的字符，并统计其次数
   核心算法：
5. 利用charAt() 遍历这个字符串
6. 把每个字符都存储给对象，若对象没有该属性，就为1，如果存在了就加1
7. 遍历对象，得到最大值该字符

<script>
        var str = 'abcoefoxyozzopp';
        var obj = {};//创建一个空对象
        for(var i=0;i<str.length;i++){
            var chars = str.charAt(i);//chars 是字符串中的每一个字符
//对象['属性名']  访问对象的属性，但此处的[字符串]的字符串不可以写死，
//用chars正好是每次循环取过来的字符，判断此字符是否是该对象其中的属性
            if(obj[chars]) //隐含着若表达式为true,则执行以下语句
            {
                obj[chars]++;//给属性值作加1操作
            }
            else{
                obj[chars]=1;
            }
        }
        console.log(obj);
        // a:1  b:1 c:1 e:1 f:1 o:4 p:2 x:1 y:1 z:2
//以上就是实现，把字符串中的每个字符存入对象obj中，并且每个属性都是有值的，等于字符在字符串中出现的次数
//遍历对象：用到for  in   
// 把对象中的属性值（字符出现的次数）取出来,求最大值
var max = 0;
var ch = '';
for (var k in obj){
    // 输出k,得到属性名
    // 输出obj[k],得到属性值
    if(obj[k]>max){
        max=obj[k];
        ch = k;//k 就是对象的属性，因旨在for循环中有效，先赋值给字符串保存起来
    }
}
console.log(max);//4
console.log('出现最多的字符是'+ch);
//出现最多的字符是o
    </script>

4.字符串的操作方法

1. concat(str1,str2....) 用于连接字符串，类似于 + 号
2. substr('截取的起始索引号'，'截取几个字符')

<script>
    var str = 'hello';
    console.log(str.concat('nihao'));// hellonihao
console.log(str.substr(1,3));//ell
    </script>  

3. 替换字符： replace('被替换的字符'，'替换为的字符')
4. 字符串转换为数组： split('分隔符') （与前面学过的join(‘分隔符’)反过来）
   此处的分隔符取决于字符串中的；

<script>
         //1.替换字符
         var str = 'xuexiya';
         console.log(str.replace('x','a'));//auexiya
         //仅仅替换第一个字符，一次只能替换一个
         //若想替换多个相同的字符，则可以用到循环
         //例如：将字符串"aboopgfrooe",要求将里面所有的o替换为d
         var str1 = "aboopgfrooe";
         while(str1.indexOf('o')!=-1){
             str1 = str1.replace('o','f');
         }
         console.log(str1);//abffpgfrffe
         //2.字符串转换为数组
         var str2 = 'red,blue,arr';
         console.log(str2.split(','));//["red", "blue", "arr"]
         var str3= 'red&blue&arr';
         console.log(str3.split('&'));//["red", "blue", "arr"]
         //此处的分隔符取决于字符串中的
     </script>