11、JS笔记-内置对象

MY Daisy

已于 2023-01-08 17:58:09 修改

阅读量251

点赞数

分类专栏： js 文章标签： javascript 前端 vue.js

于 2023-01-07 23:46:43 首次发布

本文链接：https://blog.csdn.net/Ambition_ZM/article/details/128596499

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.内置对象

js中对象分为三种：
自定义对象、内置对象、浏览器对象（js独有）
内置对象：
js语言自带的对象，供开发者使用，提供一些常用或基本的功能（属性和方法）

2.Math对象

Math中所有属性和方法都是静态的，可以直接使用，不用new实例化Math对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 属性：圆周率
        console.log(Math.PI);
        //方法 ：找最大值
        console.log(Math.max(1,99,2));
        console.log(Math.max(1,2,'aa'));//非数字没有办法笔记大小，返回NaN
        console.log(Math.max());//没有值，返回负无穷，-Infinity
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2.1 一些常用方法或属性

2.1.1 取整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 属性：圆周率
        console.log(Math.PI);
        //方法 ：找最大值
        console.log(Math.max(1,99,2));
        console.log(Math.max(1,2,'aa'));//非数字没有办法笔记大小，返回NaN
        console.log(Math.max());//没有值，返回负无穷，-Infinity(((
        //绝对值
        console.log(Math.abs(-1));
        console.log(Math.abs('-1'));//隐式转换为数字型1
        console.log(Math.abs('a'));//NaN
        //三个取整方法
        console.log(Math.floor(3.56));//向下取整 3
        console.log(Math.ceil(1.2));//向上取整 2
        console.log(Math.round(1.1));//四舍五入 1
        console.log(Math.round(-1.1));//-1
        console.log(Math.round(-1.5));//-1 其他数组是四舍五入，但是.5特殊，往大了取
        console.log(Math.round(-1.6));//-2
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2.1.2 随机数random

返回一个随机小数：0<=x<1
该方法里没有参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
// 返回一个随机小数：0<=x<1
// 该方法里没有参数
        console.log(Math.random());
        // 实践：返回两个数之间的随机整数（包括这两个数）
        function getRandom(min,max){
            return Math.floor(Math.random()*(max-min+1))+min;
        }
        console.log(getRandom(1,100));//获取1-100之间的一个整数
        
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

3.日期对象Date

日期对象是使用构造函数声明的对象，所以使用时，需要new关键字进行实例化
在这里插入图片描述

获取日期时间

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 实例化Date,如果没有参数，返回当前系统的当前时间
        var date = new Date();
        console.log(date);
        // 实例化Date有参数常用写法 
        // 数字型 2019,10,01  或字符串型 '2019-10-1 8:8:8'
        var date1 = new Date(2023, 1, 7);
        console.log(date1);
        var date2 = new Date('2023-1-7 23:19:10');
        console.log(date2);
        // 日期格式化
        var date3 = new Date();
        console.log(date3.getFullYear());//返回当前日期年
        console.log(date3.getMonth() + 1);//返回当前月 （0-11月）返回0，实际1，所以月份要加1
        console.log(date3.getDate());//返回当前是几号
        console.log(date3.getDay());//返回周几（周日是0，周一-周六是1-6）
        // 需求：返回2023年1月7日
        var year = date3.getFullYear();
        var month = date3.getMonth() + 1;
        var day = date3.getDate();
        console.log('今天是:' + year + '年' + month + '月' + day + '日');

        //时分秒格式化
        console.log(date3.getHours());//时
        console.log(date3.getMinutes());//分
        console.log(date3.getSeconds());//秒
        // 要求封装一个函数返回当前时分秒08:08:08
        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());

    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

获取时间戳

//获取Date总毫秒数,从1970年1月1日到现在的毫秒数
        // 1\通过valueOf()或getTime()
        var date4 = new Date();
        console.log(date4.valueOf());
        console.log(date4.getTime());
        //2\简单的写法:最常用
        var date5 =+new Date();//+new Date()返回总毫秒数
        console.log(date5)
        //3\H5新增方法
        console.log(Date.now());

在这里插入图片描述

倒计时制作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function countDown(time) {
            var nowTime = +new Date();
            var inputTime = +new Date(time);
            var times = (inputTime - nowTime) / 1000;//ms转为s
            var day = parseInt(times / 60 / 60 / 24);
            var h = parseInt(times / 60 / 60 % 24);
            var m = parseInt(times / 60 % 60);
            var s = parseInt(times % 60);
            return day + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2023-1-10 20:00:00'));
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

4.数组对象

添加删除元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr=new Array();//创建一个空数组
        var arr1=new Array(2);//创建一个长度为2的数组,有两个空数组元素
        var arr2=new Array(1,2);//等价于[1,2],创建一个数组,有两个元素分布是1,2

        // 检测是否为数组
        // (1)instanceof 检测是否是数组
        var arr3=[];
        console.log(arr3 instanceof Array);
        // (2)isArray 确定传进去的参数是否是数组 h5新增
        console.log(Array.isArray(arr3));

        // 添加或删除数组元素
        // 添加:push() 在数组末尾添加一个或多个数组元素,参数是要添加的元素,返回值是最终数组的长度
        arr3.push(1,3);
        console.log(arr3.push(1,3));
        console.log(arr3);
        // 添加:unshift() 在数组开头添加元素.参数是要添加的元素,返回值是最终数组的长度
        arr3.unshift(9,8);
        console.log(arr3);
        //删除:pop() 删除数组最后一个元素,没有参数,返回值是删除的元素
        console.log(arr3.pop());
        console.log(arr3);
        // 删除:shift()删除数组第一个元素,没有参数,返回值是删除的元素
        console.log(arr3.shift());
        console.log(arr3);

    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

数组排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 翻转数组
        var arr=['apple','pink','blue'];
        arr.reverse();
        console.log(arr);
        //数组排序
        arr.sort();
        console.log(arr);
        //数组排序(冒泡排序),直接用sort()比较数字,得出的结果是按字典序排列的 1,12,18,5,6,8
        var arr1=[1,12,5,6,8,18];
        arr1.sort(function(a,b){
            return a-b;//升序
            return b-a;//降序
        });
        console.log(arr1);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

数组索引方法

注意案例：数组去重

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //返回数组元素索引号 
        //indexOf,只返回第一个满足条件的元素的索引,找不到该元素,返回-1
        var arr = ['red', 'blue', 'green', 'blue'];
        console.log(arr.indexOf('blue'));
        // lastIndexOf 从后往前找元素,返回索引,找不到该元素,返回-1
        console.log(arr.lastIndexOf('blue'));
        //数组去重(重点)
        // 核心原理:遍历旧数组,用旧数组的元素去查询新数组,如果新数组中有就不添加,没有就添加元素到新数组
        console.log(arr);
        function uniqueArr(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) == -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        console.log(uniqueArr(arr));
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

数组转化为字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr=[1,2,3];
        console.log('原数组='+arr);
        //数组转为字符串
        // 1.toString()
        console.log('转为字符串='+arr.toString());
        //2.join(分隔符)或join()
        console.log('转为字符串带分割符='+arr.join('+'));
        // concat()链接两个或多个数组,返回新数组,不影响原来数组
        var arr1=[1,2,3];
        var arr2=['a','b','c'];
        console.log('合并完成新数组='+arr1.concat(arr2,arr1));
        console.log('原数组='+arr1);
        //slice(begin,end) 数组截取,返回被截取项目的新数组.[begin,end),左闭右开,不影响原数组
        var arr3=[1,2,3,4,5];
        console.log('截取新数组='+arr3.slice(1,3));
        console.log('原数组=='+arr3);
        // splice() 数组删除(begin,num),从第几个开始,共删除多少个.返回被删除项目的新数组,会影响原数组
        var arr4=[1,2,3,4,5,6];
        console.log("删除后的新数组="+arr4.splice(2,3));
        console.log('原数组='+arr4);


    </script>
</head>
<body>
    
</body>
</html>