03JavaScript程序设计修炼之道 2019-06-09_fe-js-053Math对象_ Date对象、es6对象新变化

36Date.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // Date 日期时间
        var d = new Date();
        //console.log(d.toString());
        //console.dir(d);
        console.log(d.getFullYear());// 年
        console.log(d.getMonth()); // 0-11 0表示1月份
        console.log(d.getDate()); // 日
        console.log(d.getDay()); // 星期 0-6  0周日
        console.log(d.getHours(),d.getMinutes(),d.getSeconds());
       // 2019年06月11日 20:23:41 星期二
       //console.log(d.toLocaleString());
       function dateToString(d) {
           var year = d.getFullYear();
           var month = toTwo(d.getMonth() + 1);
           var day = toTwo(d.getDate());
           var h = toTwo(d.getHours());
           var m = toTwo(d.getMinutes());
           var s = toTwo(d.getSeconds());
           var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
           var weekday = arr[d.getDay()];
           var str = `${year}年${month}月${day}日 ${h}:${m}:${s} ${weekday}`;
           return str;
       }

       function toTwo(v) {
            return v<10?‘0‘+v:v;
       }

       console.log(dateToString(d));
    </script>
</body>
</html>

37Date-2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var str  = "2000/12/12"; //
        //var d = new Date();// 系统时间
        /* 字符串转成日期格式
        var d1 = new Date(str);
        console.dir(d1);

        var num = Date.parse(str); // 时间戳
        var d2 = new Date(num);
        console.log(d2.toLocaleString());

        function stringToDate(str) {
            return new Date(str);
        }
        */

        // 10天后的日期
        //d.setDate(d.getDate()+10);
        //console.log(d);

        /*
        console.log(d.getTime());
        d = new Date(d.getTime()+10*24*3600*1000);
        console.log(d);
        */
        var d = new Date();
        var d2 = new Date("2019/10/1");
        function diff(start,end) {
            return (end.getTime() - start.getTime())/1000
        }
        // 6 11
        var days = parseInt(diff(d,d2)/24/3600);
        console.log(days);
    </script>
</body>
</html>

38object-es6.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // 1 对象的解构赋值
        var obj = {name: "along", age: 32};
        //var  {name,age}   = obj;
        // 旧名字(右边对象的属性名):新名字
        var {name2:userName,age:userAge}   = obj;
        console.log(userName);

        function ajax({method="get",data={}}) {
            console.log(method,data);
        }

        /* 以前做法
        function ajax(options) {
            var method = options.method || ‘get‘;
            var data = options.data || {};
        }
        */

        ajax({
            data: {}
        });

        function fn(a=10,b=20) {

        }

        // 2 对象属性或方法简写
        var name = "along";
        var age = 32;
        var teacher = {
            name: name, // name: "along"
            age: age,
            teach: function() {
                console.log("hard working");
            }
        };

        //简写
        var teacher2 = {
            name, // name: "along"
            age,
            teach(){
                console.log(arguments);
                console.log("hard working");
            }
        };
        console.log(teacher2.name,teacher2.age);
        teacher2.teach();

        // 3 新增api
        //Object.is()
        console.log( NaN === NaN); // false
        console.log(+0 === -0); // true

        // [NaN,19,NaN]
        console.log(Object.is(NaN,NaN)); // true
        console.log(Object.is(+0,-0)); // false

        // Object.assign()
        var obj1 = {x:10, y:20};
        var obj2 = {z:30};
        Object.assign(obj2,obj1);
        console.log(obj2);
        console.log(obj1);

        // 克隆对象 浅层复制
        function clone(obj) {
            return Object.assign({},obj);
        }
        var obj3 = {a:10,b:{num:100}};
        var obj4 = clone(obj3);
        obj4.b.num = 200;
        console.log(obj3.b.num);

        var obj5 = {};
        for(var key in obj3) {
            obj5[key] = obj3[key];
        };
        console.log(obj5);

        // Object.keys() Object.values()
        var object = {a:1,b:2,c:3};
        console.log(Object.keys(object)); //["a", "b", "c"]
        console.log(Object.values(object));

        // for of
        for(var v of Object.keys([1,2,3])) {
            console.log(v);
        }

        // 原型 super 第三季
    </script>
</body>
</html>

原文地址:https://www.cnblogs.com/HiJackykun/p/11146723.html

时间: 2024-10-13 10:33:57

03JavaScript程序设计修炼之道 2019-06-09_fe-js-053Math对象_ Date对象、es6对象新变化的相关文章

03JavaScript程序设计修炼之道 2019-05-19_14-33-19--05-19_15-09-07 js简介与基本使用、变量与常量

es.md JavaScript程序设计修炼之道 -前置知识 html5+css3 -课程大纲 1.客户端原生js(es6/es7/..) 2.js常用库 jq等 3.服务端js(node/express/koa) 4.前端js框架(vue/react/..) ... -课程地位 学好js,走遍天下都不怕,是web前端或web全栈开发最重要最核心的技术,直接决定职业收入和发展 客户端原生javascript(es5/es6/es7/...) js简介与基本使用 html 标记语言 css jav

03JavaScript程序设计修炼之道-2019-06-18_20-07-52-Dom 文档对象模型

原文地址:https://www.cnblogs.com/HiJackykun/p/11053883.html

03JavaScript程序设计修炼之道-2019-06-20_20-07-53

06changeColor.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C

03JavaScript程序设计修炼之道 2019-06-23_15-50-11 验证码

1.png tool.js function rand(min,max) { return Math.round(Math.random()*(max-min)+min); } function $(id){ return document.getElementById(id); } 验证码.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/

03JavaScript程序设计修炼之道 2019-06-27_20-04-17 节点元素操作:复制

15clone.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati

03JavaScript程序设计修炼之道 2019-06-25_20-34-21-2019-06-25_20-44-06 节点元素的操作:增删改

14nodeOper.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp

03JavaScript程序设计修炼之道 2019-05-23_20-28-51_2019-05-26_21-12-07 for、练习、hw

16for.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl

03JavaScript程序设计修炼之道 2019-06-02_15-20-09 for each 数组es6的方法

25array4.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat

03JavaScript程序设计修炼之道 2019-06-04_fe-js-044es6解构赋值之数组解构_2019-06-06_20-10-17 解构赋值、数组排序法

27array6.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat