【js中阶对象的方法&&函数封装写日期】

林钟十九·

已于 2022-05-09 10:10:37 修改

阅读量157

点赞数

文章标签： javascript 前端 node.js bootstrap css3

于 2022-05-07 18:16:50 首次发布

本文链接：https://blog.csdn.net/qq_45753546/article/details/124627873

版权

本文详细介绍了JavaScript对象的合并方法，如何使用Object.assign()处理属性覆盖，以及如何通过Object.keys()获取对象属性名数组，并演示了时间对象的获取和封装。此外，还涵盖了location、history和screen对象的基本操作以及navigator浏览器信息获取。

摘要由CSDN通过智能技术生成

1.对象的合并

注意：
对象是不应许出现相同的属性，在合并过程中，如果有同样的属性名，后面会覆盖前面的值
let 变量=Object.assign({},obj1,obj2,obj3，…)

 let obj1={
            name:"小新",
            age:"6",
            sex:"男"
        }
        let obj2={
            name:"小葵",
            age:"3",
            sex:"女"
        }
        let obj3={
            name:"正南",
            age:"5",
            sex:"男"
        }
        let newObj=Object.assign({},obj1,obj2,obj3)
        console.log(newObj);

2.拿到对象的属性名的集合【重点】

拿到对象的属性名的集合（数组）：Object.keys(对象）(es6方法）
let 变量=Object.keys(对象）对象属性名的集合（数组）
let 变量=Object.values(对象) ：对象属性值的集合（数组）

let obj={
            name:"小新",
            age:"6",
            sex:"男",
            like:function(){
                console.log("扭屁股");
            },
            say:function(){
                console.log("我是动感光波超人");
            }
        }
        let keys=Object.keys(obj)
        console.log(keys);
        // 输出 [“name","age","sex","like","say"]
        /*
        需求：判断对象里面是不是 function,如果是函数就调用
        */ 
    //    遍历属性
    keys.forEach(function(key){
        if(typeof obj[key]==="function"){
            obj[key]()
        }
    })
   // 方法二
        // let 变量=Object.values(对象)
        let values = Object.values(obj)
        values.forEach(function (values) {
            if(typeof(value)==="function"){
                // 判断对象里面是不是 function,如果是函数就调用
                values()
            }
        })

3.时间对象

// 1.获取时间对象实列
        let date = new Date()
        // 2.获取年
        let year = date.getFullYear();
        // 获取月
        let m = date.getMonth() + 1
        // 获取日
        let d = date.getDate()
        // 获取星期 0-6 0：星期日
        let day = date.getDay()
        // 获取时
        let hh = date.getHours()
        // 获取分
        let mm = date.getMinutes()
        // 获取秒
        let ss = date.getSeconds()
        // 获取时间戳：毫秒（从1970年到现在的毫秒数
        let time = date.getTime()
        // 获取时间格式  xxxx/xx/xx/xx xx:xx:xx
        let t=date.toLocalString()
        console.log("年",year);
        console.log("月",m);
        console.log("日",d);
        console.log("星期",day);
        console.log("时",hh);
        console.log("分",mm);
        console.log("秒",ss);

3.1 时间对象年月日封装

 // 时间对象封装
        function getYMD(type){
        let date = new Date()
        // 2.获取年
        let year = date.getFullYear();
        // 获取月
        let m = date.getMonth() + 1
        // 获取日
        let d = date.getDate()
        let res = `${year} ${type} ${m} ${type} ${d}`
        console.log(res);
        }
        getYMD("/")
        
        //  补零函数
        function paZero(value){
        // 如果传进来的数字 < 10  就补零
        return value < 10 ? "0" + value : value
    }

3.2 封装时分秒


        function getHMS(type){
            let date = new Date()
        // 获取时
        let hh = date.getHours()
        // 获取分
        let mm = date.getMinutes()
        // 获取秒
        let ss = date.getSeconds()
            res = `${paZero(hh)} ${type} ${paZero(mm)} ${type} ${paZero(ss)}`
            console.log(res);
        }
        getHMS(":")
        //  补零函数
        function paZero(value){
        // 如果传进来的数字 < 10  就补零
        return value < 10 ? "0" + value : value
    }

3.2 封装星期

 function getDay(){
            let date = new Date()
            // 获取星期
             let day = date.getDay()
             let arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
                return arr[day]
        }
        console.log(getDay());

3.4 函数封装做出一个时间表

 // 年月日对象封装
        function getYMD(type) {
            let date = new Date()
            // 2.获取年
            let year = date.getFullYear();
            // 获取月
            let m = date.getMonth() + 1
            // 获取日
            let d = date.getDate()
            let res = `${year} ${type} ${paZero(m)} ${type} ${paZero(d)}`
            return res

        }


        // 时分秒
        function getHMS(type) {
            let date = new Date()
            // 获取时
            let hh = date.getHours()
            // 获取分
            let mm = date.getMinutes()
            // 获取秒
            let ss = date.getSeconds()
            res = `${paZero(hh)} ${type} ${paZero(mm)} ${type} ${paZero(ss)}`
            return res
        }


        // 星期
        function getDay() {
            let date = new Date()
            // 获取星期
            let day = date.getDay()
            let arr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            return arr[day]
        }

        //  补零函数
        function paZero(value) {
            // 如果传进来的数字 < 10  就补零
            return value < 10 ? "0" + value : value
        }
        let time = document.querySelector("#time");
        setInterval(function () {
            let res = getYMD("-") + " " + getHMS(":") + " " + getDay();
            console.log(res);
            time.textContent = res
        }, 1000)

4.location对象【了解】

location 操作url地址对象
1）location.href: url 完整地址
2）location.search ：获取url地址中 ? 后面的参数
3)location.hash ：获取url地址中 #后面的值
4)location.reload() : 方法，重新加载页面

了解属性：
5） location.port : 端口
6） location.pathname : 路径
7） location.host :域名加端口
8） location.hostname: 域名
8） location.protocol:协议
9） location.origin:协议+域名+端口