javascript内置的对象的区别 js中内置对象有哪些

目标：

• 能够说出什么是内置对象
• 能够根据文档查询指定API的使用方法
• 能够使用Math对象的常用方法
• 能够使用Date对象的常用方法
• 能够使用Array对象的常用方法
• 能够使用String对象的常用方法

1.  内置对象

• JavaScript中的对象分为3种:自定义对象、内置对象、浏览器对象
• 前面两种对象是JS基础内容，属于ECMAScript;第三个浏览器对象属于我们JS独有的，我们JSAPI讲解
• 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了 些常用的或是最基本而必要的功能(属性和方法)
• JS中提供了多个内置对象：Math、Date、Array、String等。

2. 查文档

2.1  MDN

有两种查询方式：MDN和W3C  ( 推荐使用MDN )

MDN网址：MDN Web Docs

2.2 然后学习对象中的方法 

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

3. Math 对象

 Math 数学对象，不是一个构造器，所以不需要new来调用，而是直接使用里面的属性和方法即可

<script>
        // Math 数学对象，不是一个构造器，所以不需要new来调用，而是直接使用里面的属性和方法即可
        console.log(Math.PI);  //一个属性 圆周率
        console.log(Math.max(1, 99, 67, 123));  //123
        console.log(Math.max(1, 9, 'lsy'));  //NaN
        console.log(Math.max()); //-Infinity

    </script>

封装自己的数学对象： 

<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, 3, 9));
        console.log(mymath.min(1, 3, 9));
    </script>

3.1 Math 常用方法 

Math.PI;          //圆周率

Math.floor（）;          //向下取整

Math.ceil（）;          //向上取整

Math.round（）;          //四舍五入版  就近取整  注意：-3.5  结果是 -3

Math.abs（）;          //取绝对值

Math.max（） / Math.min（）;          //求最大值和最小值

<script>
        // 1. 绝对值
        console.log(Math.abs(1));  //1
        console.log(Math.abs(-1));  //1
        console.log(Math.abs('-1')); //1  隐式转换，会把字符串型 -1 转换为数字型
        console.log(Math.abs('lsy'));  //NaN

        // 2. Math.floor()  向下取整  往最小了取值
        console.log(Math.floor(1.1));  //1
        console.log(Math.floor(1.9));  //1

        // 3. Math.ceil()  向上取整  往最大了取值
        console.log(Math.ceil(1.1));  //2
        console.log(Math.ceil(1.9));  //2
        
        // 4. Math.round()  四舍五入
        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.1));  //-1
        console.log(Math.round(-1.5));  //-1  其他数字都是四舍五入，但是 .5特殊，它往大了取
        console.log((Math.round(-1.9))); //-2
    </script>

 3.2 随机数方法 Randon()

Math.floor(Math.random()*(max-min+1))+min;  //得到两个数之间的随机整数公式

<script>
        // 1. Random()  返回一个随机小数， [0,1)
        // 2. 这个方法里面不跟参数
        // console.log(Math.random());
        // 3. 我们想要得到两个数之间的随机整数 并且 包含这两个整数
        // 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));
        // 4. 随机点名
        var arr = ['张三', '李四', '王五'];
        console.log(arr[getRandom(0, arr.length - 1)]);
    </script>

猜数字游戏：

<script>
        function getRandom(max, min) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var random = getRandom(1, 10);
        while (true) {    //死循环
            var arr = prompt('请输入一个1-10之间的数字：');
            if (arr > random) {
                alert('该数字大了，请继续猜');
            } else if (arr < random) {
                alert('该数字小了，请继续猜');
            } else {
                alert('猜对了！')
                break;  //退出整个循环结束程序
            }
        }


        // 猜一个1-50之间的数，但只有十次猜的机会
        function getRandom(max, min) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var random = getRandom(1, 50);
        var i = 1;
        while (i <= 10) {    //死循环
            var arr = prompt('请输入一个1-10之间的数字：');
            if (arr > random) {
                alert('该数字大了，请继续猜');
                i++;
            } else if (arr < random) {
                alert('该数字小了，请继续猜');
                i++;
            } else {
                alert('猜对了！')
                break;  //退出整个循环结束程序
            }
        }
</script>

 4. 日期对象

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

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

2. Date() 构造函数参数

// 2. 参数常用的写法  数字型  2021,12,15 或者字符串 '2021-12-15 8:8:8'
        var date1 = new Date(2021, 11, 15);
        console.log(date1);  //返回的是12月，而不是11月，如果是（2021,12,15）则返回的是2022，1,15
        var date2 = new Date('2021-12-15 8:8:8');
        console.log((date2));

3. 年月日

<script>
        // 格式化日期  年月日
        var date = new Date();
        console.log(date.getFullYear());//2021
        console.log(date.getMonth() + 1);// 月份是从0-11
        console.log(date.getDate()); //15
        console.log(date.getDay());  //3   周一到周六是1-6 周日是0

        // 写一个 2021年 5月 1日 星期三
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var days = date.getDay();
        console.log('今天是：' + year + '年' + month + '月' + dates + '日\t' + arr[days]);
    </script>

 4. 时分秒

<script>
// 要求封装一个函数，显示时分秒
        function gettime() {
            var time = new Date();
            var hour = time.getHours();
            hour = hour < 10 ? '0' + hour : hour;
            var minute = time.getMinutes();
            minute = minute < 10 ? '0' + minute : minute;
            var second = time.getSeconds();
            second = second < 10 ? '0' + second : second;   //都要在前面赋值
            return hour + ':' + minute + ':' + second;
        }
        console.log(gettime());
    </script>

5. 获取日期的总的毫秒形式（时间戳）

<script>
        // 表示当前的后面数，而是距离1970年1月1号过了多少毫秒数
        // 1. 通过 valueOf()  gettime()
        var date = new Date();
        console.log(date.valueOf());
        console.log(date.getTime());
        // 2. 简单写法（最常用）
        var date = +new Date();
        console.log(date);
        // 3. H5新增的 获得的总的毫秒数
        console.log(Date.now());
    </script>

 转换公式如下:

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

 6. 倒计时案例（重要）

<script>
        function countdown(time) {
            var nowtime = +new Date();  //返回的是当前时间总的毫秒数
            var inputtime = +new Date(time);  //返回的是输入时间总的毫秒数
            var times = (inputtime - nowtime) / 1000;    //返回的是剩余时间总的秒数  1000ms=1s
            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-16 18:00:00'));
    </script>

5. 数组对象

 5.1 创建数组对象的两种方式:

• 字面量方式
• new Array（）

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

 检测是否为数组：

<script>
        function getarr(arr) {
            if (arr instanceof Array) {
                var newarr = [];
                // for (var i = 0; i < arr.length; i++) {
                //     newarr[arr.length - 1 - i] = arr[i];
                // }
                for (var i = arr.length - 1; i >= 0; i--) {
                    newarr[newarr.length] = arr[i];
                }
                return newarr;
            } else {
                return '要求输入的必须为数组格式';

            }
        }
        console.log(getarr([1, 2, 3]));
        console.log(getarr(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));
        console.log(Array.isArray(obj));
    </script>

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

5.2.1 添加数组元素的方法

<script>
        // 1. push() 在我们数组的末尾，添加一个或多个数组元素   push  推
        var arr = [1, 2, 3];
        // arr.push(4, 'lsy');  //注意不是写等号 =（4）
        console.log(arr.push(4, 'lsy'));    //5  要把 arr.push(4, 'lsy'); 注释起来，不然输出的数组长度会在原有的5个上再加2个
        console.log(arr);   // [1, 2, 3, 4, "lsy"]
        // push 完毕之后，返回的结果是新数组的长度
        // push 后直接写参数
        // 原数组发生变化

        // 2. unshift 在我们数组的开头，添加一个或多个数组元素
        // arr.unshift('pink');
        console.log(arr.unshift('pink'));  //6
        console.log(arr);  //["pink", 1, 2, 3, 4, "lsy"]
        // unshift 完毕之后，返回的结果是新数组的长度
        // unshift 后直接写参数
        // 原数组发生变化
        
    </script>

5.2.2 删除数组元素的方法

// 1. pop() 可以删除数组的最后一个元素  一次只能删除一个元素
        // arr.pop();
        console.log(arr.pop());  //lsy 
        console.log(arr);   //["pink", 1, 2, 3, 4]
        // pop 完毕之后，返回的结果是删除的那个元素
        // pop 后没有参数
        // 原数组发生变化

        // 2. shift() 可以删除数组的第一个元素  一次只能删除一个元素
        console.log(arr.shift());  //pink
        console.log(arr);   //[ 1, 2, 3, 4]
        // shift 完毕之后，返回的结果是删除的那个元素
        // shift 后没有参数
        // 原数组发生变化
    </script>

5.3 数组排序

<script>
        // 1. 翻转数组
        var arr = [1, 2, 3];
        arr.reverse();
        console.log(arr);  //[3,2,1]

        // 2. 数组排序 （冒泡排序）
        var arr1 = [1, 5, 3, 7, 9, 4];
        arr1.sort();
        console.log(arr1);

        var arr2 = [1, 55, 13, 77, 19, 4];
        // arr2.sort();  //这个方法缺点是：直接这样排序，如果数组的元素超过个位数，就会紊乱
        arr2.sort(function (a, b) {         //注意：要把整个函数都包含在小括号里
            // return a - b;   //升序的顺序排列
            return b - a;   //降序的顺序排列
        })
        console.log(arr2);   // [1, 4, 13, 19, 55, 77] 排序正确
    </script>

5.4 获取数组元素索引

<script>
        // IndexOf(数组元素)  作用：返回该数字元素的索引号,从前面往后找
        // 它只返回第一个满足条件的索引号
        // 它如果在数组里找不到元素，则返回的是 -1
        var arr = ['red', 'green', 'blue', 'pink', 'green'];
        console.log(arr.indexOf('green'));  //1     
        console.log(arr.indexOf('black'));  //-1
        // lastIndexOf(数组元素)  作用：返回该数字元素的索引号,从后面往前找
        console.log(arr.lastIndexOf('green'));  //4   
    </script>

重点案例：数组去重

<script>
        // 要求把数组['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'c', 'b']中重复的元素去掉
        //1目标:把旧数组里面不重复的元素选取出来放到新数组中 重复的元素只保留一个，放到新数组中去重 
        //2.核心算法:我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过我们就添加，否则不添加。
        //3我们怎么知道该元素没有存在? 利用新数组index0f(数且元素)如果返回时-1就说明新数组里面没有该元素
        //封装一个去重的函数unique独一无二的
        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', 'z', 'a', 'x', 'a', 'x', 'c', 'c', 'b']);
        var demo1 = unique(['blue', 'green', 'red', 'blue'])
        console.log(demo);
        console.log(demo1);
    </script>

 5.5 数组转换为字符串

<script>
        // 1. toString()   将我们的数组转换为字符串
        var arr = [1, 2, 3];
        console.log(arr.toString());     //1,2,3

        // 2. join(分隔符)
        var arr1 = ['green', 'red', 'yellow'];
        console.log(arr1.join());   //green,red,yellow
        console.log(arr1.join('-'));   //green-red-yellow
        console.log(arr1.join('&'));   //green&red&yellow
    </script>

连接数组和删除数组元素方法：

<script>
        // 1. concat()  连接两个或多个新数组，不影响原数组
        var arr1 = [1, 2, 3];
        var arr2 = ['a', 'b', 'c'];
        var arr3 = [4, 5, 6];
        console.log(arr1.concat(arr2, arr3));   //[1, 2, 3, "a", "b", "c", 4, 5, 6]
        // 返回一个新的数组

        // 2. slice()  数组截取 slice（begin，end） 
        var arr4 = [1, 5, 9, 11];
        console.log(arr4.slice(1));  //[5, 9, 11]
        console.log(arr4.slice(2));  //[9, 11]
        console.log(arr4.slice(1, 3));  //[5, 9]
        // 返回被截取项目的新数组

        // 3. splice() 数组删除 splice（第几个开始，要删除个数）（重点看！）
        var arr5 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        // console.log(arr5.splice(5));   //[6, 7, 8, 9]
        console.log(arr5.splice(5, 2));   //[6, 7]
        // 返回被项目删除的新数组  注意：这个会影响原数组
    </script>

6. 字符串对象

6.1 基本包装类型 

JS 提供了三个特殊的引用类型：String 、Number 和 Boolean

<script>
        var str = 'andy';
        console.log(str.length);   //4
        // 对象、复杂数据类型才有属性和方法
        // 简单数据类型没有属性和方法，为什么会有length属性呢？
        // 基本包装类型：把简单数据类型 包装为 复杂数据类型
        // 相当于进行了以下步骤
        // 1. 把简单数据类型包装为复杂数据类型
        var temp = new String('andy');
        // 2. 把临时变量的值给 str
        str = temp;
        // 3. 销毁这个临时变量
        temp = null;
    </script>

6.2 字符串的不可变 

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间，装新的值， 原空间还在。 因此不要大量地拼接字符串。

6.3 根据字符返回位置

<script>
        // 查找字符串中'o'出现的位置以及次数
        // 1. 先查找出第一个o出现的位置
        // 2.只要index的返回值不为-1就继续往下查找
        // 3. 而indexOf 只能查找到第一个，所以后面的查找，一定是当前的索引号+1
        var str = 'oabcoefoxyozzopp';
        var index = str.indexOf('o');
        // console.log(index);  //3
        var num = 0;
        while (index !== -1) {
            console.log(index);  //3   6  9  12
            num++;
            index = str.indexOf('o', index + 1);
        }
        console.log('o出现的次数是：' + num); //4


    </script>

 6.4 根据位置返回字符（重点）

<script>
        // 1. charAt(index)  根据位置返回字符
        var str = 'andy';
        console.log(str.charAt(3));  //y
        for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i));   //a  n  d  y
        }

        // 2. charCodeAt(index) 返回相应索引号的字符ASCII值，目的：判断用户按下了哪个按键
        console.log(str.charCodeAt(0));  //97

        // 3. str[index] H5新增
        console.log(str[0]);   //a
    </script>

理解难点：

<script>
        // 判断一个字符串'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数
        // 1. 用charAt()遍历这个字符串
        // 2. 把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就+1
        // 3. 遍历对象，得到最大值和该字符
        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);
        // 2. 遍历对象
        var max = 0;
        var ch = '';
        for (var k in o) {
            // k得到的是属性名
            // o[k]得到的是属性值
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是' + ch);
    </script>

6.5 字符串操作方法（重点）

<script>
        // 1. concat('字符串1','字符串2'...) 用于连接两个或多个字符串，拼接字符，等效于+，+更常用
        var str = 'red';
        console.log(str.concat('andy'));    //redandy

        // 2.substr('截取的起始位置','截取几个字符')
        var str1 = '改革开放';
        console.log(str1.substr(2, 2));   //开放

        // 3. slice(start,end)
        var str2 = '秋天的落叶';
        console.log(str2.slice(2));   //的落叶   从索引号为2开始截取到最后一个元素
        console.log(str2.slice(2, 4)); //的落    从索引号为2开始截取到索引号为4之前的元素

        // 4. substring(start,end)
        var str3 = '今天好冷';
        console.log(str3.substring(2));    //好冷
        console.log(str3.substring(2, 3));  //好
    </script>

6.6 其他方法

<script>
        // 1. 替换字符  replace('被替换的字符','替换为的字符')
        var str = 'andyandy';
        console.log(str.replace('a', 'b'));   //bndyandy    只会替换第一个字符
        var str1 = 'abcodahojdcohj';   //要求把里面所有的 o 都替换为 *
        while (str1.indexOf('o') != -1) {
            str1 = str1.replace('o', '*');
        }
        console.log(str1);      //abc*dah*jdc*hj


        // 2. 字符转换为数组  split('分隔符')   前面学过 join 把数组转换为字符串
        var str2 = 'red,pink,blue';
        console.log(str2.split(','));    //["red", "pink", "blue"]
        var str3 = 'red&pink&blue';
        console.log(str3.split('&'));     //["red", "pink", "blue"]
    </script>

6.7 转换为大小写

<script>
        // 1. toUpperCase()  转换大写
        var str1 = 'yellow';
        console.log(str1.toUpperCase());  //YELLOW

        // 2. toLowerCase()  转换小写
        var str2 = 'BLUE';
        console.log(str2.toLowerCase());  //blue
    </script>